Пагинация и подгрузка контента

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

Инициализация сетки

Для начала необходимо создать контейнер и элементы, которые будут управляться Isotope:

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  getSortData: {
    name: '.name',
    date: '[data-date]'
  }
});

Пояснение ключевых параметров:

  • itemSelector — CSS-класс элементов, которыми управляет Isotope.
  • layoutMode — режим компоновки, чаще всего используется masonry для сеток разной высоты.
  • getSortData — объект, который задаёт свойства для сортировки элементов.

Динамическая подгрузка контента

Когда нужно подгружать новые элементы, например, при скролле или по кнопке «Загрузить ещё», важно правильно добавить их в сетку:

$.ajax({
  url: '/load-more-items',
  method: 'GET',
  success: function(data) {
    var $newItems = $(data);
    $grid.append($newItems)
         .isotope('appended', $newItems);
  }
});

Разбор работы:

  1. С помощью AJAX подгружается HTML с новыми элементами.
  2. Новый контент оборачивается в jQuery-объект.
  3. Метод append добавляет элементы в DOM.
  4. Метод isotope('appended', $newItems) уведомляет Isotope о новых элементах, чтобы пересчитать их расположение.

Фильтрация и пагинация

Сложность возникает, когда одновременно используется фильтрация и постраничная подгрузка. В этом случае важно сохранять текущее состояние фильтров:

var filterValue = '*';

$('.filter-button-group').on('click', 'button', function() {
  filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});

$('.load-more').on('click', function() {
  $.ajax({
    url: '/load-more-items',
    method: 'GET',
    success: function(data) {
      var $newItems = $(data).filter(filterValue);
      $grid.append($newItems)
           .isotope('appended', $newItems);
    }
  });
});

Особенности подхода:

  • Перед подгрузкой контента можно сразу отфильтровать элементы, чтобы не нарушать визуальный порядок.
  • Метод filter Isotope применяет анимацию при появлении и исчезновении элементов.
  • Важно сохранять переменную filterValue, чтобы новые элементы автоматически подчинялись текущему фильтру.

Сортировка после подгрузки

Если сетка использует сортировку, новые элементы нужно сразу интегрировать в правильный порядок:

$newItems.imagesLoaded(function() {
  $grid.isotope('appended', $newItems)
       .isotope({ sortBy: 'date' });
});

Использование imagesLoaded необходимо для правильного вычисления размеров изображений и предотвращения смещений элементов сетки.

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

При больших объёмах данных:

  • Подгружать элементы порциями, чтобы DOM не перегружался.
  • Использовать lazy loading для изображений.
  • Применять transitionDuration: 0.4s для плавных, но недолгих анимаций.
  • Сохранять состояние фильтров и сортировки в переменных, чтобы не пересчитывать их заново при каждом обновлении сетки.

Подгрузка контента с бесконечным скроллом

Для реализации бесконечного скролла удобно использовать событие scroll:

$(window).on('scroll', function() {
  if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
    loadMoreItems();
  }
});

function loadMoreItems() {
  if (loading) return;
  loading = true;
  $.ajax({
    url: '/load-more-items',
    method: 'GET',
    success: function(data) {
      var $newItems = $(data).filter(filterValue);
      $grid.append($newItems)
           .isotope('appended', $newItems);
      loading = false;
    }
  });
}

Ключевые моменты:

  • Переменная loading предотвращает множественные параллельные запросы.
  • Подгрузка активируется за 100 пикселей до конца страницы, чтобы элементы успели подгрузиться до появления у пользователя.
  • Применение фильтра к новым элементам обеспечивает визуальное соответствие текущему состоянию сетки.

Работа с удалением элементов

При пагинации иногда требуется удалять устаревшие элементы:

var $itemsToRemove = $grid.find('.grid-item.old');
$grid.isotope('remove', $itemsToRemove)
     .isotope('layout');

Удаление и последующий вызов layout пересчитывают сетку без визуальных сбоев.

Интеграция с шаблонизаторами

При использовании шаблонизаторов (Handlebars, Mustache) можно генерировать новые элементы динамически:

var source   = $("#item-template").html();
var template = Handlebars.compile(source);
var html = template({ items: newItemsData });
var $newItems = $(html);
$grid.append($newItems)
     .isotope('appended', $newItems);

Такой подход упрощает генерацию сложного HTML и интеграцию с Isotope, позволяя сохранять фильтры, сортировку и анимацию.

Хотите, я могу подготовить отдельный блок с типовыми паттернами для пагинации и подгрузки контента, которые можно сразу вставлять в проекты с Isotope? Это будет как готовая библиотека практических решений.

Оглавление