Обратная сортировка

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

Обратная сортировка реализуется через настройку параметра sortAscending. По умолчанию он равен true, что означает сортировку по возрастанию. Для обратной сортировки достаточно присвоить этому параметру значение false для нужного ключа сортировки:

const iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  getSortData: {
    name: '.name',        // сортировка по тексту
    price: '.price parseFloat', // сортировка по числу
  },
  sortAscending: {
    name: true,   // по возрастанию
    price: false  // по убыванию
  }
});

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

Динамическое переключение обратной сортировки

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

const buttonGroup = document.querySelector('.sort-buttons');

buttonGroup.addEventListener('click', function(event) {
  if (!event.target.matches('button')) return;

  const sortValue = event.target.getAttribute('data-sort-by');
  const isAscending = event.target.getAttribute('data-sort-asc') === 'true';

  iso.arrange({
    sortBy: sortValue,
    sortAscending: isAscending
  });
});

Каждая кнопка может иметь атрибуты data-sort-by и data-sort-asc, что позволяет гибко управлять сортировкой элементов. Это особенно полезно для каталогов товаров, портфолио и галерей, где пользователь может самостоятельно выбирать направление сортировки.

Обратная сортировка по сложным ключам

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

getSortData: {
  date: function(itemElem) {
    const date = itemElem.getAttribute('data-date'); // 'YYYY-MM-DD'
    return new Date(date);
  },
  combined: function(itemElem) {
    const priority = parseInt(itemElem.getAttribute('data-priority'));
    const rating = parseFloat(itemElem.getAttribute('data-rating'));
    return priority * 1000 + rating; // комбинированное значение
  }
},
sortAscending: {
  date: false,      // новые даты сверху
  combined: true    // комбинированная сортировка по возрастанию
}

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

Переключение направления сортировки через интерфейс

Для улучшения UX часто используют одну кнопку, которая меняет направление сортировки при каждом клике. Это реализуется с помощью сохранения текущего состояния:

let ascending = false;

const toggleButton = document.querySelector('.toggle-sort');
toggleButton.addEventListener('click', () => {
  ascending = !ascending;

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

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

Использование обратной сортировки с фильтрацией

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

iso.arrange({
  filter: '.category-electronics',
  sortBy: 'price',
  sortAscending: false
});

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

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

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

iso.arrange({
  sortBy: 'date',
  sortAscending: false,
  transitionDuration: '0.7s', // длительность анимации
  stagger: 50                 // задержка между элементами
});

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

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

  • Всегда задавать sortAscending как объект, если используется несколько критериев.
  • Для динамического управления использовать метод arrange и обновлять sortBy и sortAscending.
  • Для сложных ключей применять функции в getSortData.
  • Сочетать обратную сортировку с фильтрацией для удобных интерактивных интерфейсов.
  • Настраивать анимацию через transitionDuration и stagger для визуальной привлекательности.

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

Оглавление