Использование element sizing

Библиотека Masonry для JavaScript предоставляет гибкий способ расположения элементов в сетке с учетом их размеров. Element sizing — это ключевой аспект, определяющий, как Masonry распределяет элементы и управляет их позиционированием. В Masonry размеры элементов можно контролировать несколькими способами: через CSS, через JavaScript и через свойства самой библиотеки.

Размеры контейнера и элементов

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

Пример базовой структуры HTML:

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

CSS для элементов с фиксированной шириной:

.grid {
  width: 100%;
}

.grid-item {
  width: 200px;
  margin-bottom: 10px;
}

В этом случае Masonry автоматически выстроит элементы в колонки, учитывая их ширину и отступы.

Использование свойства columnWidth

Свойство columnWidth в Masonry позволяет задать базовую ширину колонки, что влияет на распределение элементов. Значение может быть числом (в пикселях) или селектором элемента, размеры которого будут использоваться как эталон.

const grid = document.querySelector('.grid');
const msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10
});

Особенности:

  • columnWidth числом — задает фиксированную ширину всех колонок.
  • columnWidth селектором — Masonry будет использовать первый элемент с указанным селектором как эталон размера колонки.
  • gutter определяет расстояние между колонками.

Использование columnWidth важно для адаптивной сетки, когда размеры элементов могут изменяться в зависимости от ширины контейнера.

Динамическое изменение размеров элементов

Иногда элементы сетки могут меняться в размере после загрузки страницы (например, при подгрузке изображений или при изменении текста). Masonry предоставляет метод layout() для перерасчета позиции элементов:

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

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

Использование процентной ширины и percentPosition

Если элементы имеют процентную ширину, необходимо включить опцию percentPosition, чтобы Masonry корректно учитывал размеры:

const msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

CSS:

.grid-sizer, .grid-item {
  width: 25%;
}

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

Высота элементов и их автоматическое выравнивание

Высота элементов Masonry учитывает реальные размеры контента. В отличие от фиксированной сетки, Masonry не обрезает элементы по высоте, а строит колонки с учетом полного размера каждого блока. Для элементов с динамическим контентом важно, чтобы Masonry пересчитывал позиции после изменения высоты:

msnry.layout(); // Перерасчет сетки после изменения контента

Для плавного анимационного изменения размеров можно использовать CSS-переходы:

.grid-item {
  transition: all 0.3s ease;
}

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-sizer {
  width: 20%;
}
.grid-item {
  width: 20%;
}

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

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

  • Всегда задавать ширину контейнера и базовую ширину элементов или колонок.
  • Для динамического контента использовать msnry.layout() после изменения размеров.
  • При процентной ширине включать percentPosition: true.
  • Для адаптивной сетки удобно использовать grid sizer.
  • Поддерживать плавные переходы через CSS transition, чтобы изменение размеров выглядело аккуратно.

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

Оглавление