Что такое Isotope

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

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

Чтобы использовать Isotope, необходимо создать контейнер, внутри которого располагаются элементы, инициализируемые библиотекой. Основной синтаксис инициализации:

const grid = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-sizer'
  }
});

Ключевые параметры:

  • itemSelector — CSS-селектор элементов, которые будут управляться Isotope.
  • layoutMode — режим компоновки (masonry, fitRows, vertical, packery).
  • percentPosition — позволяет использовать процентные значения ширины для корректного позиционирования.
  • masonry.columnWidth — определяет ширину колонок для режима masonry; может быть фиксированным элементом-сизером.

Режимы компоновки

Isotope поддерживает несколько режимов компоновки элементов:

  1. Masonry — «кирпичная» сетка, элементы располагаются плотными колонками с учетом высоты каждого элемента.
  2. FitRows — сетка с равными строками; элементы выравниваются по рядам, оставляя минимальные промежутки.
  3. Vertical — классическое вертикальное расположение элементов без сдвига колонок.
  4. Packery — похож на masonry, но с более гибким позиционированием; элементы могут занимать произвольное пространство, создавая плотную упаковку.

Фильтрация элементов

Isotope позволяет динамически скрывать и отображать элементы на основе CSS-селекторов или пользовательских функций.

// Фильтрация по классу
grid.arrange({ filter: '.category-web' });

// Фильтрация с функцией
grid.arrange({
  filter: function(itemElem) {
    return itemElem.dataset.rating > 4;
  }
});
  • filter принимает строку селектора или функцию, возвращающую true для элементов, которые должны отображаться.
  • При фильтрации Isotope автоматически анимирует перемещение и скрытие элементов, создавая плавный визуальный эффект.

Сортировка элементов

Isotope поддерживает сортировку по атрибутам или пользовательским критериям:

grid.arrange({
  sortBy: 'name',
  sortAscending: true
});
  • sortBy может быть именем ключа, указанного в data-* атрибуте элемента, или функцией, возвращающей значение для сравнения.
  • sortAscending — направление сортировки; true — по возрастанию, false — по убыванию.

Пример сортировки по кастомной функции:

grid.arrange({
  sortBy: function(itemElem) {
    return parseInt(itemElem.dataset.price, 10);
  },
  sortAscending: false
});

Динамическое обновление контента

Isotope поддерживает добавление и удаление элементов после инициализации:

// Добавление новых элементов
const newItems = document.querySelectorAll('.new-item');
grid.appended(newItems);

// Удаление элементов
const removeItems = document.querySelectorAll('.grid-item.remove');
grid.remove(removeItems);
  • Методы appended и remove автоматически пересчитывают расположение сетки.
  • Для полной переработки макета можно использовать метод layout(), который пересчитывает позиции всех элементов.

Анимации и переходы

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

.grid-item {
  transition: transform 0.6s ease, opacity 0.6s ease;
}
  • Параметры transition-duration, transition-timing-function позволяют полностью настроить визуальные эффекты.
  • Isotope добавляет и удаляет классы isotope-hidden для скрытых элементов, обеспечивая корректное отображение с анимацией.

События и обратные вызовы

Isotope предоставляет несколько событий, которые можно использовать для расширенной логики:

  • arrangeComplete — вызывается после завершения фильтрации или сортировки.
  • layoutComplete — вызывается после завершения перерасчета сетки.
  • removeComplete — вызывается после удаления элементов.

Пример подписки на событие:

grid.on('arrangeComplete', function(filteredItems) {
  console.log('Фильтрация завершена', filteredItems);
});

Интеграция с динамическим контентом

Isotope хорошо сочетается с динамическими фреймворками, такими как React, Vue или Vanilla JS, благодаря методам добавления и перераспределения элементов. При работе с асинхронными данными рекомендуется инициализировать Isotope после полной загрузки элементов и вызывать layout() после добавления новых данных.

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

Оглавление