Препроцессоры и Isotope

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

<link rel="stylesheet" href="path/to/styles.css">
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

После подключения библиотеку инициализируют на контейнере, содержащем элементы сетки:

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

Ключевые параметры:

  • itemSelector — CSS-селектор для элементов сетки.
  • layoutMode — режим расположения элементов (masonry, fitRows, vertical).

Работа с фильтрацией

Фильтрация позволяет скрывать и показывать элементы на основе их классов или атрибутов. Простейший пример фильтрации по классу:

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

Можно использовать сложные селекторы и комбинировать фильтры:

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

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

var filtersElem = document.querySelector('.filters-button-group');
filtersElem.addEventListener('click', function(event) {
  if (!matchesSelector(event.target, 'button')) return;
  var filterValue = event.target.getAttribute('data-filter');
  iso.arrange({ filter: filterValue });
});

Сортировка элементов

Isotope позволяет сортировать элементы по любому атрибуту или пользовательскому значению. Для этого используется объект getSortData:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  getSortData: {
    name: '.name',       // текстовое содержимое элемента
    price: '[data-price] parseInt', // числовое значение из атрибута
    date: '[data-date]'  // дата в формате строки
  }
});

Сортировка элементов выполняется через метод arrange:

iso.arrange({ sortBy: 'price', sortAscending: true });

Использование событий

Isotope предоставляет события, которые позволяют отслеживать завершение анимаций и изменения порядка элементов. Основные события:

  • arrangeComplete — вызывается после завершения фильтрации или сортировки.
  • layoutComplete — вызывается после завершения перестановки элементов.

Пример подписки на событие:

iso.on('arrangeComplete', function(filteredItems) {
  console.log('Количество отображаемых элементов: ', filteredItems.length);
});

Анимация и кастомизация

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

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

Можно задавать индивидуальные стили для элементов через CSS, например:

.grid-item {
  transition: transform 0.8s ease, opacity 0.8s ease;
}

Интеграция с препроцессорами CSS

Применение препроцессоров, таких как SCSS или LESS, упрощает работу с сеткой и стилями элементов. Например, можно создать миксин для сетки Isotope:

@mixin isotope-grid($columns, $gap) {
  display: flex;
  flex-wrap: wrap;
  margin-left: -#{$gap};
  .grid-item {
    width: calc(100% / #{$columns} - #{$gap});
    margin-left: $gap;
    margin-bottom: $gap;
  }
}

Использование миксина:

.grid {
  @include isotope-grid(4, 20px);
}

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

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

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

// Добавление новых элементов
var newItem = document.createElement('div');
newItem.className = 'grid-item category-a';
iso.appended(newItem);

// Удаление элементов
var itemToRemove = document.querySelector('.grid-item.category-b');
iso.remove(itemToRemove);
iso.layout();

Метод layout() пересчитывает расположение элементов после внесения изменений.

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

Для больших сеток рекомендуется:

  • Использовать минимальное количество элементов в DOM одновременно.
  • Применять imagesLoaded для правильного расчета размеров элементов с изображениями.
  • Ограничивать сложные CSS-трансформации и анимации, чтобы избежать падений FPS.

Пример с imagesLoaded:

imagesLoaded('.grid', function() {
  iso.layout();
});

Расширенные возможности

  • Многоколоночные сетки с различными размерами элементов (masonry + размеры элементов через CSS).
  • Кастомные сортировки по вычисляемым значениям через функции в getSortData.
  • Комбинированная фильтрация с использованием нескольких критериев одновременно.
  • Поддержка событий drag-and-drop через интеграцию с внешними библиотеками.

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

Оглавление