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

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

Кастомная сортировка реализуется через параметр sortBy и сопутствующие функции sortAscending и getSortData.

Параметр getSortData

getSortData — это объект, в котором ключи соответствуют названиям методов сортировки, а значения — функции или строки-селекторы, возвращающие значение для сортировки.

Пример базовой конфигурации:

var grid = document.querySelector('.grid');
var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10,
  getSortData: {
    name: '.name',         // значение берется из текстового содержимого элемента с классом .name
    price: '.price parseInt', // значение берется и преобразуется в число
    date: function(itemElem) { 
      return Date.parse(itemElem.querySelector('.date').textContent); 
    }
  }
});
  • Строковый селектор .name возвращает текст элемента.
  • Строка с функцией преобразования .price parseInt позволяет сразу преобразовать строку в число.
  • Функция — самый гибкий вариант, позволяющий вычислять значение любым способом, включая работу с атрибутами, data-* или внешними данными.

Сортировка элементов через sortBy и sortAscending

После определения getSortData можно сортировать элементы сетки, передавая имя ключа в параметр sortBy:

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

Примеры:

  • Сортировка по алфавиту имени:
msnry.arrange({ sortBy: 'name', sortAscending: true });
  • Сортировка по убыванию даты:
msnry.arrange({ sortBy: 'date', sortAscending: false });

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

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

Пример комбинированной сортировки:

getSortData: {
  popularityAndPrice: function(itemElem) {
    var popularity = parseInt(itemElem.querySelector('.popularity').textContent);
    var price = parseFloat(itemElem.querySelector('.price').textContent);
    return popularity * 1000 - price; // комбинируем два критерия
  }
}
  • Возвращаемое значение используется для сравнения между элементами.
  • Можно использовать любые вычисления: сортировка по длине текста, по цвету, по наличию определённого класса и т.д.

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

Masonry позволяет менять порядок элементов динамически:

var currentSort = 'name';

function toggleSort() {
  currentSort = (currentSort === 'name') ? 'price' : 'name';
  msnry.arrange({ sortBy: currentSort });
}

При вызове arrange сетка перерасполагается, сохраняя анимацию и плавность переходов.

Сортировка с учётом пользовательских атрибутов

Если элементы сетки имеют кастомные атрибуты data-*, их также удобно использовать в функциях сортировки.

getSortData: {
  rating: function(itemElem) {
    return parseFloat(itemElem.getAttribute('data-rating'));
  }
}

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

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

Часто нужно сначала отфильтровать элементы по определённому критерию, а затем отсортировать их. Masonry позволяет объединять эти операции:

msnry.arrange({
  filter: function(itemElem) {
    return itemElem.querySelector('.category').textContent === 'electronics';
  },
  sortBy: 'price'
});
  • filter — функция, возвращающая true для элементов, которые должны быть видимы.
  • sortBy — ключ для сортировки оставшихся элементов.

Практические рекомендации

  • Для числовой сортировки использовать преобразование в parseInt или parseFloat.
  • Для дат — метод Date.parse.
  • Для комбинированной сортировки — возвращать число, объединяющее несколько факторов.
  • При динамическом обновлении контента нужно повторно вызывать msnry.arrange().
  • Если используется фильтрация вместе с сортировкой, сначала фильтровать, затем сортировать, чтобы минимизировать количество перерасчётов сетки.

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

Оглавление