Есть ли js скрипт для формирования сетки фотографий как в разделе «Воспоминания» в iOS 10?

Question

[someden]

Подскажите подходящий скрипт или формулу по которой формируется сетка в iOS

Некоторые особенности:

1. Последний ряд внизу должен составлять одну линию (поэтому masonry или isotope не подходят)

Как обычно в masonry или isotope:

|__|--|  |_____|
      |__|

А так должно быть:

|__|__|__|_____|

2. Некоторые блоки занимают сразу две колонки.

3. Без рандома. Сетка формируется исходя из имеющихся фотографий и их пропорций.

Пример сетки:

Comments

[riot26]

vnjs.net/www/project/freewall
возможно, то что нужно

[someden]

riot26: пробовал не подходит, этот скрипт скрывает картинки чтобы получился ровный нижний край, а мне нужно чтобы не скрывал. И не формирует большие блоки на две колонки.

[riot26]

kisonic: без скрытия краёв ничего и не получится. Разве что изображения будут вручную подогнаны под нужные пропорции.

[someden]

riot26: не краев, этот скрипт скрывает целые блоки с картинками полностью. Сами картинки могут обрезаться (overflow: hidden) или на бекграунде будут (background-size: cover), но главное чтобы все они были показаны.

Answer 1

[Karponter]

object-fit:cover + fixed layout у Freewall

А вообще все зависит от юзкейса. Навскидку, хорошего библиотечного решения для такой задачи я не нашел, поэтому я бы запилил с десяток fixed лейаутов для Freewall, на 3, 4, 5, 6, ... фото. Дальше вертикально их последовательно выставлять, рандомно подобранные.
Но алгоритм подбора последних 2-3 лейаутов, по хорошему, будет не так уж прост.

Если интересны детали -- могу развинуть тему.