Комбинированные фильтры

Masonry — это мощная библиотека для создания сеток с динамическим расположением элементов, где объекты автоматически выстраиваются в оптимальном порядке. Одной из ключевых возможностей является фильтрация элементов, позволяющая показывать пользователю только те блоки, которые соответствуют определённым критериям. Комбинированные фильтры расширяют этот функционал, предоставляя возможность использовать несколько условий одновременно.

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

Фильтры в Masonry работают через метод filter, который принимает функцию или CSS-селектор:

$grid.masonry({
  itemSelector: '.grid-item',
  columnWidth: 200
});

// фильтрация по классу
$grid.masonry('filter', '.category-1');
  • Фильтрация по CSS-селектору: позволяет показать только элементы с указанным классом.
  • Фильтрация через функцию: даёт полный контроль над логикой выбора элементов.

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

$grid.masonry('filter', function() {
  return $(this).hasClass('category-1') && $(this).data('price') < 50;
});

В этом примере применяется комбинация двух условий: элемент должен принадлежать категории category-1 и иметь цену меньше 50.

Составление сложных фильтров

Комбинированные фильтры позволяют объединять условия через логические операторы:

  • && — логическое И, элемент должен удовлетворять всем условиям.
  • || — логическое ИЛИ, элемент отображается, если выполнено хотя бы одно условие.
  • ! — логическое НЕ, исключение элементов.

Пример фильтра, который выбирает элементы либо с классом category-2, либо с ценой меньше 30, но исключает элементы с тегом out-of-stock:

$grid.masonry('filter', function() {
  const hasCategory2 = $(this).hasClass('category-2');
  const cheapItem = $(this).data('price') < 30;
  const inStock = !$(this).hasClass('out-of-stock');
  
  return (hasCategory2 || cheapItem) && inStock;
});

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

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

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

let selectedCategories = [];
let maxPrice = 100;

$('.category-checkbox').on('change', function() {
  selectedCategories = $('.category-checkbox:checked').map(function() {
    return $(this).val();
  }).get();
  applyFilters();
});

$('#price-range').on('input', function() {
  maxPrice = $(this).val();
  applyFilters();
});

function applyFilters() {
  $grid.masonry('filter', function() {
    const categoryMatch = selectedCategories.length === 0 || selectedCategories.some(cat => $(this).hasClass(cat));
    const priceMatch = $(this).data('price') <= maxPrice;
    return categoryMatch && priceMatch;
  });
}

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

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

При работе с большими сетками важно учитывать производительность:

  • Использовать селекторы и функции фильтрации экономно.
  • Сохранять промежуточные данные (например, цену или категорию) в data-атрибутах элементов.
  • Применять фильтр после завершения всех изменений интерфейса, чтобы избежать многократного пересчёта Masonry.

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

Masonry поддерживает сортировку элементов через sortBy и getSortData. Комбинированные фильтры могут использоваться совместно с сортировкой:

$grid.masonry({
  itemSelector: '.grid-item',
  columnWidth: 200,
  getSortData: {
    price: '[data-price] parseInt',
    name: '.item-name'
  }
});

$grid.masonry('sort', 'price');
$grid.masonry('filter', function() {
  return $(this).data('price') < 50 && $(this).hasClass('category-1');
});

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

Советы по организации фильтров

  • Для сложных фильтров удобно использовать отдельные функции для каждого условия:
function filterByCategory(item, categories) {
  return categories.length === 0 || categories.some(cat => item.hasClass(cat));
}

function filterByPrice(item, maxPrice) {
  return item.data('price') <= maxPrice;
}

$grid.masonry('filter', function() {
  return filterByCategory($(this), selectedCategories) && filterByPrice($(this), maxPrice);
});
  • Это повышает читабельность кода и облегчает поддержку проекта.
  • При добавлении новых критериев фильтрации достаточно создать новую функцию, не меняя существующие.

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

Оглавление