Метод reloadItems

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

Синтаксис

$grid.isotope('reloadItems');

где $grid — это объект jQuery или NodeList контейнера, инициализированного с помощью Isotope:

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

Основные особенности

  1. Пересчёт элементов После вызова reloadItems Isotope пересчитывает все элементы внутри контейнера, опираясь на текущий itemSelector. Этот процесс включает в себя:

    • Определение размеров новых элементов.
    • Определение позиции каждого элемента для выбранного layoutMode.
    • Обновление внутреннего массива элементов this.items.

  2. Не меняет текущий фильтр и сортировку Метод лишь обновляет внутренний список элементов. Для применения фильтров или сортировки после reloadItems необходимо вызвать методы arrange или updateSortData.

  3. Работа с динамически добавленными элементами Применяется в сценариях, когда элементы добавляются через JavaScript или AJAX. Стандартная последовательность действий выглядит следующим образом:

var $newItems = $(newHtmlString);
$grid.append($newItems);
$grid.isotope('reloadItems');
$grid.isotope({ sortBy: 'original-order' });
$grid.isotope('layout');

Здесь:

  • append добавляет элементы в DOM.
  • reloadItems обновляет внутренний список элементов Isotope.
  • layout перераспределяет сетку с учётом новых элементов.

Взаимодействие с другими методами

  • layout — после reloadItems рекомендуется вызвать layout, чтобы Isotope пересчитал позиции всех элементов.
  • arrange — если требуется применить фильтр или сортировку после обновления элементов:
$grid.isotope('reloadItems').isotope({ filter: '.active' });
  • addItems и insert — альтернативные методы добавления элементов. Они также обновляют внутренние массивы, но reloadItems полезен, когда элементы были добавлены напрямую через DOM без использования встроенных методов Isotope.

Примеры использования

Пример 1: Динамическая загрузка контента через AJAX

$.get('/api/get-items', function(data) {
  var $items = $(data);
  $grid.append($items);
  $grid.isotope('reloadItems');
  $grid.isotope('layout');
});

Пример 2: Изменение содержимого существующих элементов

$('.grid-item').each(function() {
  $(this).text('Обновлённый контент');
});
$grid.isotope('reloadItems').isotope('layout');

Пример 3: Комбинация с фильтрацией

$('#filter-active').on('click', function() {
  $grid.isotope('reloadItems');
  $grid.isotope({ filter: '.active' });
});

Важные нюансы

  1. Производительность Частое использование reloadItems может влиять на производительность при большом количестве элементов, так как каждый вызов пересчитывает все позиции и размеры элементов.

  2. Совместимость с layoutMode Метод одинаково работает с любым layoutMode, включая masonry, fitRows, vertical. Однако для некоторых кастомных режимов стоит проверить корректность перерасчёта размеров после изменений.

  3. Необходимость ручного вызова layout reloadItems не инициирует автоматическое перераспределение. Для корректного отображения элементов после изменения DOM требуется вызов layout.

Резюме функциональности

  • Обновление внутреннего массива элементов без перезапуска Isotope.
  • Пересчёт размеров и позиций элементов для корректного отображения.
  • Поддержка динамического добавления и изменения элементов.
  • Совместимость с фильтрацией, сортировкой и различными layoutMode.

Метод reloadItems является важным инструментом для создания динамических интерфейсов с Isotope, обеспечивая точное управление структурой и отображением элементов сетки.

Оглавление