Unit тесты

Библиотека Masonry предназначена для организации элементов на веб-странице в сетку с динамическим расположением, напоминающую «кирпичную кладку». Она идеально подходит для галерей изображений, карточек товаров или любых блоков переменной высоты. Основная идея заключается в том, чтобы элементы выравнивались по вертикали, минимизируя пустое пространство.

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

Для начала работы с Masonry необходимо подключить библиотеку через npm или CDN:

import Masonry from 'masonry-layout';

// или через CDN
// <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

После подключения можно создать объект Masonry для контейнера с элементами:

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

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

  • itemSelector — CSS-селектор для элементов, которые нужно расположить в сетке.
  • columnWidth — ширина одной колонки. Может быть числом в пикселях или селектором элемента.
  • gutter — расстояние между элементами сетки.
  • fitWidth — если true, ширина контейнера подгоняется под ширину колонок.

Методы Masonry

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

  • layout() — пересчитывает расположение элементов. Полезно после динамического добавления или изменения размеров блоков.
  • reloadItems() — обновляет список элементов сетки.
  • appended(elements) — добавляет новые элементы и автоматически размещает их.
  • remove(elements) — удаляет элементы из сетки и перестраивает расположение.

Пример динамического добавления элементов:

const newItems = document.createElement('div');
newItems.classList.add('grid-item');
grid.appendChild(newItems);

msnry.appended(newItems);
msnry.layout();

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

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

import imagesLoaded from 'imagesloaded';

imagesLoaded(grid, () => {
  msnry.layout();
});

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

Адаптивная сетка

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

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

Элемент с классом .grid-sizer задаёт базовую ширину колонки в процентах. Masonry автоматически распределяет блоки по колонкам с учётом размеров контейнера.

События Masonry

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

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

Пример использования события:

msnry.on('layoutComplete', () => {
  console.log('Сетка обновлена');
});

Интеграция с динамическим контентом

Masonry хорошо работает с контентом, загружаемым через AJAX. После добавления новых элементов необходимо:

  1. Добавить элементы в DOM.
  2. Обновить Masonry через appended().
  3. Убедиться, что изображения загружены, через imagesLoaded().
fetch('/api/photos')
  .then(response => response.json())
  .then(data => {
    const fragment = document.createDocumentFragment();
    data.forEach(item => {
      const div = document.createElement('div');
      div.classList.add('grid-item');
      div.innerHTML = `<img src="${item.url}" />`;
      fragment.appendChild(div);
    });
    grid.appendChild(fragment);
    imagesLoaded(grid, () => {
      msnry.appended(fragment.children);
      msnry.layout();
    });
  });

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

  • Использование columnWidth и percentPosition снижает количество пересчётов при изменении размеров окна.
  • Группировка операций DOM перед вызовом layout() уменьшает нагрузку на браузер.
  • Ленивая загрузка изображений совместно с Masonry повышает плавность отображения сетки.

Взаимодействие с CSS

Для корректной работы Masonry важно учитывать:

  • display: block или inline-block для элементов сетки.
  • Минимальная ширина элементов должна соответствовать columnWidth.
  • Отступы задаются через gutter в Masonry, а не только через CSS, чтобы избежать конфликтов.

Расширенные возможности

  • Комбинирование Masonry с анимациями CSS позволяет плавно перемещать элементы при добавлении и удалении.
  • Можно создавать сетку с переменной шириной и высотой блоков, задавая их через CSS классы.
  • Masonry совместим с фреймворками, такими как React, Vue или Angular, через интеграцию с компонентами и хуками жизненного цикла.

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

Оглавление