Как сверстать не адаптивную сетку из картинок такого типа?

Question

[Your Friend]

Доброго времени суток. Есть макет, условие - страница должна быть не адаптивной, и при прокрутке вниз будут добавляться фотки через плагин. С прокруткой вопрос решен, остался нюанс как построить такую сетку. Слыхал что есть плагины типа Masonry, но они перестраивают расположение блоков при ресайзе, мне же нужно что бы они оставались на месте. Подскажите, в таких плагинах как то отключается перестройка при уменьшении экрана? Или же есть какие то другие варианты для построения такой сетки? Буду благодарен

любому совету.

Answer 1

[Михаил Шведков]

отключить масштабирование экрана на устройствах

<meta name="viewport" content="width=ТУТ ШИРИНА МАКЕТА">

Вполне рабочий вариант. Правда, так будет меняться размер всего макета, т.е. весь сайт будет неадаптивным.
Событие в js, отвечающее за изменение размера окна
window.onresize
Если не жалко, можно выдрать из исходников Masonry все упоминания и наслаждаться.

$('.grid').masonry({
  resize: false
});

Наиболее адекватный вариант без варварства)

Comments

[Your Friend]

С виду похоже на рабочий вариант ) Viewport уже отключил, попробую вариант с resize, потом отпишу.

[Archakov Dennis]

johnylikejuice: используйте bootstrap

[Your Friend]

Bootstrap был бы вообще идеальным вариантом, но не совсем представляю как можно в 2 row поместить блоки разной высоты, что бы блоки нижнего row прилегали вплотную в блокам верхнего row. Не затруднит пример Вашего варианта привести пжлст?

[Archakov Dennis]

johnylikejuice: я щас вам скину вариант рабочий.

[Archakov Dennis]

доиграю катку в ксго

[Your Friend]

ради примера я подожду)

[Your Friend]

Михаил Шведков Михаил Шведков + 10 в карму за вариант с resize, который оказался более подходящим) было бы еще очень интересно глянуть на пример Ingush Archakov с bootstrap

Answer 2

[Сергей Горячев]

Если нужна НЕ адаптивная сетка, задайте блоки ручками через CSS, а картинки повесьте на фон тега А.
У вас всего 4 типа блоков. Вот и сделайте общий класс и вспомогательный.

Comments

[Your Friend]

Насколько я осведомлен, тут нужно использовать родителем именно img, а не A, потому что видите кнопку ПОДРОБНЕЕ ? это тоже будет тег A , а если ссылку помещать в ссылку, тогда выходит плохая вещь, точнее это не работает. По этому тег A должен быть 1 здесь, если я правильно понимаю . Если нет, тогда не затруднит Вас накидать пример кода пжлст, буду весьма признателен

Answer 3

[hscode]

Обычно все эти перестановки делаются в css. Поищите там media queries и попробуйте их очистить.

Comments

[Your Friend]

У Masonry нет media, если я не ошибаюсь, там все через скрипт делаеться

Answer 4

[Дмитрий]

https://jsfiddle.net/soledar10/575uwrqv/

Comments

[Your Friend]

Весьма необычное решение) спасибо, буду знать

Answer 5

[Ankhena]

Masonry свойства
isResizeBound(логический)
Связывает расположение блоков с изменениями размеров окна.
По умолчанию: true

По поводу ссылки в ссылке.
Вполне может быть одна ссылка, а кнопка с помощью span. Плюс: нажиматься будет вся область картинки, а не только кнопка.

Еще хочу напомнить про прекрасные теги figureи figcaption.