Использование с Masonry

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

Пример подключения через CDN:

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

Инициализация Isotope с Masonry:

var grid = document.querySelector('.grid');
var iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  masonry: {
    columnWidth: '.grid-sizer', // Определяет ширину колонок
    gutter: 10                 // Отступы между элементами
  }
});

Ключевые моменты:

  • itemSelector — CSS-селектор для каждого элемента сетки.
  • layoutMode: 'masonry' активирует режим Masonry.
  • masonry.columnWidth можно указать фиксированным или через отдельный элемент-сизер, чтобы Isotope рассчитывал ширину колонок динамически.
  • masonry.gutter задаёт промежутки между элементами.

Создание адаптивной сетки

Для адаптивности сетки элементы могут иметь процентную ширину, а sizier-элемент использовать для определения базовой колонки. Пример HTML:

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item">Элемент 1</div>
  <div class="grid-item">Элемент 2</div>
  <div class="grid-item">Элемент 3</div>
  ...
</div>

CSS для адаптивности:

.grid {
  display: block;
}
.grid-sizer,
.grid-item {
  width: 33.33%; /* 3 колонки */
}
.grid-item {
  margin-bottom: 10px;
}

Особенности:

  • .grid-sizer используется только как опорный элемент для расчёта ширины колонок.
  • Ширина колонок в процентах позволяет сетке автоматически подстраиваться под размер экрана.
  • Отступы и выравнивание элементов регулируются через gutter и margin-bottom.

Фильтрация и сортировка элементов

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

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

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

Пример сортировки по атрибуту:

iso.arrange({
  sortBy: 'name',
  getSortData: {
    name: '[data-name]'
  }
});

Ключевые моменты:

  • arrange({ filter: ... }) обновляет отображение элементов без пересоздания сетки.
  • getSortData позволяет задавать кастомные параметры для сортировки, например, числовые значения или строки.
  • Masonry автоматически перерассчитывает позиции элементов при фильтрации и сортировке.

Динамическое добавление и удаление элементов

Isotope поддерживает добавление новых элементов с плавной анимацией:

var newItem = document.createElement('div');
newItem.classList.add('grid-item');
newItem.textContent = 'Новый элемент';
grid.appendChild(newItem);
iso.appended(newItem);

Удаление элемента:

var itemToRemove = document.querySelector('.grid-item-to-remove');
iso.remove(itemToRemove);
iso.layout(); // Перерасчёт Masonry

Особенности работы с Masonry:

  • Метод appended автоматически перестраивает сетку после добавления элементов.
  • Метод remove удаляет элементы и корректно сдвигает оставшиеся.
  • layout() применяется для перерасчёта позиции всех элементов при изменении размера контейнера или содержимого.

Оптимизация производительности

Для больших сеток с Masonry важно учитывать производительность:

  1. Использование размеров колонок через .grid-sizer уменьшает количество вычислений при перерасчётах.
  2. Debounce при изменении размера окна предотвращает постоянный перерасчёт Masonry:
window.addEventListener('resize', debounce(function() {
  iso.layout();
}, 200));
  1. Lazy-load изображений с последующим вызовом iso.layout() для корректного отображения элементов с разной высотой.

Анимация и плавные переходы

Isotope позволяет задавать кастомные эффекты появления и исчезновения элементов:

.grid-item {
  transition: transform 0.4s, opacity 0.4s;
}
iso.arrange({ filter: '.active' });

Особенности:

  • Masonry автоматически перемещает элементы с анимацией благодаря CSS-переходам.
  • Сочетание transform и opacity даёт плавные и ресурсоэффективные анимации.
  • Можно комбинировать с библиотеками анимации для более сложных эффектов.

Совместимость с другими layout режимами

Хотя Masonry является самым популярным режимом для динамических сеток, Isotope позволяет комбинировать его с:

  • FitRows — равномерное размещение элементов без вертикальных промежутков.
  • Vertical — вертикальное выравнивание колонок по верхнему краю.

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

Оглавление