Работа с Infinite Scroll

Infinite Scroll — это техника, позволяющая динамически загружать новые элементы на страницу по мере прокрутки, без необходимости перезагрузки. В сочетании с Isotope она обеспечивает плавную, интерактивную сетку с фильтрацией и сортировкой элементов. Важным моментом является синхронизация добавления новых элементов с перерасчетом позиций в сетке.

Для работы с Infinite Scroll на основе Isotope необходимы:

  • контейнер с элементами сетки, инициализированный через Isotope;
  • настройка Infinite Scroll для отслеживания прокрутки и получения новых данных;
  • добавление новых элементов в Isotope через метод .appended().
var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

$grid.infiniteScroll({
  path: '.pagination__next',
  append: '.grid-item',
  outlayer: $grid.data('isotope'),
  status: '.page-load-status'
});

Ключевой момент: outlayer должен быть установлен на экземпляр Isotope, чтобы новые элементы корректно вставлялись в сетку.

Настройка path и загрузка элементов

Параметр path в Infinite Scroll отвечает за определение URL для следующей страницы контента. Он может быть строкой с шаблоном или функцией. Например:

$grid.infiniteScroll({
  path: function() {
    var nextPage = this.pageIndex + 1;
    return '/page/' + nextPage + '/';
  },
  append: '.grid-item',
  outlayer: $grid.data('isotope')
});

Использование функции path позволяет гибко управлять нумерацией страниц и адаптировать под REST API или пагинацию на сервере.

Работа с событиями Infinite Scroll

Infinite Scroll предоставляет набор событий, которые необходимы для корректной интеграции с Isotope:

  • append.infiniteScroll — срабатывает при добавлении новых элементов;
  • load.infiniteScroll — срабатывает при успешной загрузке следующей страницы;
  • error.infiniteScroll — при ошибке загрузки.

Пример привязки события для добавления элементов в Isotope:

$grid.on('append.infiniteScroll', function(event, response, path, items) {
  var $items = $(items);
  $grid.isotope('appended', $items);
});

Здесь items — это элементы, загруженные Infinite Scroll. Метод appended добавляет их в сетку, перерассчитывая позиции и анимацию.

Оптимизация производительности

При работе с большим количеством элементов важно минимизировать перерасчет сетки:

  • Группировка элементов перед вызовом .appended() — вставка сразу всех загруженных элементов в одну операцию.
  • Использование imagesLoaded для корректного расчета размеров изображений:
$grid.imagesLoaded(function() {
  $grid.isotope('layout');
});

Это предотвращает смещение элементов при асинхронной загрузке картинок.

Комбинирование с фильтрацией и сортировкой

Isotope позволяет фильтровать и сортировать элементы на лету. После добавления новых элементов через Infinite Scroll необходимо учитывать, что фильтры могут не применяться автоматически. Решение — повторно вызывать фильтр после добавления элементов:

$grid.on('append.infiniteScroll', function(event, response, path, items) {
  var $items = $(items);
  $grid.isotope('appended', $items);
  $grid.isotope({ filter: '.active-filter' });
});

Это гарантирует, что новые элементы будут соответствовать текущему фильтру.

Настройка статуса загрузки и кнопки «Загрузить еще»

Infinite Scroll поддерживает индикаторы состояния загрузки:

  • .page-load-status — блок состояния (загрузка, конец страниц, ошибка);
  • status — опция для привязки к DOM элементу.

Пример с кастомным статусом:

<div class="page-load-status">
  <div class="infinite-scroll-request">Загрузка...</div>
  <div class="infinite-scroll-last">Больше нет элементов</div>
  <div class="infinite-scroll-error">Ошибка загрузки</div>
</div>

И подключение через JS:

$grid.infiniteScroll({
  path: '.pagination__next',
  append: '.grid-item',
  outlayer: $grid.data('isotope'),
  status: '.page-load-status',
  history: false
});

Работа с кнопкой «Load More»

Вместо автоматической подгрузки при скролле можно использовать кнопку для загрузки следующей страницы:

var infScroll = $grid.data('infiniteScroll');

$('.load-more-button').on('click', function() {
  infScroll.loadNextPage();
});

Преимущество — контроль за количеством загруженных элементов и удобство UX на мобильных устройствах.

Советы по отладке

  1. Проверять, что itemSelector Isotope совпадает с селектором элементов, подгружаемых Infinite Scroll.
  2. Использовать console.log(items) внутри события append.infiniteScroll для подтверждения, что элементы загружаются корректно.
  3. Если элементы появляются, но Isotope не выстраивает сетку, проверять outlayer и imagesLoaded.

Эта последовательность действий обеспечивает стабильную работу сетки Isotope с динамической подгрузкой элементов и гарантирует корректное отображение даже при сложных фильтрах и больших объемах данных.

Оглавление