Процентные значения размеров

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

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

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

.grid {
  width: 100%;
  position: relative;
}
.grid-item {
  width: 25%;
  box-sizing: border-box;
  float: left;
}

В этом примере каждый элемент .grid-item занимает 25% ширины контейнера, что позволяет автоматически размещать четыре элемента в ряд. Использование box-sizing: border-box гарантирует, что паддинги и границы не выйдут за пределы заданного процента.

Инициализация Isotope с процентными размерами

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

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

Здесь ключевой момент — percentPosition: true, который указывает библиотеке использовать проценты для вычисления положения и ширины элементов. Без этой опции Isotope будет использовать абсолютные значения пикселей, что нарушит адаптивность.

Использование .grid-sizer для гибкой сетки

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

<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 {
  width: 25%;
}

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

Адаптивные колонки с медиазапросами

Для поддержания адаптивного дизайна удобно менять процентные размеры элементов через CSS медиазапросы:

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

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

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

Isotope автоматически пересчитает позиции элементов при изменении ширины окна, если используется percentPosition: true. Это делает сетку полностью адаптивной без дополнительных вмешательств в JS.

Взаимодействие с другими свойствами Isotope

Процентные размеры отлично сочетаются с фильтрацией, сортировкой и динамическим добавлением элементов:

// Фильтрация элементов
iso.arrange({ filter: '.category-1' });

// Добавление нового элемента
var elem = document.createElement('div');
elem.className = 'grid-item';
grid.appendChild(elem);
iso.appended(elem);

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

Ключевые рекомендации

  • Всегда использовать percentPosition: true при работе с процентами.
  • Создавать .grid-sizer для удобного управления шириной колонок.
  • Применять медиазапросы для адаптивных сеток.
  • Учитывать box-sizing: border-box для точного расчёта размеров.
  • Использовать встроенные методы Isotope для динамических изменений элементов, чтобы сетка оставалась стабильной.

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

Оглавление