Режим masonry

Режим masonry — один из ключевых режимов компоновки в библиотеке Isotope, предназначенный для создания динамической сетки элементов, которые размещаются вертикально без фиксированных строк. Элементы выстраиваются в столбцы и заполняют свободное пространство по принципу «каменной кладки», благодаря чему между блоками практически не остаётся пустых промежутков.

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

Принцип работы Masonry

Классическая CSS-сетка предполагает строгую структуру строк и колонок. Каждый элемент занимает определённую ячейку, и высота строки определяется самым высоким элементом.

Masonry работает иначе:

  • контейнер делится на вертикальные колонки;
  • каждый новый элемент помещается в колонку с наименьшей текущей высотой;
  • элементы «падают» вниз, занимая ближайшее свободное место.

В результате образуется плотная сетка без лишнего вертикального пространства.

Схематично структура выглядит следующим образом:

| 1 | 2 | 3 |
| 4 |   | 5 |
|   | 6 |   |
| 7 |   | 8 |

Элементы разной высоты автоматически распределяются между колонками.

Подключение режима masonry

Masonry является режимом компоновки, который активируется через параметр layoutMode.

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

Основные параметры

Параметр Назначение
itemSelector селектор элементов сетки
layoutMode режим компоновки
masonry объект с настройками Masonry

Базовая HTML-структура

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

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--tall"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--wide"></div>
</div>

Базовые стили

Высота элементов может отличаться. Именно это создаёт характерную «неровную» сетку.

.grid-item {
  width: 200px;
  height: 150px;
}

.grid-item--tall {
  height: 300px;
}

.grid-item--wide {
  width: 400px;
}

Параметры режима Masonry

Настройки режима задаются внутри объекта masonry.

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  masonry: {
    columnWidth: 200,
    gutter: 10
  }
});

columnWidth

Определяет ширину колонок.

masonry: {
  columnWidth: 200
}

Если ширина элементов равна ширине колонок, сетка получается аккуратной и предсказуемой.

gutter

Отступ между элементами.

masonry: {
  columnWidth: 200,
  gutter: 10
}

Фактически создаётся пространство между карточками.

percentPosition

Позволяет использовать процентные размеры вместо фиксированных значений.

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

Использование элемента-разметчика (grid-sizer)

При адаптивной верстке удобнее задавать ширину колонок через специальный элемент.

HTML

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

CSS

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

JavaScript

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

Этот подход облегчает создание адаптивной сетки.

Элементы разной ширины

Masonry поддерживает элементы, занимающие несколько колонок.

CSS

.grid-item {
  width: 25%;
}

.grid-item--width2 {
  width: 50%;
}

HTML

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

Isotope автоматически учитывает ширину элемента и корректно размещает его в сетке.

Горизонтальное выравнивание

По умолчанию элементы располагаются слева. Можно изменить выравнивание через CSS.

.grid {
  margin: 0 auto;
}

Также можно использовать центрирование контейнера или flex-контекст.

Динамическое добавление элементов

Masonry корректно работает при добавлении новых элементов.

var newItems = document.createElement('div');
newItems.className = 'grid-item';

grid.appendChild(newItems);

iso.appended(newItems);

После добавления Isotope пересчитает расположение элементов.

Перестройка сетки

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

iso.layout();

Работа с изображениями

Если элементы содержат изображения, их высота может измениться после загрузки. Для предотвращения ошибок используется библиотека imagesLoaded.

imagesLoaded('.grid', function() {
  iso.layout();
});

Это гарантирует корректный расчет высоты элементов.

Комбинация Masonry и фильтрации

Masonry часто используется вместе с фильтрами.

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

document.querySelector('.filter-button').addEventListener('click', function() {
  iso.arrange({
    filter: '.category-a'
  });
});

После фильтрации сетка автоматически перестраивается.

Анимация перестроения

Isotope плавно анимирует перемещение элементов.

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  transitionDuration: '0.4s'
});

Элементы перемещаются к новым позициям без резких скачков.

Управление порядком элементов

Masonry учитывает порядок элементов в DOM. Однако можно использовать сортировку.

iso.arrange({
  sortBy: 'name'
});

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

Производительность

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

Рекомендуемые практики:

  • ограничение количества элементов на странице;
  • использование lazy-loading изображений;
  • применение виртуализации списка;
  • минимизация сложных CSS-эффектов.

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

transitionDuration: 0

Masonry и адаптивность

Сетка Masonry хорошо работает с медиазапросами.

.grid-item {
  width: 25%;
}

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

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

Isotope автоматически пересчитает сетку после изменения размеров контейнера.

Внутренний алгоритм размещения

Алгоритм Masonry можно описать следующими шагами:

  1. определяется количество колонок;
  2. создаётся массив высот колонок;
  3. для каждого элемента выбирается колонка с минимальной высотой;
  4. элемент помещается в эту колонку;
  5. высота колонки увеличивается на высоту элемента.

Упрощённый псевдокод:

columns = [0,0,0,0]

for item in items:
  column = min(columns)
  place(item, column)
  columns[column] += item.height

Такой подход обеспечивает максимально плотное заполнение пространства.

Отличия Masonry от других режимов Isotope

Режим Особенности
masonry вертикальная плотная сетка
fitRows классическая сетка строк
vertical вертикальный список
packery более сложная упаковка элементов

Masonry подходит для большинства галерей и карточных интерфейсов.

Типичные области применения

Режим Masonry часто используется в следующих интерфейсах:

  • галереи изображений;
  • каталоги товаров;
  • карточки блогов;
  • портфолио дизайнеров;
  • новостные ленты;
  • Pinterest-подобные сетки.

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

Оглавление