Медиа-запросы и Isotope

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

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

Настройка контейнера и элементов для адаптивной сетки

.grid {
  width: 100%;
}

.grid-item {
  width: 25%;
}

@media (max-width: 1200px) {
  .grid-item {
    width: 33.33%;
  }
}

@media (max-width: 768px) {
  .grid-item {
    width: 50%;
  }
}

@media (max-width: 480px) {
  .grid-item {
    width: 100%;
  }
}

В приведённом примере ширина .grid-item изменяется в зависимости от размера экрана. Isotope автоматически подхватывает эти изменения, если вызвать метод layout() после того, как DOM обновлён.

Инициализация Isotope с учётом адаптивности

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

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

  • percentPosition: true — позволяет использовать проценты в ширине элементов и корректно рассчитывать позиции.
  • masonry.columnWidth — задаёт ширину колонки, которая может быть фиксированной или привязанной к элементу .grid-sizer, чтобы обеспечить адаптивность.

Обработка изменения размера окна

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

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

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

Динамическая фильтрация с учётом адаптивности

Фильтрация элементов также тесно связана с адаптивной компоновкой. Пример:

var filtersElem = document.querySelector('.filters-button-group');

filtersElem.addEventListener('click', function(event) {
  if (!matchesSelector(event.target, 'button')) {
    return;
  }
  var filterValue = event.target.getAttribute('data-filter');
  iso.arrange({ filter: filterValue });
});

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

Использование медиа-запросов в JavaScript

Иногда требуется применять разные настройки Isotope в зависимости от размера экрана. Для этого используются медиа-запросы в JS:

function updateIsotope() {
  if (window.matchMedia("(max-width: 768px)").matches) {
    iso.options.masonry.columnWidth = '.grid-item-small';
  } else {
    iso.options.masonry.columnWidth = '.grid-sizer';
  }
  iso.layout();
}

window.addEventListener('resize', updateIsotope);
updateIsotope();

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

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

  • Использовать requestAnimationFrame при частых событиях resize для уменьшения нагрузки на браузер.
  • Минимизировать изменения DOM, так как каждый пересчёт сетки Isotope требует перерасчёта позиции всех элементов.
  • Применять percentPosition: true, чтобы не зависеть от фиксированных пикселей и упрощать адаптивные изменения.

Итоговый паттерн работы с медиа-запросами

  1. Задавать ширину элементов через CSS с медиа-запросами.
  2. Использовать .grid-sizer для гибкого задания ширины колонок.
  3. Инициализировать Isotope с percentPosition: true.
  4. Вызывать iso.layout() при изменении размеров окна.
  5. При необходимости использовать window.matchMedia для динамического изменения параметров Isotope.

Этот подход обеспечивает полностью адаптивную и динамическую сетку, способную корректно отображать элементы на любых устройствах.

Оглавление