Многоколоночный вывод контента

[funnywheel]

Есть задача - организовать многоколоночный вывод контента на страницу. Контент - условно посты в блоге. У постов, естественно, различные:
- изображения ( thumbnail'ы )
- количество символов в заголовке

Дополнительное условие - работает AJAX-подгрузка постов.

Первая мысль - сделать на masonry.js - сразу-же сложности:
- масонри необходимо повторно инициализировать для контейнера
- масонри перестраивает посты в одному богу известном порядке

Мысль вторая - флексбокс (сейчас буду ее тестить, если кто-то сейчас предложит решение или направит в нужную сторону будет круто, если нет - обновлю топик)

Мысль третья - column-count - но он у нас выводит элементы сначала заполняя 1-ю колонку, потом 2-ю и т.д., а мне нужно, чтобы он ложил первый элемент в 1-ю колонку, 2-й во вторую, 3-й в 3-ю, а потом переходил на следующий "ряд", т.е. 4-й элемент в 1-ю колонку, 5-й во 2-ю и т.д.

Спойлер: схематично

Работает так:

1 4 7
2 5 8
3 6 9


А нужно:

1 2 3
4 5 6
7 8 9

Вот состряпал Для просмотра ссылки Войди или Зарегистрируйся в котором можно посмотреть на структуру выводимых элементов. Там прописан column-count. Если есть мысли - форкайте, буду признателен.

PS: Вариант с float'ами, инлайнами не подходит, т.к. элементы имеют фиксированную ширину но переменную высоту (для альтернативно-одаренных уточняю)

 

[vytyacom]

Судя из списка "нет", то тут только флексбокс остается.
Можно попробовать самому (всякие генераторы Для просмотра ссылки Войди или Зарегистрируйся Для просмотра ссылки Войди или Зарегистрируйся Для просмотра ссылки Войди или Зарегистрируйся )
А можно кстати попробовать прикрутить последний бутстреп. Там уже на флексах все колонки.

p.s. флоаты также могут справится с задачей. главное их обнулять после каждого последнего элемента в ряду, чтоб не было схлопывания в случае с разной высотой. если их 4, то nth-child(4n+4) {clear: both} и тд

 

[funnywheel]

Судя из списка "нет", то тут только флексбокс остается

Из того, что я знаю - да. Ковыряю флексбокс, хотя в положительном исходе не очень уверен.

А можно кстати попробовать прикрутить последний бутстреп. Там уже на флексах все колонки.

Верстка готова 80%, ради одного действия подключать бутстрап?

p.s. флоаты также могут справится с задачей. главное их обнулять после каждого последнего элемента в ряду, чтоб не было схлопывания в случае с разной высотой. если их 4, то nth-child(4n+4) {clear: both} и тд

покажите как Вы себе это представляете, у меня в топике ссылка на pen, сделайте форк, добавьте флоаты и очистку потока черех 4n.

 

[tovGANs]

При использовании float будут различные отступы между блоками. И как быть со старыми версиями браузеров при использовании flex? Или их поддержка не важна?

 

[HeadHunter]

ерстка готова 80%, ради одного действия подключать бутстрап?

вам не надо тащить весь бутстрап, достаточно его сетки, весит она не много