Как расположить изображения плиткой, как во Вконтакте?

Question

[SanistRay]

Здраствуйте. Зразу к сути поставленной задачи, нужно сделать отображение картинок в блоке как во Вконтакте. Т.е Изображения разной ширины и высоты подстраиваются, и все это выглядит красиво.

Пример, как во Вконтакте когда 3 изображения:



Максимум может быть 10 изображений. Если изображений много, то будет что - то типо этого:



Сайт на Wordpress, поэтому если есть плагины с похожим функционалом было бы хорошо. Но если нет, решения на CSS / JS / jQuery вполне устроят.

Данный вопрос я гуглил, были варианты для полноценных галерей, но под конкретно мой случай они не подходят потому что при большом количестве изображений блок просто увеличивает высоту и изображение выстраиваются в мозаику, а нужно что - бы сильно уменьшались (как на последнем скрине выше).

Заранее спасибо всем за ответы.

Comments

[Дмитрий Кузнецов]

Как вариант: получаем количество изображений и через grid контролируем сетку так, как надо. За точность ответа не уверен.

[Алексей]

Думаю плагин Simple Masonry Layout подойдет

Answer 1

[Вова Дружаев]

Примерно похожее делал - компоновал галерею маркируя дополнительным классом горизонтальное и вертикальное изображение (на php получить размеры из метаданных пикчи проблем нет). Css классом писал кол-во в wrapper изображений. Потом была магия css
Получилось примерно так: https://yadi.sk/i/0_2_7kD2ZGU04A
классы хитрые https://yadi.sk/i/QoiKqQsbz0S7zg но там 50 строк css для вариаций и их отображений.
С js заморачиваться не хотел - решил в лоб

p.s. ссылку дать не могу - тостер не пропускает урл (наверно потому что основной домен указан у меня в профиле - по нему тостер саморекламой считает)

Comments

[SanistRay]

Спасибо, постараюсь на досуге подумать.

Увы, PHP не учил еще, но постараюсь вникнуть)

[alex4answ]

SanistRay, не нужно никакого php для этого, это строго работа фронта, тут grid сойдет.

[Вова Дружаев]

alex4answ, чтоб вертикальный - оставались вертикальными, а горизонтальные - также бы уменьшались в размерах, но не кропались до квадрата. Давай - показывай на деле

[alex4answ]

Владимир Дружаев, окей, есть некоторые нюансы, добавить работу js, но мой посыл был не в том что тут строго ограничиться grid, а в том что это работа фронтендной части.

P.S. Показывать на деле, делать задачу просто чтобы показать что можно обойтись без php - не буду, просто не хочу, можете читать как "дал заднюю", "слился", мне не важно :-)

[Вова Дружаев]

alex4answ, мой подход: разобрать какое - вертикальное изображение, горизонтальное, квадратное (крайне редкий гость для меня - я им принебрёг) - и задать этому нужные классы можно и через фронт решить. На js возможно тоже определить размеры пикч. Но на php проще - потому как в вордпресс в метаданных изображения размеры уже есть в числах. При загрузке в медиабиблиотеку вордпресс сам все метаданные собирает и хранит в базе.
И это незаметней для потребителя. А вот на фронте это делать - придется пока идут вычисления скелетон навешивать или лоадер - потому как мало кому понравится прыгающий вариант с картинками

p.s. а задача действительно нетривиальная (на текущий момент для меня так и есть - я не гуру js и алгоритмов). Но как в моем случае матрица галереи 2х2 (варианты: горизонтальное-горизонтальное - обозвал: hh, vv, hv, vh) или 2х3 или 3х3 просчитываются вариации и под них css пишется. Я использовал флексы - они пока лидируют по поддержке браузеров. Но через годок гриды догонят.