Параметры фильтрации

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

Использование фильтров

Фильтрация элементов осуществляется методом .arrange(), в котором можно передавать объект с параметром filter. Значение filter может быть:

  • CSS-селектором Простейший способ фильтрации — указать селектор элемента, который должен быть видимым.

    $grid.isotope({ filter: '.active' });

    В этом примере будут отображены только элементы с классом active.

  • Функцией фильтрации Позволяет использовать более сложные условия. Функция получает каждый элемент и должна возвращать true, если элемент должен быть видим, и false, если скрыт.

    $grid.isotope({
  filter: function() {
    var number = $(this).find('.number').text();
    return parseInt(number, 10) > 50;
  }
});

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

Комбинация селекторов

Isotope поддерживает комбинированные фильтры с использованием CSS-псевдоклассов и операторов. Например:

  • Несколько классов через запятую (логическое «ИЛИ»):

    $grid.isotope({ filter: '.red, .blue' });

    Показаны элементы с классом red или blue.

  • Несколько условий через точку (логическое «И»):

    $grid.isotope({ filter: '.red.large' });

    Показаны элементы, которые одновременно имеют классы red и large.

Динамическая фильтрация

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

$('.filter-button-group').on('click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});

Здесь data-filter хранит CSS-селектор, который передается в Isotope при нажатии на кнопку. Такой подход позволяет создать динамическую панель фильтров с множеством условий.

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

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

  • transitionDuration — длительность анимации:

    $grid.isotope({
  transitionDuration: '0.8s',
  filter: '.featured'
});

  • hiddenStyle и visibleStyle — кастомизация внешнего вида скрытых и видимых элементов. Например, можно сделать, чтобы скрытые элементы уменьшались и постепенно исчезали:

    $grid.isotope({
  hiddenStyle: { opacity: 0, transform: 'scale(0.5)' },
  visibleStyle: { opacity: 1, transform: 'scale(1)' }
});

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

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

$grid.isotope({ filter: '[data-category="design"]' });

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

$grid.isotope({
  filter: function() {
    var category = $(this).attr('data-category');
    var price = parseInt($(this).attr('data-price'), 10);
    return category === 'design' && price < 100;
  }
});

Состояние фильтров

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

var filters = {};

$('.filter-button-group').on('click', 'button', function() {
  var $buttonGroup = $(this).parents('.filter-button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  filters[filterGroup] = $(this).attr('data-filter');
  var filterValue = concatFilters(filters);
  $grid.isotope({ filter: filterValue });
});

function concatFilters(filters) {
  var allFilters = '';
  for (var prop in filters) {
    if (filters[prop] !== '*') {
      allFilters += filters[prop];
    }
  }
  return allFilters || '*';
}

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

Кэширование и оптимизация

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

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

Оглавление