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

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

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

// Инициализация Isotope
var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

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

// Фильтрация по атрибуту
iso.arrange({ filter: '[data-category="nature"]' });

Ключевые моменты:

  • itemSelector определяет элементы, с которыми работает Isotope.
  • filter может принимать строку (CSS-селектор) или функцию для более сложной логики.
  • Любой селектор, поддерживаемый jQuery-подобным синтаксисом, совместим с Isotope.

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

Для фильтрации по нескольким критериям используется синтаксис CSS-селекторов через запятую, что позволяет комбинировать условия.

// Отображаются элементы с классом 'metal' или 'transition'
iso.arrange({ filter: '.metal, .transition' });

Для последовательной фильтрации можно использовать логическое “и”, комбинируя селекторы без запятой:

// Элемент должен одновременно иметь классы 'metal' и 'round'
iso.arrange({ filter: '.metal.round' });

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

Isotope поддерживает фильтрацию на основе атрибутов, что удобно при работе с динамически загружаемыми данными. Например, фильтрация по значению data-category:

// Фильтруем элементы с data-category равным 'architecture'
iso.arrange({ filter: '[data-category="architecture"]' });

Можно использовать регулярные выражения через функцию для более гибких условий:

iso.arrange({ 
  filter: function(itemElem) {
    var category = itemElem.getAttribute('data-category');
    return /^a/.test(category); // Только категории, начинающиеся на "a"
  }
});

Фильтрация через кнопки и интерактивные элементы

Часто фильтрация осуществляется через кнопки. Для этого назначают каждой кнопке атрибут data-filter с соответствующим селектором:

<button data-filter="*">Все</button>
<button data-filter=".metal">Металл</button>
<button data-filter=".transition">Переходные</button>

И подключают обработчик событий:

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

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

  • Символ * обозначает «показать все элементы».
  • Фильтрация выполняется плавно, без перезагрузки страницы.
  • Можно использовать комбинацию кнопок и классов для сложных фильтров.

Сложные селекторы и каскадная фильтрация

Isotope позволяет использовать любые валидные CSS-селекторы, включая:

  • Комбинации классов и идентификаторов: #id .class
  • Псевдоклассы: .item:nth-child(odd)
  • Атрибуты: [data-category^="a"] (начинается с “a”), [data-category$="z"] (заканчивается на “z”)

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

// Только элементы с классом 'metal', у которых data-category начинается на 'a'
iso.arrange({ filter: '.metal[data-category^="a"]' });

Такой подход позволяет создавать сложные динамические фильтры без необходимости писать дополнительный JavaScript.

Фильтрация с анимацией и обновлением интерфейса

Isotope автоматически анимирует скрытие и показ элементов при фильтрации, что повышает визуальную привлекательность интерфейса. Параметры анимации настраиваются через transitionDuration:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  transitionDuration: '0.6s'
});

iso.arrange({ filter: '.metal' });

Можно комбинировать фильтрацию с сортировкой и изменением макета для создания интерактивных и динамичных галерей.

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

Оглавление