Dashboard и виджеты

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

npm install masonry-layout

После установки подключение выглядит так:

import Masonry from 'masonry-layout';

HTML-структура для Masonry предполагает наличие контейнера и дочерних элементов — «ячееек», которые будут выстраиваться в сетку:

<div class="grid">
  <div class="grid-item">Виджет 1</div>
  <div class="grid-item">Виджет 2</div>
  <div class="grid-item">Виджет 3</div>
</div>

Каждый .grid-item может иметь различную высоту, что Masonry корректно обрабатывает, создавая «кирпичную» сетку.

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

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

const grid = document.querySelector('.grid');

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

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

  • itemSelector — селектор элементов сетки.
  • columnWidth — ширина колонок. Может быть числом (фиксированная ширина) или элементом (.grid-sizer).
  • gutter — расстояние между колонками.
  • fitWidth — если true, сетка центрируется внутри контейнера.

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

const newItems = document.createElement('div');
newItems.className = 'grid-item';
newItems.textContent = 'Новый виджет';
grid.appendChild(newItems);
msnry.appended(newItems);

Настройка сетки под разные размеры виджетов

Masonry отлично работает с виджетами произвольной высоты. Для более точного контроля часто используют «сайзер» (.grid-sizer):

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item">Виджет A</div>
  <div class="grid-item">Виджет B</div>
</div>
const msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  gutter: 20,
  percentPosition: true
});

Использование .grid-sizer позволяет легко адаптировать сетку под разные размеры экранов и поддерживать процентные значения колонок.

Реакция на изменение размеров контейнера

Для корректной работы Masonry при изменении размеров окна необходимо вызывать layout():

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

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

someWidget.addEventListener('contentLoaded', () => {
  msnry.layout();
});

Анимация и плавное размещение

Masonry поддерживает CSS-переходы. Для плавного смещения виджетов добавляются классы с анимацией:

.grid-item {
  transition: transform 0.4s ease;
}

При добавлении новых виджетов или изменении размеров сетка плавно перестраивается.

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

Для dashboard важно поддерживать добавление и удаление виджетов:

// Добавление
const widget = document.createElement('div');
widget.className = 'grid-item';
widget.textContent = 'Новый виджет';
grid.appendChild(widget);
msnry.appended(widget);

// Удаление
grid.removeChild(widget);
msnry.remove(widget);
msnry.layout();

Метод remove удаляет элемент из Masonry, после чего layout() перерассчитывает расположение оставшихся виджетов.

Использование Masonry с другими библиотеками

Masonry часто комбинируется с изображениями (imagesLoaded) для корректного выравнивания:

import imagesLoaded from 'imagesloaded';

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

Это предотвращает проблемы, когда изображения в виджетах загружаются с задержкой и нарушают сетку.

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

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

function updateMasonryColumns() {
  const width = window.innerWidth;
  if (width < 600) {
    msnry.options.columnWidth = 150;
  } else {
    msnry.options.columnWidth = 200;
  }
  msnry.layout();
}

window.addEventListener('resize', updateMasonryColumns);
updateMasonryColumns();

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

Кастомизация сортировки и порядка виджетов

Masonry по умолчанию располагает элементы в порядке появления в DOM. Для сортировки или фильтрации можно использовать комбинацию с библиотекой Array.sort или filter и затем вызывать reloadItems() и layout():

const items = Array.from(grid.children);
items.sort((a, b) => a.dataset.order - b.dataset.order);
items.forEach(item => grid.appendChild(item));
msnry.reloadItems();
msnry.layout();

Это позволяет динамически изменять порядок виджетов без пересоздания сетки с нуля.

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

Для больших дашбордов важно минимизировать перерасчеты.

  • Использовать imagesLoaded для сеток с изображениями.
  • Группировать добавление нескольких элементов перед вызовом appended.
  • Использовать requestAnimationFrame при массовых изменениях.

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

Оглавление