Первый рабочий пример

Для начала работы с Masonry необходимо подключить библиотеку к проекту. Существует два основных способа: через CDN или установкой через npm/yarn.

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

<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

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

npm install masonry-layout

После установки через npm можно импортировать библиотеку в Jav * aScript:

import Masonry from 'masonry-layout';

HTML-структура

Masonry работает с контейнером, внутри которого находятся элементы (items), которые будут располагаться в «кирпичном» порядке. Каждый элемент должен иметь одинаковый класс для корректного позиционирования.

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>

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

  • Контейнер .grid является основой для Masonry.
  • Элементы .grid-item будут автоматически выстраиваться в сетку.
  • Можно задавать разные размеры элементов, Masonry подстроит их позиции.

CSS-оформление

Для корректной работы Masonry рекомендуется добавить базовые стили:

.grid {
  display: block;
  margin: 0 auto;
}

.grid-item {
  width: 200px;
  margin-bottom: 16px;
  background-color: #ddd;
  padding: 20px;
  box-sizing: border-box;
}

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

  • margin-bottom задаёт вертикальный отступ между элементами.
  • Ширина элементов влияет на количество колонок.
  • Masonry рассчитывает позиции относительно ширины контейнера и элементов.

Инициализация Masonry

Создание первого рабочего примера сводится к инициализации Masonry в JavaScript после загрузки DOM:

document.addEventListener('DOMContentLoaded', () => {
  const grid = document.querySelector('.grid');
  const masonry = new Masonry(grid, {
    itemSelector: '.grid-item',
    columnWidth: 200,
    gutter: 16,
    fitWidth: true
  });
});

Пояснение параметров:

  • itemSelector – класс элементов, которые Masonry будет располагать.
  • columnWidth – ширина колонок, может совпадать с шириной элемента.
  • gutter – промежуток между элементами.
  • fitWidth – центрирование сетки внутри контейнера при фиксированной ширине.

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

Masonry поддерживает динамическое добавление элементов с пересчётом позиции:

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

grid.appendChild(newItem);
masonry.appended(newItem);

Особенности:

  • Метод appended сообщает Masonry о новых элементах для правильного позиционирования.
  • Можно добавлять несколько элементов одновременно, передав массив DOM-элементов.

Поддержка изображений

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

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
imagesLoaded(grid, () => {
  const masonry = new Masonry(grid, {
    itemSelector: '.grid-item',
    columnWidth: 200,
    gutter: 16,
    fitWidth: true
  });
});

Пояснения:

  • imagesLoaded гарантирует, что Masonry учитывает реальный размер изображений.
  • Без этого некоторые элементы могут налезать друг на друга при первоначальном рендере.

Настройка адаптивности

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

.grid-item {
  width: 48%;
}

@media (min-width: 768px) {
  .grid-item {
    width: 30%;
  }
}

@media (min-width: 1200px) {
  .grid-item {
    width: 200px;
  }
}

При изменении ширины контейнера можно вызвать пересчёт Masonry:

window.addEventListener('resize', () => {
  masonry.layout();
});

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

  • Masonry автоматически перерасчитывает позиции элементов при вызове layout().
  • Использование процентов позволяет сетке гибко подстраиваться под размеры экрана.

Работа с различными размерами элементов

Masonry позволяет комбинировать элементы разной высоты, сохраняя «кирпичное» расположение:

<div class="grid-item tall">Высокий элемент</div>
<div class="grid-item">Обычный элемент</div>
.grid-item.tall {
  height: 300px;
}
  • Masonry автоматически подстраивает расположение так, чтобы минимизировать пустое пространство.
  • Различные высоты не нарушают сетку, элементы с меньшей высотой заполняют оставшиеся позиции.

Вывод

Первый рабочий пример Masonry демонстрирует базовое подключение, инициализацию и динамическое добавление элементов с учётом изображений. Использование правильной HTML-структуры, CSS-стилей и методов Masonry обеспечивает стабильное и адаптивное расположение контента.

Оглавление