Инициализация через data-атрибуты

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

Использование data-isotope для автоматической инициализации

Для инициализации Isotope через HTML необходимо добавить атрибут data-isotope к контейнеру элементов. Значение атрибута должно быть объектом в формате JSON, в котором указываются параметры конфигурации.

<div class="grid" data-isotope='{"itemSelector": ".grid-item", "layoutMode": "fitRows"}'>
  <div class="grid-item">Элемент 1</div>
  <div class="grid-item">Элемент 2</div>
  <div class="grid-item">Элемент 3</div>
</div>
  • itemSelector — CSS-селектор дочерних элементов сетки. Без этого параметра Isotope не сможет определить элементы для сортировки и фильтрации.
  • layoutMode — режим раскладки: masonry, fitRows или vertical. От выбора зависит поведение сетки при добавлении новых элементов.

Преимущества data-инициализации

  1. Минимум JavaScript. Не требуется писать отдельный скрипт для каждого контейнера. Isotope автоматически обрабатывает контейнеры с атрибутом data-isotope.
  2. Гибкая настройка через HTML. Можно изменять параметры сетки, просто редактируя JSON в атрибуте.
  3. Удобство интеграции с CMS. В системах управления контентом добавление data-атрибутов проще, чем подключение JS-кода.

Настройка фильтров и сортировки

Для управления фильтрацией и сортировкой можно добавить data-атрибуты к кнопкам управления. Атрибуты data-filter и data-sort-by позволяют Isotope автоматически отслеживать события клика и применять соответствующие операции.

<div class="filters">
  <button data-filter="*">Все</button>
  <button data-filter=".category-a">Категория A</button>
  <button data-filter=".category-b">Категория B</button>
</div>

<div class="sorts">
  <button data-sort-by="original-order">По умолчанию</button>
  <button data-sort-by="name">По имени</button>
  <button data-sort-by="date">По дате</button>
</div>
  • data-filter принимает CSS-селектор для фильтрации элементов.
  • data-sort-by соответствует ключу сортировки, заданному в параметрах элементов (data-name, data-date и т.д.).

Эти кнопки автоматически подключаются к контейнеру с data-isotope, если подключена стандартная библиотека Isotope с плагином imagesLoaded и IsotopeButtonGroup.

Переопределение параметров через JavaScript

Хотя основная инициализация происходит через HTML, иногда требуется динамическое изменение параметров. Для этого достаточно получить экземпляр Isotope из DOM-элемента:

var grid = document.querySelector('.grid');
var iso = Isotope.data(grid); // Получение экземпляра, инициализированного через data-атрибут
iso.arrange({ layoutMode: 'masonry' }); // Переключение режима раскладки

Использование метода Isotope.data(element) позволяет работать с объектом без повторной инициализации, сохраняя все настройки из data-атрибута.

Совместимость с динамическим контентом

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

var newItems = document.createElement('div');
newItems.className = 'grid-item';
newItems.textContent = 'Новый элемент';
grid.appendChild(newItems);
iso.appended(newItems);

Это гарантирует корректную интеграцию с существующими настройками, заданными через data-isotope.

Настройка дополнительных опций через JSON

Атрибут data-isotope поддерживает любые стандартные опции Isotope. Примеры расширенных параметров:

<div class="grid" data-isotope='{
  "itemSelector": ".grid-item",
  "layoutMode": "masonry",
  "transitionDuration": "0.6s",
  "stagger": 30
}'>
  ...
</div>
  • transitionDuration — продолжительность анимации при перестановке элементов.
  • stagger — задержка между анимациями последовательных элементов, создающая эффект волны.

Использование JSON позволяет задавать полную конфигурацию сетки прямо в HTML без необходимости писать отдельный скрипт.

Советы по поддержке больших сеток

  • Разделять конфигурацию по блокам, если на странице несколько независимых сеток.
  • Использовать imagesLoaded для сеток с изображениями, чтобы корректно рассчитывалась высота элементов.
  • Для сложных фильтров и сортировки можно комбинировать data-атрибуты с кастомными методами JavaScript, сохраняя автоматическую инициализацию через HTML.

Инициализация через data-атрибуты обеспечивает чистую и структурированную интеграцию Isotope, позволяя минимизировать ручной JavaScript и создавать мощные динамические сетки с гибкой фильтрацией и сортировкой.

Оглавление