Как сверстать блок с картинками «плиткой» при динамической высоте каждой плитки?

Question

[Полина Емельянова]

Здравствуйте коллеги.

САБЖ:
Есть вот такой раздел в лендинге: лайтаут плиткой, но у каждой - своя высота. При этом из родителя ничего не вываливается, сверху и снизу все по линеечке!


ВОПРОС: Как это можно реализовать малой кровью (если можно)? При чем надо бы учесть, что конечный юзвер подгонять ширины-высоты не будет: как зальет - так и зальет. Т.е. надо как-то фиксировать размеры, гибко перестраивая лайтаут... Надеюсь понятно объяснила.

Какие библиотеки посоветуете?
Какой порядок работы с этой секцией порекомендуете?

Заранее ОГРОМНОЕ СПАСИБО!!! За ответ.

ЗЫ ПРОСЬБА коллеги, масонри не дает выравнивания по родителю. А мне нужны ровные верх-низ края

ЗЫЫ isotope.metafizzy.co/layout-modes/fitcolumns.html - Это про Масонри. Но адаптивность у него нулевая.

Answer 1

[alvvi]

masonry.js

Comments

[Полина Емельянова]

Нет. Не дает выравнивания по высоте....

[alvvi]

Полина Емельянова: что есть вырванивание по высоте? Вам надо чтобы последние картинки растянулись до конца секции?

[Полина Емельянова]

Илья Ростопка: да... Конечно, на родителя можно поставить overflow: hidden;, но не известно КАК обрежется картинка.

Кроме того, не было бы проблемы, если бы не нужно было их сортировать по клику: просто запихать в колонки и все. Но сортировка не позволит этого. Не известно какой именно итем останется в какой колонке.(((

[Ankhena]

Полина Емельянова:

но не известно КАК обрежется картинка.

Как она автоматом растянется тоже неизвестно.

Так что единственный нормальный вариант, это объяснить клиенту "хотите ровно - подгоняйте".