Принципы фильтрации

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

Настройка контейнера и элементов

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

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

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

Инициализация Isotope производится через Jav * aScript:

const grid = document.querySelector('.grid');
const iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});
  • itemSelector указывает, какие элементы будут обрабатываться.
  • layoutMode определяет способ компоновки элементов (fitRows, masonry, vertical, packery и др.).

Применение фильтров

Фильтры задаются с помощью CSS-селекторов. Для отображения только элементов определённой категории используется метод arrange с опцией filter:

iso.arrange({ filter: '.category-a' });
  • Все элементы с классом category-a будут отображены.
  • Остальные элементы плавно исчезнут, сохраняя анимацию.

Можно комбинировать несколько классов через запятую или селектор:

iso.arrange({ filter: '.category-a, .category-c' });

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

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

iso.arrange({
  filter: function(itemElem) {
    const value = itemElem.getAttribute('data-price');
    return parseInt(value) < 100;
  }
});
  • Функция вызывается для каждого элемента.
  • Возвращаемое true означает, что элемент будет отображён.
  • Это позволяет фильтровать элементы по сложным условиям, например по диапазону чисел или текстовым значениям.

Сочетание фильтров и сортировки

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

iso.arrange({
  filter: '.category-b',
  sortBy: 'name',
  sortAscending: true
});
  • sortBy указывает критерий сортировки (name, price, date и др.).
  • sortAscending определяет порядок сортировки.

Фильтры и сортировка могут обновляться динамически при взаимодействии пользователя, например через кнопки:

const buttons = document.querySelectorAll('.filter-button-group button');
buttons.forEach(button => {
  button.addEventListener('click', () => {
    const filterValue = button.getAttribute('data-filter');
    iso.arrange({ filter: filterValue });
  });
});

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

Isotope автоматически анимирует появление и исчезновение элементов. Настройки анимации можно изменять через опции transitionDuration и CSS-свойства:

const iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  transitionDuration: '0.6s'
});
  • transitionDuration задаёт длительность анимации в секундах или миллисекундах.
  • Эффект плавного исчезновения повышает визуальное восприятие фильтрации.

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

Isotope корректно обрабатывает элементы, добавленные после инициализации:

const newItem = document.createElement('div');
newItem.className = 'grid-item category-a';
newItem.textContent = 'Новый элемент';
grid.appendChild(newItem);
iso.appended(newItem);
iso.arrange({ filter: '.category-a' });
  • Метод appended уведомляет Isotope о новом элементе.
  • После этого можно сразу применять фильтры, чтобы интегрировать новый элемент в текущую сетку.

Использование нескольких фильтров одновременно

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

iso.arrange({
  filter: function(itemElem) {
    const category = itemElem.classList.contains('category-a');
    const price = parseInt(itemElem.getAttribute('data-price')) < 200;
    return category && price;
  }
});
  • В этом примере отображаются только элементы категории A с ценой ниже 200.
  • Возможна любая логическая комбинация условий.

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

  • Минимизировать количество элементов в DOM для повышения производительности.
  • Использовать классы вместо вычислений через функции, если фильтрация простая.
  • Настраивать transitionDuration в соответствии с количеством элементов, чтобы анимация оставалась плавной.

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

Оглавление