Миграция с Masonry

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

Подключение и инициализация

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

var grid = document.querySelector('.grid');
var iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-sizer'
  }
});

Ключевые моменты при миграции:

itemSelector заменяет Masonry-опцию itemSelector.
layoutMode: 'masonry' позволяет сохранить привычное поведение сетки.
percentPosition: true обеспечивает корректное масштабирование при изменении ширины контейнера.
masonry.columnWidth указывает базовую ширину колонки. Использование скрытого элемента-сайдера (.grid-sizer) упрощает адаптивное позиционирование.

Работа с фильтрацией

Isotope предоставляет встроенный механизм фильтрации элементов с использованием CSS-селекторов или пользовательских функций:

var filterButtons = document.querySelectorAll('.filter-button-group button');

filterButtons.forEach(function(button) {
  button.addEventListener('click', function() {
    var filterValue = button.getAttribute('data-filter');
    iso.arrange({ filter: filterValue });
  });
});

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

iso.arrange({
  filter: function(itemElem) {
    return parseInt(itemElem.getAttribute('data-year'), 10) > 2020;
  }
});

Сортировка элементов

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

iso.arrange({
  sortBy: 'name'
});

iso.updateSortData();

Для корректной работы сортировки необходимо заранее определить getSortData при инициализации:

var iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  getSortData: {
    name: '[data-name]',
    year: function(itemElem) {
      return parseInt(itemElem.getAttribute('data-year'), 10);
    }
  }
});

В отличие от Masonry, который требует ручного перемещения DOM-элементов для сортировки, Isotope автоматически анимирует перестановку.

Анимация перестройки сетки

Isotope обеспечивает плавные анимации при изменении фильтров или сортировки. Для контроля анимации используются опции transitionDuration и hiddenStyle/visibleStyle:

var iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  transitionDuration: '0.6s',
  hiddenStyle: { opacity: 0, transform: 'scale(0.8)' },
  visibleStyle: { opacity: 1, transform: 'scale(1)' }
});

transitionDuration задаёт время анимации перестройки элементов.
hiddenStyle и visibleStyle позволяют кастомизировать эффект появления и исчезновения элементов.

Интеграция с динамическим контентом

При добавлении новых элементов в сетку необходимо использовать методы appended или prepended:

var newItems = document.querySelectorAll('.new-grid-item');
iso.appended(newItems);

После добавления элементов можно сразу вызвать iso.arrange() для применения текущих фильтров и сортировки.
Isotope автоматически рассчитывает позиции новых элементов, обеспечивая сохранение анимации и сеточной структуры.

Управление событиями и взаимодействие

Isotope предоставляет события, аналогичные Masonry, но с расширенным функционалом:

iso.on('arrangeComplete', function(filteredItems) {
  console.log('Сетка обновлена, отображено элементов: ', filteredItems.length);
});

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