Интеграция с Isotope

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

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

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

Инициализация сетки с Masonry через Isotope

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

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  masonry: {
    gutter: 10
  }
});

Ключевые параметры:

  • itemSelector — селектор для элементов сетки.
  • layoutMode: 'masonry' — активация Masonry для динамической раскладки.
  • masonry.gutter — расстояние между элементами в пикселях.

Masonry через Isotope поддерживает все стандартные функции: автоматическое выравнивание колонок, адаптивную сетку и перерасчет при изменении размеров контейнера.

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

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

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

Для удаления элементов используется метод remove:

var itemToRemove = document.querySelector('.grid-item:last-child');
iso.remove(itemToRemove);
iso.layout();

Использование layout() после добавления или удаления элементов гарантирует корректное перераспределение всех элементов сетки.

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

Isotope предоставляет мощные методы фильтрации и сортировки элементов сетки, не нарушая раскладки Masonry.

Фильтрация по классу:

iso.arrange({ filter: '.category-1' });

Сортировка по атрибуту или содержимому:

iso.arrange({
  sortBy: 'name',
  getSortData: {
    name: '[data-name]'
  }
});
  • filter принимает CSS-селектор для отображения определённых элементов.
  • sortBy задаёт критерий сортировки.
  • getSortData позволяет настроить, по какому атрибуту или тексту сортировать элементы.

Обновление Masonry при изменении контента

Если содержимое сетки динамически изменяется, например, изображения загружаются асинхронно, необходимо пересчитать расположение:

imagesLoaded('.grid', function() {
  iso.layout();
});

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

Настройка адаптивной сетки

Isotope с Masonry поддерживает адаптивность при изменении ширины контейнера. Для этого используется CSS:

.grid {
  width: 100%;
}

.grid-item {
  width: 30%;
  margin-bottom: 10px;
}

При изменении размеров окна браузера Isotope автоматически пересчитывает расположение элементов. Для принудительного перерасчёта можно использовать:

window.addEventListener('resize', function() {
  iso.layout();
});

Комбинация с анимацией

Isotope поддерживает анимацию при фильтрации и сортировке, что делает сетку Masonry более динамичной.

iso.arrange({
  filter: '.category-2',
  transitionDuration: '0.5s'
});
  • transitionDuration задаёт длительность анимации.
  • Возможна комбинация фильтрации, сортировки и анимации одновременно без нарушения структуры Masonry.

Использование Masonry с Masonry-specific опциями

Isotope позволяет передавать специфические настройки Masonry, такие как:

  • columnWidth — ширина колонки, можно задать через селектор или число.
  • percentPosition — использование процентов для адаптивной сетки.
  • horizontalOrder — элементы располагаются по горизонтальному порядку, а не по вертикальному.
var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  masonry: {
    columnWidth: '.grid-sizer',
    percentPosition: true,
    horizontalOrder: true
  }
});

Использование .grid-sizer позволяет гибко управлять размерами колонок без изменения CSS каждого элемента вручную.

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

Оглавление