Как сделать такую галлерею?

Question

[Artem Petrenko]

Есть блок с 7 картинками. Расположить нужно следующим образом:



Пробовал простыми флоатами, пробовал флексбоксом. Не выходит, все портит длинная картинка.

Что тут лучше использовать? Заранее благодарен.

Answer 1

[Cyber_bober]

Создайте 4 больших контейнера, размером с большое изображение, и размещайте в трех по два изображения, в одном большое.

Answer 2

[Денис Инешин]

sapegin.github.io/jquery.mosaicflow

Comments

[Artem Petrenko]

а если только на сss?

[Денис Инешин]

Artem Petrenko: только на CSS, только вручную и не подойдет для динамических галерей.

[Artem Petrenko]

Денис Инешин: мне подсказывет чуйка, что можно флоатами влево. Но не получается просчитать.

[Денис Инешин]

Artem Petrenko: нельзя, в том то и дело. Никакой элемент не сможет при флоатах прыгнуть на ряд вверх.

[Денис Инешин]

Artem Petrenko: думаете просто так эти скрипты придумали? Этот + еще masonry.desandro.com
Именно потому, что не сделать на чистом CSS такой layout для динамических изображений.

Вот если вы точно будете знать, что layout всегда одинаков. 6 квадратных картинок + 7-я прямоугольная. Тогда вы сможете добавить ей спец. класс, который ее сдвинет дополнительно, либо, как в совете Cyber_bober, разбить на доп. контейнеры. Но это будет раз и навсегда зафиксированный layout.

[Zhainar]

Artem Petrenko: через абсолютное позиционирование

Answer 3

[Антон Нагаец]

Решение на flex
Из минусов: высокая картинка должна стоять НЕчетной.
На статику пойдет на динамику врятли.

Answer 4

[Михаил Чирский]

Не очень понял, почему у вас возникла проблема, примерно вот:
https://jsfiddle.net/wvj0tet4/

по поводу динамики, такие вещи делаются на стороне сервера, если работаете с файловой системой или бд, уже там при построении вашего представления, вы определяете шаблоны, в вашем случае их 2, одна фотка - значит прямоугольник, деве фотки - значит квадрат, а по поводу кол-ва столбцов, тоже можно загорячиться, ну мне почему то кажется, что определить к примеру, 4-5 колонок более чем достаточно, а вот их внутр. поведение, сколько фото и каких, уже делается просто.

Чтобы колонки тянулись от кол-ва, есть замечательные св-во:
:nth-last-child
Поддержка конечно не везде, ну уже зависит от потребностей, как мне кажется, сейчас уже, 90 % и более, решается стилями, потому, что поддержка того же Flexbox, который всем облегчил жизнь, кто умеет его готовить, показывает хорошие цифры: caniuse.com/#search=flexbox

P.S. Поправьте, если ошибся где