Как использовать Masonry с Infinite Scroll?

Question

[MrFallen]

Добрый день, бьюсь с этой проблемой несколько дней.
И так. Имеется Laravel проект, верстка на Bootstrap 4 используется card-column, сетка новостей выстроена в Masonry стиле (в 3 колонки). При прокрутке вниз, подгружаются еще 9 новостей с помощью Infinite Scroll.

Как сделать вывод новостей слева в права и вниз.
Сейчас лента выводит новости вот так:
1 4 7
2 5 8
3 6 9
... ... ...
... ... ...
А нужно чтобы лента имела такой вид:
1 2 3
4 5 6
7 8 9
... ... ...
... ... ...

Comments

[FeST1VaL]

эм... переверстать? сделать чтобы они были не обернуты в колонки, а были просто inline-block или же флексы

[MrFallen]

Артем Будин, тогда получается вот так:

[FeST1VaL]

MrFallen, ну, уже почти же? расширить блоки и подключить Masonry. Или у вас каждая строка в блоке? Проще конечно было бы если бы вы выложили в песочницу пример...

Answer 1

[Амир Алимжанов]

Тут masonry.js, в разделе "Adding & removing items" есть примеры использования методов удаления и добавления элементов. Просто запускайте свой метод добавления в событии подгрузки Infinite Scroll. Другого варианта выстроить элементы с разной высотой просто нет, и grid layout тоже этого не может.

Answer 2

[iDevArtem]

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

если высота 1-го блока 200px, 2-го - 100px, 3-го - 150px... то 4-й блок будет под 2-м блоком, 5-й под 3-м и т.д.