Портфолио

Masonry — это JavaScript-библиотека для создания динамических сеток, в которых элементы автоматически располагаются по принципу “кирпичной кладки”. Главная особенность — адаптивное расположение элементов с разной высотой, что позволяет добиться аккуратного и плотного заполнения пространства. В отличие от стандартных CSS-сеток, Masonry минимизирует пустые промежутки между блоками, автоматически размещая элементы в ближайших доступных ячейках.

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

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

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

Затем создаётся контейнер с элементами сетки:

<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>

Инициализация осуществляется через Jav * aScript:

const grid = document.querySelector('.grid');
const masonry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10,
  fitWidth: true
});
  • itemSelector — CSS-селектор элементов сетки.
  • columnWidth — ширина колонки. Может быть числом или элементом DOM.
  • gutter — расстояние между элементами.
  • fitWidth — если true, сетка центрируется по горизонтали.

Настройка колонок

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

  1. Фиксированная ширина колонок Все колонки имеют одинаковую ширину, элементы автоматически подстраиваются по высоте:

    columnWidth: 250

  2. Использование элемента как эталон колонки В качестве ширины используется DOM-элемент:

    columnWidth: '.grid-sizer'

    Такой подход позволяет создавать полностью адаптивные сетки, которые меняют количество колонок при изменении ширины окна.

Динамическая загрузка контента

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

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

masonry.appended(newItem);
masonry.layout();
  • appended — сообщает Masonry о добавлении нового элемента.
  • layout — перерасчитывает позиционирование всех элементов.

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

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

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
imagesLoaded(grid, function() {
  masonry.layout();
});

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

Анимации и плавное отображение

Masonry поддерживает CSS-анимации при перестройке сетки. Для плавного эффекта можно использовать transition на .grid-item:

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

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

Взаимодействие с фильтрами

Для портфолио часто требуется фильтрация элементов по категориям. Masonry легко интегрируется с фильтрацией:

const filteredItems = grid.querySelectorAll('.grid-item.category-web');
grid.querySelectorAll('.grid-item').forEach(item => {
  item.style.display = 'none';
});
filteredItems.forEach(item => item.style.display = 'block');
masonry.layout();

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

Отзывчивость и мобильная адаптация

Masonry адаптируется под разные разрешения экрана. Использование медиа-запросов совместно с изменением columnWidth позволяет создавать сетки, которые сохраняют аккуратное расположение на любых устройствах:

@media (max-width: 768px) {
  .grid-item {
    width: 100%;
  }
}
window.addEventListener('resize', () => {
  masonry.layout();
});

Советы по производительности

  • Минимизировать количество элементов в одном контейнере.
  • Использовать imagesLoaded только при необходимости.
  • Избегать тяжелых CSS-эффектов на каждом элементе сетки.
  • При большом объёме контента применять виртуализацию или пагинацию для оптимизации рендеринга.

Применение в портфолио

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

  • Автоматическая оптимизация пространства.
  • Поддержка динамически загружаемого контента.
  • Плавные анимации и визуальная гармония.
  • Лёгкая интеграция с фильтрацией по категориям и тегам.

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

Оглавление