Метод addItems

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

Синтаксис метода

$grid.isotope('addItems', $newItems);
  • $grid — jQuery-объект контейнера Isotope.
  • $newItems — jQuery-объект или массив DOM-элементов, которые будут добавлены в сетку.

Метод принимает как одиночный элемент, так и коллекцию элементов. При этом каждый элемент автоматически получает все необходимые классы и стили, которые обеспечивают корректное отображение и анимацию внутри сетки.

Принцип работы

  1. Добавление в DOM Элементы, переданные в addItems, должны быть предварительно созданы в DOM или сгенерированы динамически. Метод добавляет их в контейнер сетки, сохраняя текущий порядок элементов.

  2. Интеграция с Isotope После добавления элементов Isotope обновляет внутренние массивы элементов, чтобы новые элементы учитывались при фильтрации, сортировке и анимации.

  3. Анимация появления Если задан параметр transitionDuration, новые элементы появляются с плавной анимацией, аналогично элементам, добавленным при инициализации сетки.

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

// Инициализация сетки
var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

// Создание новых элементов
var $newItems = $('<div class="grid-item">Новый элемент</div><div class="grid-item">Еще один элемент</div>');

// Добавление элементов в сетку
$grid.isotope('addItems', $newItems);

// Обновление сетки с анимацией
$grid.isotope('appended', $newItems);

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

Отличие addItems от appended

  • addItems — добавляет элементы только в внутренние массивы Isotope, но не запускает перестройку сетки.
  • appended — сочетает функциональность addItems и автоматически пересчитывает позиции элементов с анимацией, делая новые элементы видимыми в сетке.

Использование этих методов вместе позволяет разделять логическое добавление элементов и визуальную отрисовку, что полезно при пакетной загрузке большого количества элементов.

Особенности и рекомендации

  1. Фильтрация Новые элементы будут участвовать во всех фильтрах сразу после вызова appended. Если необходимо временно исключить новые элементы, можно присвоить им класс, который будет исключен фильтром.

  2. Сортировка При добавлении элементов через addItems они не сортируются автоматически. Для сортировки необходимо вызвать метод arrange.

$grid.isotope('arrange', {
  sortBy: 'original-order'
});
  1. Динамическое создание элементов Можно генерировать элементы на лету через Jav * aScript:
var $newItem = $('<div class="grid-item">Динамический элемент</div>');
$grid.isotope('addItems', $newItem);
$grid.isotope('appended', $newItem);
  1. Производительность При добавлении большого количества элементов рекомендуется добавлять их пакетами, чтобы минимизировать количество пересчетов и анимаций.

Типичные сценарии применения

  • Галереи с бесконечной прокруткой — новые элементы подгружаются и добавляются в сетку без перезагрузки страницы.
  • Фильтруемые каталоги — динамическое добавление товаров или карточек с возможностью мгновенной фильтрации и сортировки.
  • Интерактивные интерфейсы — приложения, где элементы создаются пользователем (например, доска задач или редактор карточек).

Метод addItems обеспечивает гибкость управления динамическим контентом в Isotope и является важной частью оптимизации работы с крупными и интерактивными сетками. Использование его вместе с appended и arrange позволяет точно контролировать как внутреннее состояние сетки, так и визуальное представление элементов.

Оглавление