Множественные фильтры

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

Для работы с множественными фильтрами важно понимать, как Isotope обрабатывает селекторы. Каждый фильтр передается как CSS-селектор, а при комбинировании нескольких фильтров используется логика «И» или «ИЛИ» в зависимости от реализации.

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

Инициализация Isotope с фильтрацией осуществляется через объект конфигурации:

const iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  getSortData: {
    category: '[data-category]',
    size: '[data-size]'
  }
});

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

  • itemSelector – CSS-селектор элементов сетки.
  • layoutMode – режим расположения элементов (fitRows, masonry и т.д.).
  • getSortData – позволяет задать сортировку по произвольным атрибутам.

Создание интерфейса для множественных фильтров

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

Пример структуры HTML:

<div class="filters">
  <div class="filter-group" data-filter-group="category">
    <button data-filter=".fruit">Фрукты</button>
    <button data-filter=".vegetable">Овощи</button>
  </div>
  <div class="filter-group" data-filter-group="color">
    <button data-filter=".red">Красный</button>
    <button data-filter=".green">Зеленый</button>
  </div>
</div>

<div class="grid">
  <div class="grid-item fruit red"></div>
  <div class="grid-item vegetable green"></div>
  <div class="grid-item fruit green"></div>
</div>

Каждая кнопка содержит атрибут data-filter, который указывает на класс элемента, по которому производится фильтрация. Атрибут data-filter-group помогает организовать группы фильтров.

Комбинирование фильтров через JavaScript

Для объединения фильтров в один селектор можно использовать объект для хранения активных фильтров:

let filters = {};

const filterGroups = document.querySelectorAll('.filter-group');

filterGroups.forEach(group => {
  group.addEventListener('click', event => {
    if (!event.target.matches('button')) return;

    const filterGroup = group.getAttribute('data-filter-group');
    filters[filterGroup] = event.target.getAttribute('data-filter');

    const filterValue = Object.values(filters).join('');
    iso.arrange({ filter: filterValue });
  });
});

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

  • Создается объект filters, в котором ключи соответствуют группам фильтров.
  • При клике по кнопке обновляется соответствующий фильтр.
  • Метод iso.arrange({ filter: filterValue }) обновляет отображение элементов, комбинируя все активные фильтры.

Использование множественных фильтров с чекбоксами

Если необходимо поддерживать несколько выборов внутри одной группы, структура кода немного усложняется:

let filters = {};

document.querySelectorAll('.filter-group').forEach(group => {
  const groupName = group.getAttribute('data-filter-group');
  filters[groupName] = [];

  group.addEventListener('change', event => {
    const checkboxes = group.querySelectorAll('input[type="checkbox"]');
    filters[groupName] = Array.from(checkboxes)
                              .filter(cb => cb.checked)
                              .map(cb => cb.getAttribute('data-filter'));

    const filterValue = Object.values(filters)
                              .map(arr => arr.join(','))
                              .join('');
    iso.arrange({ filter: filterValue });
  });
});

Особенности:

  • В каждой группе фильтров создается массив активных значений.
  • Для одной группы выбираются все отмеченные чекбоксы и объединяются через запятую (логика «ИЛИ» внутри группы).
  • Все группы объединяются без запятых (логика «И» между группами).

Фильтрация по атрибутам

Isotope поддерживает фильтрацию не только по классам, но и по атрибутам. Пример фильтрации по цвету, заданному в data-color:

iso.arrange({
  filter: '[data-color="red"]'
});

Для множественных атрибутов можно комбинировать селекторы:

iso.arrange({
  filter: '[data-category="fruit"][data-color="green"]'
});

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

Фильтры можно формировать динамически на основе данных, получаемых с сервера или из массива объектов. Основной подход – генерировать HTML кнопок или чекбоксов и обновлять объект filters, чтобы Isotope корректно применял новые условия фильтрации.

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

Isotope поддерживает анимацию элементов при изменении фильтрации. Можно настраивать длительность, тип easing и другие параметры через объект transitionDuration:

iso.arrange({
  filter: '.fruit',
  transitionDuration: '0.6s'
});

Для плавного скрытия элементов можно использовать CSS:

.grid-item {
  transition: transform 0.6s, opacity 0.6s;
}

Сложные комбинации

Для реализации сложных условий, таких как «элементы, которые принадлежат к категории фрукты и красные, либо овощи и зеленые», необходимо формировать селектор вручную:

const complexFilter = '.fruit.red, .vegetable.green';
iso.arrange({ filter: complexFilter });

Это позволяет задавать гибкую логику фильтрации с комбинацией «И» и «ИЛИ» между классами и группами.

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

Оглавление