Использование элемента-сайзера

Элемент-сайзер (sizer) в Isotope служит для контроля размера элементов сетки и расчёта расположения элементов при динамическом изменении контента. Основная задача сайзера — задать базовую единицу измерения для всех элементов, что особенно важно при использовании макета masonry или packery.

Настройка элемента-сайзера

Элемент-сайзер определяется в HTML как обычный элемент контейнера, который не участвует в визуальном отображении контента. Например, это может быть пустой div с классом grid-sizer. Размер этого элемента будет служить опорой для вычисления размеров остальных элементов сетки.

Пример HTML-разметки:

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

В этом примере .grid-sizer определяет ширину одного столбца сетки, а .grid-item будут располагаться с учётом этой ширины.

Подключение и инициализация Isotope с сайзером

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

Пример JavaScript-кода:

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

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

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

Динамическая адаптация сетки

Элемент-сайзер позволяет легко менять размеры сетки при изменении ширины окна. Если сетка должна быть адаптивной, достаточно задать процентную ширину сайзера в CSS:

.grid-sizer {
  width: 25%;
}

.grid-item {
  width: 25%;
}

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

Комбинирование с gutter

Элемент-сайзер можно использовать совместно с отступами между элементами (gutter). Для этого создаётся дополнительный пустой элемент или используется CSS-свойство margin.

Пример:

.grid-sizer {
  width: 20%;
}

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

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

Изменение сайзера динамически

Размеры элемента-сайзера могут меняться не только через CSS, но и через JavaScript. После изменения размеров необходимо вызвать метод layout для пересчёта расположения элементов:

document.querySelector('.grid-sizer').style.width = '30%';
iso.layout();

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

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

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

Ключевое правило — элемент-сайзер должен быть первым дочерним элементом контейнера .grid, чтобы Isotope корректно его учитывал при расчётах.

Советы по производительности

  • Минимизировать изменения размеров сайзера во время анимации для снижения нагрузки на браузер.
  • Использовать percentPosition: true, чтобы избежать постоянного пересчёта пиксельных значений при ресайзе окна.
  • Для больших сеток рекомендуется задавать размеры сайзера через CSS, а не через JavaScript, чтобы Isotope мог использовать встроенные механизмы оптимизации.

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

Оглавление