Изменение макета на разных экранах

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

Основные концепции адаптивного макета

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

  1. Настройка ширины элементов через CSS Каждый элемент сетки получает ширину, определяемую через медиа-запросы. Например:
.grid-item {
  width: 100%;
}

@media (min-width: 600px) {
  .grid-item {
    width: 48%;
  }
}

@media (min-width: 900px) {
  .grid-item {
    width: 30%;
  }
}
  1. Использование опции percentPosition В конфигурации Isotope важно включить percentPosition: true, чтобы ширины элементов, заданные в процентах, корректно интерпретировались библиотекой:
var grid = document.querySelector('.grid');
var iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  percentPosition: true
});
  1. Перестройка сетки при изменении размеров окна Isotope автоматически обновляет макет, но при изменении ширины контейнера можно вызвать layout вручную для точной перестройки:
window.addEventListener('resize', function() {
  iso.layout();
});

Использование разных макетов для разных экранов

Isotope поддерживает несколько типов макета через опцию layoutMode. На мобильных устройствах часто используется vertical или fitRows, а на больших экранах — masonry. Переключение между макетами можно реализовать динамически:

function updateLayout() {
  var width = window.innerWidth;

  if (width < 600) {
    iso.options.layoutMode = 'fitRows';
  } else {
    iso.options.layoutMode = 'masonry';
  }
  iso.layout();
}

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

Особенности такого подхода:

  • Необходимо всегда вызывать layout() после изменения layoutMode.
  • Можно сочетать с фильтрацией и сортировкой — Isotope корректно пересчитает позиции элементов.

Контроль отступов и колонок

При адаптивных сетках важны отступы между элементами. В Isotope используются gutter и CSS margin:

.grid-sizer {
  width: 5%;
}

.grid-item {
  margin: 2.5%;
}
  • grid-sizer задаёт базовую ширину колонки, на которую ориентируются остальные элементы.
  • Изменение ширины grid-sizer в медиа-запросах позволяет легко адаптировать количество колонок:
@media (min-width: 900px) {
  .grid-sizer {
    width: 20%;
  }
}

Комбинирование с медиазапросами и Flexbox

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

Практические рекомендации

  • Всегда использовать percentPosition: true при работе с адаптивной шириной.
  • Определять grid-sizer для корректной работы masonry.
  • Перестраивать сетку при изменении размера окна для устранения возможных визуальных сбоев.
  • Комбинировать медиа-запросы CSS с динамическими изменениями layoutMode через JavaScript для гибкой адаптации.

Примеры динамической перестройки

  1. Переключение между одной и несколькими колонками:
function setColumns() {
  var width = window.innerWidth;
  if (width < 480) {
    document.querySelector('.grid-sizer').style.width = '100%';
  } else if (width < 768) {
    document.querySelector('.grid-sizer').style.width = '50%';
  } else {
    document.querySelector('.grid-sizer').style.width = '25%';
  }
  iso.layout();
}

window.addEventListener('resize', setColumns);
setColumns();
  1. Динамическая фильтрация на мобильных экранах:
if (window.innerWidth < 600) {
  iso.arrange({ filter: '.mobile' });
} else {
  iso.arrange({ filter: '*' });
}

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

Итоговые рекомендации по адаптивности

  • Структурировать элементы сетки через grid-sizer и CSS проценты.
  • Использовать медиа-запросы для изменения ширины и количества колонок.
  • Обновлять макет через layout() при изменении размеров окна или конфигурации layoutMode.
  • Комбинировать фильтрацию и сортировку с адаптивными макетами для создания интерактивных и отзывчивых сеток.

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

Оглавление