Фильтрация по классам

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

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

Инициализация Isotope для фильтрации

Для начала необходимо подключить библиотеку и создать контейнер с элементами:

<div id="grid">
  <div class="item category-a">Элемент A1</div>
  <div class="item category-b">Элемент B1</div>
  <div class="item category-a category-b">Элемент AB</div>
  <div class="item category-c">Элемент C1</div>
</div>

Инициализация производится с помощью Jav * aScript:

var iso = new Isotope('#grid', {
  itemSelector: '.item',
  layoutMode: 'fitRows'
});

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

  • itemSelector — CSS-селектор элементов внутри контейнера, которые будут управляться Isotope.
  • layoutMode — режим раскладки: 'fitRows', 'masonry', 'vertical' и другие. Режим определяет, как элементы будут располагаться после фильтрации.

Применение фильтров по классам

Фильтр задается с помощью метода arrange и опции filter:

// Показываем только элементы с классом 'category-a'
iso.arrange({ filter: '.category-a' });

// Показываем элементы с классом 'category-b'
iso.arrange({ filter: '.category-b' });

Фильтры поддерживают комбинации селекторов:

// Показываем элементы с классом category-a и category-b одновременно
iso.arrange({ filter: '.category-a.category-b' });

// Показываем элементы либо category-a, либо category-c
iso.arrange({ filter: '.category-a, .category-c' });

Динамическое переключение фильтров

Фильтрация часто используется совместно с кнопками или выпадающими меню. Пример с кнопками:

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

JavaScript для обработки кликов:

var filtersElem = document.querySelector('.filters');
filtersElem.addEventListener('click', function(event) {
  if (!event.target.matches('button')) return;
  var filterValue = event.target.getAttribute('data-filter');
  iso.arrange({ filter: filterValue });
});

Особенности работы:

  • Значение "*" отображает все элементы без фильтрации.
  • Атрибут data-filter удобно использовать для хранения селектора фильтра.
  • При повторном клике на ту же кнопку фильтр повторно применяется без ошибок.

Анимация при фильтрации

Isotope автоматически анимирует скрытие и показ элементов при смене фильтра. Настройки анимации можно задать при инициализации:

var iso = new Isotope('#grid', {
  itemSelector: '.item',
  layoutMode: 'fitRows',
  transitionDuration: '0.5s'
});
  • transitionDuration задаёт продолжительность анимации.
  • Поддерживаются CSS-переходы для плавного исчезновения и появления элементов.

Фильтрация с несколькими условиями

Можно создавать более сложные фильтры, объединяя селекторы CSS:

// Элементы, принадлежащие category-a и одновременно category-c
iso.arrange({ filter: '.category-a.category-c' });

// Элементы, принадлежащие category-a или category-b, но не category-c
iso.arrange({ filter: '.category-a, .category-b:not(.category-c)' });

Использование псевдоклассов CSS (:not, :nth-child) позволяет гибко управлять видимостью элементов без изменения HTML-классов.

Фильтрация с динамическим добавлением классов

Часто элементы добавляются в сетку динамически через JavaScript или AJAX. Чтобы фильтрация оставалась корректной:

var newItem = document.createElement('div');
newItem.className = 'item category-a';
newItem.textContent = 'Новый элемент';
document.getElementById('grid').appendChild(newItem);

// Обновляем Isotope, чтобы новый элемент учитывался в фильтрах
iso.appended(newItem);

Метод appended уведомляет Isotope о добавлении новых элементов и обеспечивает корректную работу текущего фильтра.

Советы по производительности

  1. Минимизация количества классов — чем меньше уникальных классов у элементов, тем быстрее работает фильтрация.
  2. Использование CSS-селекторов вместо JS-фильтров — Isotope быстрее работает с простыми селекторами.
  3. Группировка элементов — элементы с одинаковыми классами лучше группировать по контейнерам для ускорения рендеринга.

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

Оглавление