Расширение функциональности

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

Контейнер и элементы задаются через CSS-селекторы, а поведение Isotope настраивается через объект опций при инициализации.

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-sizer'
  }
});
  • itemSelector — селектор элементов, которыми управляет Isotope.
  • layoutMode — режим расположения элементов (masonry, fitRows, vertical, packery).
  • percentPosition — использование процентов для размеров колонок.
  • masonry.columnWidth — ширина колонок для режима masonry, может быть элементом-селектором.

Фильтрация и сортировка

Isotope предоставляет гибкие методы для фильтрации элементов по CSS-классам или функциям:

iso.arrange({ filter: '.category-a' });
iso.arrange({ filter: function(itemElem) {
  return parseInt(itemElem.dataset.price, 10) > 50;
}});
  • Фильтрация может быть основана на классах, атрибутах, data-полях или сложных функциях.
  • Сортировка выполняется через ключи сортировки, задаваемые через getSortData:
var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  getSortData: {
    name: '.name',
    price: '[data-price] parseInt'
  }
});

iso.arrange({ sortBy: 'price', sortAscending: false });
  • sortBy определяет критерий сортировки.
  • sortAscending указывает направление (true — по возрастанию, false — по убыванию).

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

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

var newItems = document.querySelectorAll('.new-item');
iso.appended(newItems);
iso.layout(); // Перестраивает сетку

Для удаления элементов применяется метод remove:

var itemsToRemove = document.querySelectorAll('.remove-item');
iso.remove(itemsToRemove);
iso.layout();

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

Расширение функциональности через события

Isotope генерирует события на каждом этапе работы, что позволяет интегрировать дополнительную логику:

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

Пример использования событий:

iso.on('arrangeComplete', function(filteredItems) {
  console.log('Фильтрация завершена. Элементов: ', filteredItems.length);
});

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

Кастомизация анимации

Isotope позволяет управлять скоростью анимации, типом easing и триггером перестройки сетки:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  transitionDuration: '0.8s',
  hiddenStyle: { opacity: 0, transform: 'scale(0.5)' },
  visibleStyle: { opacity: 1, transform: 'scale(1)' }
});
  • transitionDuration — время анимации перестановки элементов.
  • hiddenStyle и visibleStyle задают CSS-свойства для появления и исчезновения элементов.

Интеграция с внешними данными

Isotope легко интегрируется с динамическими источниками данных:

  1. AJAX-загрузка: новые элементы можно добавлять после получения данных с сервера.
  2. Взаимодействие с формами: фильтры и сортировка могут зависеть от выбранных значений в форме.

Пример динамической фильтрации:

document.querySelector('#filter-select').addEventListener('change', function() {
  var filterValue = this.value;
  iso.arrange({ filter: filterValue });
});

Создание собственных режимов layout

Isotope поддерживает подключение кастомных layout-модулей. Это позволяет реализовать уникальное поведение сетки, например:

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

Для подключения кастомного layout используется метод Isotope.LayoutMode.create('myMode'), после чего можно переопределить методы reset, layout и getItemLayoutPosition.

Работа с группами элементов

Isotope позволяет управлять группами элементов, объединяя их по определённым признакам:

iso.arrange({
  filter: function(itemElem) {
    return itemElem.dataset.group === 'group1';
  }
});

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

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

Оглавление