Динамическое изменение порядка сортировки

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

Для начала, порядок сортировки задается через свойство sortBy при инициализации Isotope:

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

Здесь getSortData определяет, какие данные можно использовать для сортировки, а sortBy задаёт начальное правило.

Динамическое изменение порядка

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

$grid.isotope({ sortBy: 'price' });

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

Можно также менять направление сортировки:

$grid.isotope({ 
  sortBy: 'date',
  sortAscending: false 
});

sortAscending принимает булево значение: true — по возрастанию, false — по убыванию.

Комбинированные правила сортировки

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

$grid.isotope({
  sortBy: ['category', 'price'],
  sortAscending: {
    category: true,
    price: false
  }
});

Элементы сначала сортируются по категории, а внутри каждой категории — по цене.

Сортировка по пользовательским функциям

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

getSortData: {
  popularity: function(itemElem) {
    var $item = $(itemElem);
    return parseInt($item.find('.likes').text(), 10);
  },
  rating: function(itemElem) {
    var $item = $(itemElem);
    return parseFloat($item.data('rating'));
  }
}

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

Связывание сортировки с пользовательским интерфейсом

На практике динамическая сортировка часто используется вместе с кнопками или выпадающими списками. Стандартная реализация через события выглядит так:

$('.sort-button-group').on('click', 'button', function() {
  var sortValue = $(this).attr('data-sort-value');
  $grid.isotope({ sortBy: sortValue });
});

Здесь кнопки содержат атрибут data-sort-value, соответствующий ключам getSortData. Можно комбинировать это с изменением направления сортировки:

$('.toggle-sort-direction').on('click', function() {
  var isAscending = $(this).hasClass('ascending');
  $grid.isotope({ sortAscending: !isAscending });
  $(this).toggleClass('ascending descending');
});

Обновление данных перед сортировкой

Если элементы сетки динамически меняют свои данные (например, обновляется цена или рейтинг), перед сортировкой нужно обновить информацию в Isotope:

$grid.isotope('updateSortData').isotope({ sortBy: 'price' });

Метод updateSortData пересчитывает значения, используемые в getSortData, и только после этого выполняется сортировка. Это гарантирует корректное расположение элементов.

Особенности анимации при динамической сортировке

Isotope применяет плавные переходы при перестановке элементов. Настройка производится через опцию transitionDuration:

$grid.isotope({
  transitionDuration: '0.8s'
});

Можно использовать и различные easing-функции, задаваемые через CSS:

.grid-item {
  transition: transform 0.8s ease-in-out;
}

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

Итоговые рекомендации по динамической сортировке

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

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

Оглавление