Метод shuffle

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

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

$grid.isotope('shuffle');
  • $grid — это jQuery-объект контейнера, в котором инициализирован Isotope.
  • Метод shuffle не принимает аргументов и возвращает ссылку на объект Isotope, что позволяет применять цепочку методов (chaining).

Пример базового использования:

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

$grid.isotope('shuffle');

В этом примере элементы с классом .grid-item внутри контейнера .grid будут случайным образом перемешаны.

Важные особенности

  1. Анимация перестановки Метод shuffle автоматически запускает анимацию, если она включена при инициализации Isotope через опцию transitionDuration. Например:

    var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  transitionDuration: '0.6s'
});

$grid.isotope('shuffle');

    В этом случае перемещение элементов будет плавным и визуально привлекательным.

  2. Совместимость с фильтрацией и сортировкой Метод shuffle работает поверх текущего фильтра и порядка сортировки. Если ранее применялась фильтрация через filter, элементы будут перемешаны только среди видимых элементов. Аналогично, если использовался метод arrange с сортировкой, shuffle перемешивает элементы в пределах установленного фильтра.

  3. Возврат к исходному порядку Isotope хранит исходный порядок элементов в момент инициализации. Метод shuffle не уничтожает эту информацию, что позволяет при необходимости вернуть элементы в исходный порядок через метод arrange с параметром sortBy: 'original-order'.

Пример продвинутого использования

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  transitionDuration: '0.5s'
});

// Перемешивание каждые 5 секунд
setInterval(function() {
  $grid.isotope('shuffle');
}, 5000);

// Случайное перемешивание при клике на кнопку
$('#shuffle-button').on('click', function() {
  $grid.isotope('shuffle');
});

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

Взаимодействие с другими методами Isotope

  • arrange — метод shuffle можно комбинировать с arrange для дополнительной фильтрации или сортировки после перемешивания.
  • updateSortData — если элементы изменяют свои свойства, влияющие на сортировку, необходимо обновлять данные сортировки перед вызовом shuffle, чтобы Isotope корректно переставлял элементы.
$grid.isotope('updateSortData').isotope('shuffle');
  • layout — после динамического добавления или удаления элементов рекомендуется вызвать layout для корректного перераспределения элементов перед вызовом shuffle.

Советы по использованию

  • Для лучшей производительности рекомендуется использовать shuffle на контейнерах с ограниченным количеством элементов. При работе с тысячами элементов может наблюдаться замедление анимации.
  • В сочетании с опцией transitionDuration можно создавать эффект «живой галереи», где элементы плавно перемещаются и создают визуальный интерес.
  • При интеграции с пользовательскими событиями (click, hover, scroll) метод shuffle позволяет создавать интерактивные элементы управления порядком контента.

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

Оглавление