Адаптивные сетки

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

Инициализация сетки

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

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

Инициализация Isotope происходит через Jav * aScript:

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

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

itemSelector — CSS-селектор элементов сетки.
layoutMode — режим компоновки (masonry, fitRows, vertical).
percentPosition — использование процентов для ширины колонок, что важно для адаптивности.
masonry.columnWidth — определяет ширину колонок, может ссылаться на вспомогательный элемент .grid-sizer.

Настройка адаптивных колонок

Для гибкой сетки обычно используют вспомогательный элемент .grid-sizer, который задаёт базовую ширину колонок:

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

CSS:

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid-sizer,
.grid-item {
  width: 25%; /* 4 колонки по умолчанию */
}

@media (max-width: 1200px) {
  .grid-sizer,
  .grid-item {
    width: 33.33%; /* 3 колонки */
  }
}

@media (max-width: 768px) {
  .grid-sizer,
  .grid-item {
    width: 50%; /* 2 колонки */
  }
}

@media (max-width: 480px) {
  .grid-sizer,
  .grid-item {
    width: 100%; /* 1 колонка */
  }
}

Использование медиазапросов позволяет сетке автоматически перестраиваться при изменении ширины окна браузера.

Обновление и перерасчет сетки

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

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

Метод layout() пересчитывает позиции элементов, обеспечивая корректную адаптивность без визуальных сбоев.

Фильтрация и сортировка в адаптивной сетке

Isotope позволяет фильтровать и сортировать элементы независимо от их текущего положения. Например:

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

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

Сортировка:

iso.arrange({
  sortBy: 'name', // атрибут или свойство
  sortAscending: true
});

При изменении размеров сетки фильтры и сортировка автоматически подстраиваются под новые размеры элементов, если используется percentPosition и корректная настройка columnWidth.

Анимация и плавное изменение сетки

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

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

Параметр transitionDuration задаёт длительность анимации при перестановке элементов. Это особенно важно для адаптивных сеток, где элементы меняют свои позиции при изменении ширины окна.

Работа с изображениями

Чтобы сетка корректно учитывала размеры изображений, используется метод imagesLoaded:

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

Это гарантирует, что все изображения загружены, и сетка не ломается из-за задержки с загрузкой изображений.

Использование нескольких сеток на одной странице

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

var grid1 = new Isotope('.grid-1', { itemSelector: '.grid-item', layoutMode: 'masonry' });
var grid2 = new Isotope('.grid-2', { itemSelector: '.grid-item', layoutMode: 'fitRows' });

Каждая сетка может иметь свои адаптивные настройки, фильтры и сортировку.