Подключение к проекту

Библиотека Masonry предназначена для организации элементов на странице в виде сетки с динамическими высотами. Для корректной работы необходимо правильно подключить библиотеку и подготовить структуру HTML и CSS.

Установка через npm

Для проектов с использованием Node.js и сборщиков модулей (Webpack, Parcel, Vite) рекомендуется установка через npm:

npm install masonry-layout

После установки библиотеку можно импортировать в JavaScript-файл:

import Masonry from 'masonry-layout';

// Инициализация Masonry
const grid = document.querySelector('.grid');
const msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

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

  • itemSelector — CSS-селектор элементов сетки. Указывает, какие элементы Masonry будет выравнивать.
  • columnWidth — ширина колонок. Можно указать элемент-сизер или число в пикселях.
  • percentPosition: true — позволяет использовать процентные ширины колонок для адаптивной сетки.

Подключение через CDN

Для быстрого прототипирования или статических сайтов можно подключить Masonry через CDN. Вставка скрипта в HTML:

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

Инициализация производится после загрузки DOM:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var grid = document.querySelector('.grid');
    var msnry = new Masonry(grid, {
      itemSelector: '.grid-item',
      columnWidth: '.grid-sizer',
      percentPosition: true
    });
  });
</script>

Подготовка HTML структуры

Для корректного распределения элементов создается базовая структура сетки:

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item">Элемент 1</div>
  <div class="grid-item">Элемент 2</div>
  <div class="grid-item">Элемент 3</div>
</div>

Особенности структуры:

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

Стилизация сетки

Для правильного отображения Masonry требует CSS, который задаёт размеры колонок и отступы:

.grid {
  display: flex;
  margin-left: -10px; /* отрицательный отступ компенсирует margin элементов */
  width: auto;
}

.grid-sizer,
.grid-item {
  width: 30%; /* ширина одной колонки */
  margin-left: 10px;
  margin-bottom: 10px;
}

.grid-item {
  background-color: #e0e0e0;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

Важные моменты CSS:

  • Masonry использует position: absolute для позиционирования элементов. Поэтому родительский контейнер должен иметь position: relative.
  • .grid-sizer нужен для вычисления ширины колонок, особенно при использовании процентных значений.
  • Отступы между элементами компенсируются с помощью отрицательных марджинов у контейнера.

Асинхронная загрузка контента

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

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

// Добавление нового элемента
const newItem = document.createElement('div');
newItem.classList.add('grid-item');
newItem.textContent = 'Новый элемент';
grid.appendChild(newItem);

// Обновление Masonry
msnry.appended(newItem);

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

  • msnry.appended(element) — добавляет новый элемент в сетку с перерасчетом.
  • msnry.layout() — пересчитывает текущую сетку.
  • msnry.reloadItems() — обновляет список элементов, если структура DOM изменилась.

Подключение с учетом изображений

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

imagesLoaded(grid, function() {
  new Masonry(grid, {
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    percentPosition: true
  });
});

Используется библиотека imagesLoaded, которую также можно подключить через npm или CDN:

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

Резюме по подключению

  • Для проектов с модульной системой используется npm install masonry-layout.
  • Для статических страниц подходит CDN.
  • HTML должен содержать контейнер .grid, элементы .grid-item и опционально .grid-sizer.
  • CSS задаёт ширину колонок, отступы и позиционирование.
  • Асинхронно загруженные элементы и изображения требуют дополнительного вызова методов Masonry или использования imagesLoaded.

Правильное подключение и настройка библиотеки обеспечивает стабильную работу сетки с динамическими высотами элементов, адаптивность и корректное перераспределение при добавлении новых блоков.

Оглавление