Есть ли адаптивный js скрипт для расположения картинок плиткой?

Question

[smithana]

Всем привет,

понадобился мне скрипт, который набор картинок разбивает на красивую аккуратную плитку.
Нашёл старенький простенький:
https://github.com/ionelmc/jquery-gp-gallery

Работает, но он ни разу не адаптивный.
Кто-нибудь встречал скрипт, который пересчитывает расположение и размеры при ресайзе страницы?

Спасибо!

Answer 1

[rinatoptimus]

https://www.jqueryscript.net/gallery/Responsive-Ju...

Comments

[smithana]

Бинго!! огромное спасибо, именно то, что нужно!

Только нужно быть аккуратным, с утра пару часов провозился, но так и не смог наладить адаптивность.
И только вечером сразу же бросилось в глаза, что нужно data атрибуты задавать не для img, а для image-wrapper.

Ещё раз огромное спасибо!

Answer 2

[Dmitry Bay]

https://masonry.desandro.com/

Comments

[smithana]

многообещающая домашняя страничка, но..
1. Либо я указываю в настройках и в css ширину столбца, либо плагин берёт за ширину столбца ширину первой картинки.
2. Рваный нижний край.

Посмотрел примеры, почитал документацию, вроде у всех так.

[Dmitry Bay]

1. Либо я указываю в настройках и в css ширину столбца, либо плагин берёт за ширину столбца ширину первой картинки.
- плагин адаптивный. Смотрите изучайте. У меня он работал в связке с инфинити скрул, и при ресайзе страницы перестраивался. Другое дело что там есть баг с неподгруженной картинкой.

2) Рваный нижний край.
- Вы изначально в вопросе не ставили так задачу. Если известно кол-во картинкой, их соотношение, то возможно проще их будет запихнуть с сетку див как background image?

[smithana]

Dmitry Bay,
Вот как раз смотрю, изучаю.
2. количество картинок не известно, background-image был бы идеальным вариантом, но картинки нельзя обрезать(

Answer 3

[prodavec macdonalds]

Почему не flex-box?

Comments

[Евгений Вольф]

Думаю, это связано с тем, что картинки могут быть разной высоты...

[Павел Корнилов]

Так скриптом проще лишь высоту их в flex-box выровнять было бы =)

[smithana]

тут другая проблема. Если делать flex-start, то будет рваный правый край. Если делать space-between, то в строках будет разное горизонтальное расстояние между картинками.

[prodavec macdonalds]

Евгений Вольф, https://jsfiddle.net/b48wsrau/6/

[smithana]

prodavec macdonalds, Эх, если бы не разные отступы между картинками, это был бы идеальный вариант.

[prodavec macdonalds]

smithana, https://jsfiddle.net/h5c3k43j/9/ такой ещё вариант, но на этом наши полномочия все