Вложенные сетки

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

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

Структура HTML для вложенных сеток

Для реализации вложенных сеток используется стандартная структура:

<div class="grid parent-grid">
  <div class="grid-item">
    <div class="grid child-grid">
      <div class="grid-item">Элемент 1</div>
      <div class="grid-item">Элемент 2</div>
    </div>
  </div>
  <div class="grid-item">Элемент родителя 2</div>
  <div class="grid-item">
    <div class="grid child-grid">
      <div class="grid-item">Элемент 3</div>
      <div class="grid-item">Элемент 4</div>
    </div>
  </div>
</div>

parent-grid — контейнер родительской сетки.
child-grid — контейнер дочерней сетки внутри элемента родителя.
Каждый .grid-item в дочерней сетке может иметь собственные размеры и стили.

Инициализация вложенных сеток через JavaScript

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

// Инициализация родительской сетки
var parentGrid = document.querySelector('.parent-grid');
var msnryParent = new Masonry(parentGrid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10,
  percentPosition: true
});

// Инициализация дочерних сеток
document.querySelectorAll('.child-grid').forEach(function(child) {
  new Masonry(child, {
    itemSelector: '.grid-item',
    columnWidth: 100,
    gutter: 5,
    percentPosition: true
  });
});

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

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

Взаимодействие родительской и дочерней сеток

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

// Пример обновления родительской сетки при изменении дочерней
msnryParent.layout();

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

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

Добавление новых элементов требует последовательных действий:

Создать новый DOM-элемент.
Добавить его в контейнер дочерней сетки.
Вызвать appended метод Masonry для обновления:

var newItem = document.createElement('div');
newItem.classList.add('grid-item');
newItem.textContent = 'Новый элемент';
childGrid.appendChild(newItem);

// Обновление Masonry для дочерней сетки
var msnryChild = Masonry.data(childGrid);
msnryChild.appended(newItem);

// Обновление родительской сетки
msnryParent.layout();

Такой подход обеспечивает плавное появление новых элементов с анимацией и корректное перераспределение пространства.

CSS для вложенных сеток

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

.grid {
  display: block;
}

.grid-item {
  background: #f0f0f0;
  margin-bottom: 10px;
}

.child-grid {
  margin-top: 10px;
}

Советы по стилям:

Не использовать float для родительских элементов, Masonry управляет позиционированием самостоятельно.
Для адаптивных сеток лучше использовать процентные значения ширины элементов (width: 30%) и включить percentPosition: true.
Добавление анимаций через CSS (transition) улучшает визуальный эффект при перестроении сетки.

Оптимизация производительности

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

imagesLoaded(parentGrid, function() {
  msnryParent.layout();
});

Минимизировать количество одновременных пересчетов layout(). Лучше группировать изменения и вызывать метод один раз после всех изменений.

Использование событий Masonry во вложенных сетках

Masonry предоставляет события для контроля сеток:

layoutComplete — вызывается после перестроения сетки.
removeComplete — вызывается после удаления элементов.

Пример отслеживания перестроения дочерней сетки:

var msnryChild = Masonry.data(childGrid);
msnryChild.on('layoutComplete', function(items) {
  console.log('Дочерняя сетка перестроена:', items.length, 'элементов');
  msnryParent.layout(); // обновление родителя
});

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