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

Question

[Your Friend]

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

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

Answer 1

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

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

Comments

[Your Friend]

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

Answer 2

[hscode]

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

Comments

[Your Friend]

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

Answer 3

[Дмитрий]

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

Comments

[Your Friend]

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

Answer 4

[Ankhena]

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

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

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