Функции-фильтры

Функции-фильтры в библиотеке Isotope предоставляют возможность динамически изменять отображаемые элементы сетки на основе сложных условий, выходящих за рамки простых CSS-селекторов. В отличие от фильтров вида .class-name или [data-type="value"], функции-фильтры позволяют использовать программную логику для контроля видимости элементов.

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

Пример базового синтаксиса:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  filter: function(itemElem) {
    var number = itemElem.querySelector('.number').textContent;
    return parseInt(number, 10) > 50;
  }
});

В этом примере функция проверяет текстовое содержимое элемента и отображает только те элементы, у которых значение больше 50.

Доступ к данным элементов

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

  • Атрибуты HTML, например data-*:
filter: function(itemElem) {
  var category = itemElem.getAttribute('data-category');
  return category === 'design';
}
  • Текстовое содержимое:
filter: function(itemElem) {
  return itemElem.textContent.includes('JavaScript');
}
  • Классы элемента:
filter: function(itemElem) {
  return itemElem.classList.contains('featured');
}

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

Композиция фильтров

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

var filters = {
  numberGreaterThan50: function(itemElem) {
    var number = parseInt(itemElem.querySelector('.number').textContent, 10);
    return number > 50;
  },
  categoryDesign: function(itemElem) {
    return itemElem.getAttribute('data-category') === 'design';
  }
};

// Применение фильтра по ключу
iso.arrange({ filter: filters.numberGreaterThan50 });

Для комбинирования нескольких фильтров используется логическое И или ИЛИ:

iso.arrange({
  filter: function(itemElem) {
    return filters.numberGreaterThan50(itemElem) && filters.categoryDesign(itemElem);
  }
});

Работа с динамическими данными

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

var searchField = document.querySelector('#search-input');

searchField.addEventListener('input', function() {
  var query = searchField.value.toLowerCase();

  iso.arrange({
    filter: function(itemElem) {
      return itemElem.textContent.toLowerCase().includes(query);
    }
  });
});

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

Производительность и оптимизация

Использование функций-фильтров может замедлять работу при больших наборах элементов, так как каждый элемент проверяется отдельно. Рекомендации по оптимизации:

  1. Минимизировать DOM-операции внутри фильтра. Например, кешировать значения или использовать dataset.
  2. Использовать булевы классы или атрибуты вместо сложного вычисления при каждой проверке.
  3. Комбинировать селекторы и функции. Например, сначала применять CSS-селектор, а потом функцию для более узкой фильтрации:
iso.arrange({
  filter: '.active', // сначала простой селектор
  filter: function(itemElem) {
    return parseInt(itemElem.dataset.number, 10) > 50;
  }
});
  1. Избегать тяжелых вычислений и сторонних библиотек внутри фильтра, если нужно мгновенное обновление интерфейса.

Фильтры с анимацией и взаимодействием

Isotope автоматически управляет анимацией при показе и скрытии элементов. Функции-фильтры работают совместно с методами arrange и layout, что позволяет создавать плавные переходы:

iso.arrange({
  filter: function(itemElem) {
    return itemElem.classList.contains('highlighted');
  }
});

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

Заключение по функционалу

Функции-фильтры Isotope дают максимальный контроль над видимостью элементов, позволяя:

  • фильтровать по числовым, текстовым и логическим условиям,
  • комбинировать фильтры с CSS-селекторами,
  • строить интерактивные каталоги и поисковые панели,
  • оптимизировать производительность для больших наборов данных.

Эта гибкость делает Isotope мощным инструментом для создания адаптивных и интерактивных сеток с динамическим содержимым.

Оглавление