Основы сортировки

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

Инициализация Isotope

Для работы с сортировкой необходимо сначала инициализировать объект Isotope. Базовый синтаксис выглядит следующим образом:

var grid = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});
  • .grid — контейнер для элементов.
  • itemSelector — класс элементов, которые будут управляться библиотекой.
  • layoutMode — режим расположения элементов. Для сортировки обычно используется fitRows или masonry.

После инициализации можно применять сортировку, фильтрацию и анимацию.

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

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

Сортировка по атрибуту

Если каждому элементу присвоен атрибут data-*, его можно использовать для сортировки:

<div class="grid-item" data-price="20">Товар 1</div>
<div class="grid-item" data-price="10">Товар 2</div>
<div class="grid-item" data-price="30">Товар 3</div>
grid.arrange({
  sortBy: 'price',
  getSortData: {
    price: '[data-price] parseInt'
  }
});
  • sortBy — ключ сортировки.
  • getSortData — объект, определяющий правила получения данных для сортировки.
  • parseInt — позволяет сортировать числовые значения корректно.
Сортировка по тексту

Для сортировки по текстовому содержимому элемента используется CSS-селектор:

grid.arrange({
  sortBy: 'name',
  getSortData: {
    name: '.grid-item'
  }
});

Здесь Isotope автоматически извлекает текстовое содержимое элементов.

Кастомные функции сортировки

Иногда требуется более сложная логика, например сортировка по нескольким критериям. Для этого используется функция:

grid.arrange({
  sortBy: 'custom',
  getSortData: {
    custom: function(itemElem) {
      var price = parseInt(itemElem.getAttribute('data-price'));
      var rating = parseFloat(itemElem.getAttribute('data-rating'));
      return price - rating * 10;
    }
  }
});

Функция получает DOM-элемент и возвращает значение, по которому будет происходить сортировка.

Сортировка по возрастанию и убыванию

Для изменения направления сортировки используется опция sortAscending:

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

Можно задать индивидуальное направление для каждого ключа:

grid.arrange({
  sortBy: ['price', 'name'],
  sortAscending: {
    price: false,
    name: true
  }
});

Динамическая сортировка через интерфейс

Сортировку удобно интегрировать с кнопками или селекторами:

<button data-sort-by="price">Цена</button>
<button data-sort-by="name">Название</button>
var buttons = document.querySelectorAll('button');

buttons.forEach(function(button) {
  button.addEventListener('click', function() {
    var sortValue = button.getAttribute('data-sort-by');
    grid.arrange({ sortBy: sortValue });
  });
});

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

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

Isotope поддерживает одновременное использование сортировки и фильтрации:

grid.arrange({
  filter: '.category-a',
  sortBy: 'price'
});

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

Рекомендации по оптимизации

  • Для больших сеток использовать числовые атрибуты для сортировки, чтобы ускорить обработку.
  • Для текстовых данных избегать лишних пробелов и HTML-тегов.
  • При частых изменениях сортировки использовать transitionDuration для плавной анимации:
var grid = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  transitionDuration: '0.4s'
});
  • Кеширование значений в getSortData повышает производительность при сложных вычислениях.

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

Оглавление