@MrFallen

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

Добрый день, бьюсь с этой проблемой несколько дней.
И так. Имеется 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
... ... ...
... ... ...
  • Вопрос задан
  • 298 просмотров
Решения вопроса 1
Amirez
@Amirez
В чем секрет кота Бориса?
Тут masonry.js, в разделе "Adding & removing items" есть примеры использования методов удаления и добавления элементов. Просто запускайте свой метод добавления в событии подгрузки Infinite Scroll. Другого варианта выстроить элементы с разной высотой просто нет, и grid layout тоже этого не может.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
iDevArtem
@iDevArtem
по-моему, по умолчанию, порядок идет слева направо (то есть как вам и нужно).
1, 2 и 3 блоки будут прижаты к верху страницы (начальная позиция).
4-й же блок будет под самым меньшим по высоте блоком, 5-й - под следующим по высоте и т.д.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы