Masonry и рваный нижний ряд

если ровненько, то квадратненько.

-----

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

А еще, посмотрите разные разрешения и, возможно, ваше ТЗ расширится.

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

Да ладно, и на телефоне?

Проще другой какой скрипт, этот просто переделывает это

<div class="demo"><img src="//unsplash.it/557/387" alt="" class="demo-image"></div>

на это

<div class="demo" data-macy-complete="1" style="width: calc(16.6667% - 20px); position: absolute; top: 0px; left: 0px;"><img src="//unsplash.it/557/387" alt="" class="demo-image"></div>

Но, можно посчитать кол-во рядов в div id="macy-container", разделить на кол-во колонок, если у вас оно стационарное. И

поиграться с высотой $('#macy-container'), оффсеттоп+высота самого длинного элемента последнего полного ряда (округление вниз рядов) и аналог для самого последнего неполного в зависимости есть он или нет (округленн === рядов). Тогда может что то и получиться

хтмл код с http://macyjs.com

А что такого?

Это же суть миниатюры. Щелкаешь одну - она увеличивается и дальше листаешь их по порядку.

Я бы извратился и сделал так: при прокрутке страницы "короткие" колонки плавно опускаются вниз. До выравнивания всех по нижнему краю блока.

Или "длинные" прокручивать быстрее до того же эффекта.

Накидал пример на две колонки.

Вместо top/bottom можно использовать onscroll страницы, вычисляя величину перемещений и т.д. - десяток строк на js.

А как насчёт того, чтобы ширину длинной колонки уменьшить? А ширину короткой увеличить?

Sitealert,

Пропадет смысл ровненькой плиточки :)

Я вот прихожу к выводу, что вроде как становится ясно, почему я не смог найти примеры. Такой pinterest-style хорош (и используется), когда есть бесконечный скролл, в общем когда фоток много, от 100, и что там ниже фоток располагается (вплоть до футера) - не так важно. В этом смысле вся галерея всегда ровная, потому что она занимает весь экран и ты просто скроллишь - они появляются новые и укладываются рядами.

Когда фоток не очень много - такое нигде и не используется. У меня фотки будут загружать пользователи, есть ограничение (20-30 скорее всего), галерея - часть страницы, ниже будут еще блоки, поэтому наверное придется делать квадратные миниатюры, либо попробую найти решение, которое предложил zhitov.

Размял мозги, сделал прототипчик.

[ATTACH]172888[/ATTACH]

Желательно в тэги img прописывать на сервере style="width:...; height:..;". На случай незагрузки картинки.

Размер дива .flex width: 690px; /* 220*3+30 */ - основаны на ширине картинок, margin и padding...

zhitov, Спасибо, скаченное работает как надо, сегодня-завтра посмотрю можно ли это всё встроить в мой код. У меня там собственно макет сайта работает по похожему принципу - боковые колонки опускаются вниз при скроллинге, возможно все это будет глючить вместе :)

Сейчас пока не дома, потом отпишусь.