Сортировка при инициализации

Библиотека Isotope предоставляет мощные инструменты для динамического управления расположением элементов на странице. Одним из ключевых аспектов является сортировка элементов при инициализации, которая позволяет задать порядок отображения без дополнительного вмешательства после загрузки контента.

Настройка параметров сортировки

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

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

Здесь:

  • itemSelector — CSS-селектор элементов, которые будут управляться Isotope.
  • layoutMode — режим расположения элементов (например, fitRows, masonry).
  • sortBy — ключ, по которому будет происходить первичная сортировка.

Можно задавать сортировку не только по заранее определённым полям, но и по пользовательским атрибутам элемента.

Использование функции getSortData

Для более гибкой сортировки применяется объект getSortData. Он позволяет определить функции или методы, возвращающие значения, по которым будет производиться сравнение элементов:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  getSortData: {
    name: '.name', // сортировка по тексту внутри элемента с классом .name
    price: function(itemElem) {
      var price = itemElem.querySelector('.price').textContent;
      return parseFloat(price.replace('$', ''));
    }
  },
  sortBy: 'price'
});

Особенности:

  • Селекторная сортировка ('.name') — автоматически извлекает текстовое значение указанного дочернего элемента.
  • Функциональная сортировка — позволяет обрабатывать данные перед сравнением (например, преобразовывать строки в числа или даты).

Задание направления сортировки

Isotope поддерживает сортировку в возрастающем и убывающем порядке через свойство sortAscending.

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  getSortData: {
    name: '.name',
    date: '[data-date]'
  },
  sortBy: 'date',
  sortAscending: false
});

В примере элементы будут отсортированы по атрибуту data-date в порядке от самых новых к самым старым. sortAscending может быть задан как:

  • Булево значение — одно для всех критериев.
  • Объект — отдельное направление для каждого ключа сортировки:
sortAscending: {
  name: true,
  date: false
}

Множественная сортировка

Isotope позволяет одновременно использовать несколько критериев сортировки, указав массив ключей в sortBy:

sortBy: ['category', 'price']

Сначала элементы сортируются по category, а внутри каждой категории — по price. Если для ключей настроено направление через sortAscending, оно учитывается для каждого критерия отдельно.

Работа с атрибутами HTML

Часто удобно использовать HTML-атрибуты для хранения данных, по которым производится сортировка:

<div class="grid-item" data-price="29.99" data-rating="4.5">
  ...
</div>
getSortData: {
  price: '[data-price] parseFloat',
  rating: '[data-rating] parseFloat'
}

Isotope автоматически извлекает значение атрибута и применяет указанную функцию преобразования (parseFloat, parseInt и т.д.).

Особенности производительности

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

Сценарии практического применения

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

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

Оглавление