Svelte

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

Подключение и инициализация

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

npm install masonry-layout

Или подключить через CDN:

Инициализация происходит следующим образом:

import Masonry from 'masonry-layout';

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

Ключевые параметры:

  • itemSelector – CSS-селектор для элементов сетки.
  • columnWidth – ширина колонки, может быть числом или селектором.
  • gutter – расстояние между элементами.
  • percentPosition – использование процентов для ширины элементов вместо фиксированных пикселей.

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

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

const newItems = document.querySelectorAll('.new-item');
grid.append(...newItems);
msnry.appended(newItems);

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

msnry.layout();

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

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

import imagesLoaded from 'imagesloaded';

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

Без imagesLoaded элементы могут перекрываться или неправильно позиционироваться до полной загрузки изображений.

Расширенные настройки

1. Fit Width Позволяет сетке автоматически подстраиваться под ширину контейнера:

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

2. Horizontal Order Если нужно, чтобы элементы размещались по строкам слева направо:

const msnry = new Masonry(grid, {
  horizontalOrder: true
});

3. Transition Duration Анимация перестроения сетки:

const msnry = new Masonry(grid, {
  transitionDuration: '0.4s'
});

Интеграция с Svelte

В Svelte Masonry легко интегрируется через onMount для работы с DOM после рендеринга компонента:





  

  
...

  
...

Особенности использования в Svelte:

  • Использование bind:this позволяет получить доступ к DOM-элементу сетки.
  • onMount гарантирует, что Masonry инициализируется только после того, как элементы уже вставлены в DOM.
  • Для динамических данных необходимо вызывать msnry.appended() при добавлении новых элементов в реактивные массивы.

Работа с реактивными изменениями данных

В Svelte, когда данные обновляются (например, массив изображений изменяется), Masonry можно обновлять так:

$: if (grid && images.length) {
  const newElements = grid.querySelectorAll('.grid-item:not(.msnry-added)');
  newElements.forEach(el => el.classList.add('msnry-added'));
  msnry.appended(newElements);
}

Пояснения:

  • Добавление класса msnry-added предотвращает повторное добавление одних и тех же элементов.
  • Реактивное выражение $: автоматически выполняется при изменении массива images.

События Masonry

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

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

Пример подписки:

msnry.on('layoutComplete', () => {
  console.log('Сетка перестроена');
});

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

  • Установка percentPosition: true снижает влияние ресайзов контейнера.
  • Использование imagesLoaded предотвращает мерцание элементов при загрузке.
  • Минимизация количества вызовов layout() повышает плавность анимаций.
  • Для больших сеток рекомендуется использовать lazy loading изображений, чтобы Masonry обрабатывал только видимые элементы.

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

  • Для адаптивных сеток рекомендуется использовать flex-базовые стили или проценты для колонок.
  • Добавление пустых элементов-спейсеров (grid-sizer) позволяет Masonry точнее вычислять ширину колонок.
  • Настройка gutter через CSS margin или через параметр Masonry зависит от структуры макета.
Оглавление