Метод appended

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

Синтаксис

$grid.isotope('appended', $newItems);

Параметры:

  • $grid — контейнер Isotope, обычно выбранный через jQuery или стандартный селектор.
  • $newItems — объект jQuery или массив DOM-элементов, которые необходимо добавить в сетку. Эти элементы должны соответствовать базовому HTML-шаблону элементов сетки, чтобы Isotope корректно вычислил их размеры и позицию.

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

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

  2. Сохранение фильтров и сортировки Если сетка применяет фильтры через filter или сортировку через sortBy, добавленные элементы будут сразу участвовать в этих правилах. Например, элементы, не подходящие под текущий фильтр, будут скрыты до изменения фильтра.

  3. Анимация добавления appended поддерживает плавное появление элементов с помощью CSS-трансформаций и переходов. Это позволяет создавать визуально приятные эффекты расширения сетки, без необходимости вручную управлять классами анимации.

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

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

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

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

В этом примере:

  • Сначала новые элементы добавляются в DOM через метод append.
  • Затем appended уведомляет Isotope о появлении новых элементов, чтобы они корректно разместились в сетке.

Отличие от insert

Метод insert позволяет добавлять элементы в произвольное место DOM с последующей интеграцией в сетку, тогда как appended ориентирован именно на добавление элементов в конец контейнера. Это делает appended более производительным и удобным для сценариев, когда новые элементы поступают динамически, например, при подгрузке контента с сервера.

Советы по использованию

  • Предварительная подготовка элементов: Перед вызовом appended рекомендуется присвоить новым элементам все необходимые классы и стили, иначе Isotope не сможет корректно вычислить их размеры.
  • Использование с анимацией: Чтобы получить плавное появление, важно определить CSS-переходы для позиции (transform) и прозрачности (opacity) для .grid-item.
  • Обновление размеров изображений: Если новые элементы содержат изображения, нужно убедиться, что они загружены до вызова appended, иначе могут возникнуть ошибки с позиционированием. Для этого используют события load изображений или библиотеку imagesLoaded.

Совместное использование с фильтрацией

Добавление элементов через appended полностью интегрируется с фильтром Isotope:

$grid.isotope({ filter: '.category-a' });

// Добавление новых элементов
var $newItems = $('<div class="grid-item category-a">Элемент A</div><div class="grid-item category-b">Элемент B</div>');
$grid.append($newItems)
     .isotope('appended', $newItems);

// Элемент с category-a будет видим, с category-b — скрыт

Поддержка разных режимов компоновки

Метод appended работает со всеми режимами компоновки Isotope, включая:

  • masonry — сетка с «кирпичной» структурой;
  • fitRows — выравнивание по строкам;
  • vertical — вертикальное расположение элементов.

В каждом случае новые элементы автоматически подстраиваются под выбранный алгоритм.

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

Оглавление