initLayout

Метод initLayout в библиотеке Masonry отвечает за первичное построение сетки и расположение элементов на странице. Его основная задача — вычислить позиции всех элементов-контейнеров и выстроить их в соответствии с выбранной конфигурацией, учитывая ширину колонки, отступы и порядок элементов в DOM.

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

При вызове initLayout Masonry выполняет следующие шаги:

  1. Определение размеров контейнера и колонок Masonry анализирует ширину контейнера и устанавливает количество колонок на основе:

    • ширины контейнера;
    • значения опции columnWidth (фиксированная ширина колонок или элемент-селектор);
    • значения gutter — горизонтального отступа между колонками.

  2. Подготовка элементов к размещению Все элементы, выбранные через селектор itemSelector, помещаются в массив this.items. Каждый элемент получает объект с размерами и метаданными для дальнейшего позиционирования.

  3. Рассчёт позиций Masonry определяет вертикальное смещение каждого элемента с учётом:

    • уже размещённых элементов в колонках;
    • высоты предыдущих элементов;
    • выбранного режима выравнивания (fitWidth, originLeft/originTop).

  4. Финальное размещение После расчёта координат initLayout присваивает каждому элементу CSS-свойства transform или top/left для позиционирования, обеспечивая плавную и точную укладку элементов.

Использование initLayout вручную

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

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

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

// Обновление макета
msnry.appended(newItem);
msnry.layout(); // или initLayout() при полной пересборке сетки

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

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

  • layout() — вызывает перерасчёт позиций без повторного создания внутренних массивов элементов. Используется для анимации и перестройки сетки после изменения размеров элементов.
  • reloadItems() — обновляет массив элементов this.items, но не изменяет их позиции. Обычно применяется перед initLayout() для полной пересборки.
  • appended(items) и prepended(items) — добавляют новые элементы в сетку и автоматически вызывают перерасчёт позиций через layout() или initLayout().

Важные опции, влияющие на initLayout

  • itemSelector — селектор элементов, которые будут участвовать в построении сетки.
  • columnWidth — фиксированная ширина колонок или элемент-селектор для расчёта ширины колонок.
  • gutter — горизонтальные отступы между колонками.
  • fitWidth — включение выравнивания сетки по центру контейнера.
  • originLeft и originTop — направления размещения элементов: слева-направо или сверху-вниз.

Эти параметры напрямую влияют на вычисления, выполняемые initLayout, и корректное позиционирование элементов.

Особенности при динамическом изменении содержимого

initLayout особенно полезен при:

  • изменении размеров контейнера (window.resize);
  • асинхронной загрузке контента (например, изображений через <img>);
  • динамическом добавлении и удалении элементов из сетки.

При таких сценариях рекомендуется вызывать reloadItems() перед initLayout, чтобы гарантировать, что Masonry видит актуальный набор элементов и корректно их выстраивает.

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

  • Избегать частого вызова initLayout() при множественных изменениях DOM; использовать пакетную вставку элементов и вызывать метод один раз.
  • Предварительно задавать размеры элементов через CSS для уменьшения перерасчётов.
  • Использовать imagesLoaded для синхронизации вызова initLayout() с полной загрузкой изображений, предотвращая «скачки» сетки.

Пример с imagesLoaded

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

imagesLoaded(grid, function() {
  msnry.initLayout(); // инициирует сетку после загрузки всех изображений
});

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

Вывод

initLayout — ключевой метод Masonry, отвечающий за первоначальную сборку и расположение элементов сетки. Он тесно интегрируется с методами layout, reloadItems, appended и параметрами конфигурации. Правильное использование initLayout позволяет создавать динамичные, адаптивные и визуально упорядоченные макеты с минимальной нагрузкой на производительность.

Оглавление