Навигация с клавиатуры

Библиотека Masonry в JavaScript обеспечивает динамическое расположение элементов в виде “кирпичной” сетки, позволяя автоматически подстраивать высоту элементов и минимизировать пустое пространство между ними. Для работы с Masonry необходимо создать контейнер, в котором будут находиться блоки, и инициализировать библиотеку с указанием параметров:

var grid = document.querySelector('.grid');
var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true,
  gutter: 10
});
  • itemSelector — селектор элементов сетки.
  • columnWidth — ширина колонки. Можно задавать через отдельный элемент-сайзер.
  • percentPosition — использование процентных значений для ширины колонок.
  • gutter — расстояние между элементами сетки.

Masonry автоматически перестраивает расположение элементов при загрузке страницы и при изменении размеров контейнера.

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

Добавление новых элементов в сетку производится с помощью методов append и layout:

var newItem = document.createElement('div');
newItem.classList.add('grid-item');
grid.appendChild(newItem);
msnry.appended(newItem);
msnry.layout();

Удаление элементов осуществляется через remove и последующий layout:

msnry.remove(itemToRemove);
msnry.layout();

Методы appended и remove обеспечивают корректное перераспределение элементов и поддержание целостности сетки без необходимости полной перезагрузки Masonry.

Настройка анимации и рендеринга

Masonry поддерживает плавное перемещение элементов при изменении их позиции через CSS-транзишены. Для включения анимации используется следующий стиль:

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

При этом библиотека управляет свойством transform, чтобы перемещать элементы без перерисовки всей страницы.

Интеграция с изображениями

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

imagesLoaded(grid, function() {
  msnry.layout();
});

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

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

Для адаптивного поведения сетки необходимо слушать событие resize:

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

Это позволяет Masonry автоматически перестраивать элементы при изменении ширины контейнера или экрана, сохраняя гармоничное распределение блоков.

Методы сортировки и фильтрации

Хотя Masonry не предоставляет встроенной фильтрации, можно сочетать её с библиотекой Isotope, которая расширяет функционал:

var iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

iso.arrange({ filter: '.category-a' });

Комбинация Masonry и Isotope позволяет создавать интерактивные сетки с динамическими фильтрами, поддержкой сортировки и анимации.

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

Для крупных сеток с большим количеством элементов рекомендуется:

  • Ограничивать количество DOM-операций за один раз (batch-обновления).
  • Использовать percentPosition вместо фиксированных значений ширины колонок.
  • Подключать Masonry после полной загрузки критического контента.

Работа с событиями Masonry

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

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

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

Интеграция с клавиатурной навигацией

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

document.addEventListener('keydown', function(event) {
  var focused = document.activeElement;
  if (focused.classList.contains('grid-item')) {
    switch(event.key) {
      case 'ArrowRight':
        focusNext(focused);
        break;
      case 'ArrowLeft':
        focusPrev(focused);
        break;
      case 'ArrowDown':
        focusBelow(focused);
        break;
      case 'ArrowUp':
        focusAbove(focused);
        break;
    }
  }
});
  • focusNext и focusPrev реализуют перемещение по рядам.
  • focusBelow и focusAbove — переход между колонками.

Для корректной работы важно назначать каждому элементу сетки атрибут tabindex="0", чтобы они могли получать фокус. Это обеспечивает полную совместимость с клавиатурной навигацией и улучшает доступность.

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

Masonry позволяет создавать сложные макеты с переменной высотой элементов, поддерживает вложенные сетки и сочетание с другими библиотеками для динамического контента. Настройка columnWidth через сайзеры и использование процентов делает сетку адаптивной под любые размеры экранов. Применение событий и методов layout позволяет полностью контролировать перераспределение элементов, что делает Masonry мощным инструментом для интерактивных интерфейсов и динамических галерей.

Оглавление