Базовые параметры конфигурации

Для работы с библиотекой Masonry необходимо подключить её к проекту через <script> или с помощью менеджеров пакетов (npm, yarn). Основной объект создаётся с помощью конструктора Masonry, которому передаётся контейнер и объект опций:

const masonry = new Masonry('.grid', {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10,
  fitWidth: true
});
  • .grid — селектор контейнера с элементами сетки.
  • itemSelector — обязательный параметр, указывающий на элементы, которые будут упорядочены библиотекой.
  • columnWidth — ширина колонок сетки. Может быть числом (пиксели) или элементом, чей размер используется как эталон.
  • gutter — промежуток между колонками.
  • fitWidth — флаг, который при true выравнивает сетку по центру контейнера.

Основные параметры конфигурации

itemSelector

Определяет элементы внутри контейнера, которые Masonry будет размещать. Значение — CSS-селектор. Примеры:

itemSelector: '.grid-item' // все элементы с классом grid-item
itemSelector: 'li'         // все li внутри контейнера

columnWidth

Определяет ширину одной колонки. Может принимать:

  • Число — фиксированная ширина в пикселях.
  • CSS-селектор — ширина берётся из элемента-сетки.
columnWidth: '.grid-sizer'

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

gutter

Отвечает за отступы между колонками. Может быть указан в пикселях или через CSS-переменные. Masonry учитывает это при расчёте расположения элементов.

gutter: 20

percentPosition

Позволяет использовать процентные значения для ширины колонок и отступов. Значение true делает сетку адаптивной:

percentPosition: true

fitWidth

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

fitWidth: true

originLeft и originTop

Определяют направление укладки элементов:

  • originLeft — true по умолчанию, размещение слева направо.
  • originTop — true по умолчанию, размещение сверху вниз.

Для правосторонних языков или необычных макетов можно изменить:

originLeft: false
originTop: true

horizontalOrder

Включение этого параметра (true) заставляет Masonry укладывать элементы в порядке их появления в DOM, а не по высоте колонок.

horizontalOrder: true

Полезно при реализации списков, где важен порядок элементов.

Динамическое управление Masonry

После инициализации сетки параметры можно менять и пересчитывать расположение элементов:

masonry.options.gutter = 30;
masonry.layout();
  • layout() — пересчитывает положение всех элементов.
  • reloadItems() — обновляет список элементов для перерасчёта сетки.

Связь с CSS

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

.grid {
  width: 100%;
}

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

Использование .grid-sizer помогает создать сетку с адаптивной шириной колонок:

.grid-sizer {
  width: 33.333%;
}

Комбинирование параметров

Для оптимальной адаптивной галереи часто используют сочетание:

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

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

Мasonry предоставляет гибкую систему конфигурации, где каждый параметр влияет на точное позиционирование элементов, обеспечивая как фиксированные, так и адаптивные макеты.

Оглавление