Метод arrange

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

Синтаксис метода:

$grid.isotope('arrange', options);

где options — объект с параметрами фильтрации и сортировки.

Параметры arrange

Основные свойства объекта options:

  • filter Определяет, какие элементы будут отображены. Может быть строкой CSS-селектора или функцией.

    Пример с селектором:

    $grid.isotope('arrange', {
  filter: '.active'
});

    Пример с функцией:

    $grid.isotope('arrange', {
  filter: function() {
    return $(this).hasClass('highlight');
  }
});

  • sortBy Задает критерий сортировки элементов. Может принимать следующие значения: original-order, name, date, пользовательские ключи.

    $grid.isotope('arrange', {
  sortBy: 'name'
});

  • sortAscending Определяет порядок сортировки: true — по возрастанию, false — по убыванию. Можно передать объект, если требуется разный порядок для разных ключей.

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

  • layoutMode Позволяет переключить режим раскладки элементов, например: masonry, fitRows, vertical.

    $grid.isotope('arrange', {
  layoutMode: 'masonry'
});

  • transitionDuration Время анимации перестройки элементов. Можно указать строку с единицами, например '0.8s', или число в миллисекундах.

    $grid.isotope('arrange', {
  transitionDuration: '0.6s'
});

Особенности работы с фильтрацией и сортировкой одновременно

Метод arrange позволяет комбинировать фильтрацию и сортировку в одном вызове. Это повышает производительность и упрощает управление состоянием сетки.

Пример комбинированной фильтрации и сортировки:

$grid.isotope('arrange', {
  filter: '.featured',
  sortBy: 'price',
  sortAscending: true
});

В этом примере отображаются только элементы с классом .featured, отсортированные по возрастанию цены.

Использование динамических фильтров

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

$('.filter-button-group').on('click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});

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

События и обратные вызовы

Метод arrange поддерживает события, позволяющие отслеживать завершение анимации или изменение состояния сетки:

  • arrangeComplete Срабатывает после того, как все элементы перестроены.
$grid.on('arrangeComplete', function(event, filteredItems) {
  console.log('Количество видимых элементов:', filteredItems.length);
});
  • layoutComplete Срабатывает после завершения перестройки и анимации всех элементов, полезно для выполнения дополнительных действий после рендера.

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

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

$grid.isotope('arrange', {
  sortBy: 'custom',
  getSortData: {
    custom: function(itemElem) {
      return $(itemElem).find('.score').text();
    }
  }
});

Здесь элементы будут отсортированы по значению внутри .score.

Плавность и производительность

Метод arrange оптимизирован для минимизации перерасчетов DOM. При работе с большим количеством элементов рекомендуется:

  • Ограничивать количество одновременно видимых элементов через фильтры.
  • Использовать transitionDuration для контроля времени анимации и предотвращения перегрузки браузера.
  • Комбинировать sortBy с filter, чтобы избегать лишних перестроек.

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

Оглавление