Состояния фильтрации

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

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

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

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

Здесь itemSelector указывает элементы, которые будут участвовать в фильтрации, а layoutMode задаёт способ расположения элементов. Значение masonry обеспечивает плотное заполнение сетки без пустых промежутков.

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

Фильтр задаётся в виде CSS-селектора или функции. Простейший пример фильтрации по классу:

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

В этом случае будут показаны только элементы с классом category-a. Для сброса фильтра используется фильтр '*', который отображает все элементы:

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

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

Isotope поддерживает комбинированные фильтры, что позволяет создавать сложные логические условия. Для этого применяются CSS-селекторы через запятую (OR) или конкатенацию классов (AND):

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

// AND: элементы с классом category-a и featured
iso.arrange({ filter: '.category-a.featured' });

Также возможно использование функций фильтрации для более гибкой логики:

iso.arrange({
  filter: function(itemElem) {
    var number = itemElem.querySelector('.number').textContent;
    return parseInt(number) > 10;
  }
});

В этом примере фильтруются элементы, у которых значение внутри элемента с классом number больше 10.

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

Фильтры можно менять динамически на основе пользовательских действий. Например, фильтрация по кнопкам:

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 });
});

Каждая кнопка содержит атрибут data-filter, соответствующий селектору, например .category-a. При нажатии Isotope перестраивает сетку с учётом нового фильтра.

Состояния фильтрации

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

var buttonGroups = document.querySelectorAll('.button-group');
buttonGroups.forEach(function(group) {
  group.addEventListener('click', function(event) {
    if (!event.target.matches('button')) return;
    group.querySelectorAll('.is-checked').forEach(function(btn) {
      btn.classList.remove('is-checked');
    });
    event.target.classList.add('is-checked');
  });
});

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

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

Isotope поддерживает плавные анимации при смене фильтров. Для этого достаточно задать параметры transitionDuration и hiddenStyle/visibleStyle:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  transitionDuration: '0.6s',
  hiddenStyle: { opacity: 0, transform: 'scale(0.8)' },
  visibleStyle: { opacity: 1, transform: 'scale(1)' }
});

Элементы плавно исчезают и появляются, сохраняя динамическую структуру сетки.

Фильтрация с учётом тегов и категорий

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

var filters = {
  category: '*',
  tag: '*'
};

function applyFilters() {
  var filterValue = filters.category + filters.tag;
  iso.arrange({ filter: filterValue });
}

// Изменение категории
filters.category = '.category-b';
applyFilters();

// Изменение тега
filters.tag = '.featured';
applyFilters();

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

Поддержка динамически добавляемых элементов

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

var newItems = document.querySelectorAll('.grid-item-new');
iso.appended(newItems);
iso.arrange({ filter: '*' });

Это обеспечивает включение новых элементов в существующую сетку с сохранением фильтров и анимации.

Заключение по фильтрации

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

Оглавление