Таймлайны и истории

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

В основе работы лежит расчёт позиции каждого элемента на основании высоты предыдущих элементов в колонках. При добавлении нового блока Masonry определяет колонку с наименьшей текущей высотой и помещает в неё элемент. Такой подход делает сетку адаптивной и позволяет динамически изменять её при изменении контента.

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

Таймлайны и анимация элементов

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

gsap.timeline()
  .from('.grid-item', {
    opacity: 0,
    y: 50,
    stagger: 0.1,
    duration: 0.6
  });
  • stagger — задержка между анимацией каждого последующего элемента.
  • duration — длительность анимации.
  • y — смещение по вертикали.
  • opacity — прозрачность для эффекта появления.

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

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

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

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

Masonry предоставляет методы append, prepend, remove, которые позволяют динамически управлять содержимым сетки. При этом важно вызывать layout() после изменений для перерасчёта расположения:

// Добавление нового элемента
var newItem = document.createElement('div');
newItem.classList.add('grid-item');
grid.appendChild(newItem);
msnry.appended(newItem);
msnry.layout();

// Удаление элемента
var itemToRemove = grid.querySelector('.grid-item');
msnry.remove(itemToRemove);
msnry.layout();

Для динамических историй или таймлайнов, где элементы появляются последовательно, можно комбинировать append с анимацией появления через GSAP:

gsap.from(newItem, { opacity: 0, y: 30, duration: 0.5, onComplete: () => msnry.layout() });

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

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

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

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

Стилизация и адаптивные колонки

Для корректной работы сетки часто используют элемент sizier или задают ширину колонки через CSS:

.grid {
  display: flex;
  flex-wrap: wrap;
}
.grid-item {
  width: 200px;
  margin-bottom: 10px;
}

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

@media (max-width: 768px) {
  .grid-item {
    width: 45%;
  }
}

Masonry автоматически перестроит сетку под новые размеры элементов при вызове layout().

Интеграция с таймлайнами событий

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

  • Последовательное появление: использовать stagger в GSAP.
  • Динамическая вставка: добавлять элементы по мере события через append.
  • Поддержка разных высот: Masonry автоматически уплотняет сетку.

Пример создания таймлайна с событиями:

var events = document.querySelectorAll('.event-item');
var tl = gsap.timeline({ defaults: { opacity: 0, y: 50, duration: 0.5 } });

events.forEach(event => {
  tl.to(event, { opacity: 1, y: 0, onComplete: () => msnry.layout() });
});

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

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

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

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

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

Ключевые методы Masonry

  • layout() — перерасчёт всех элементов сетки.
  • appended(elements) — добавление новых элементов в сетку.
  • prepended(elements) — добавление элементов в начало сетки.
  • remove(elements) — удаление элементов.
  • destroy() — полное отключение Masonry для контейнера.
  • reloadItems() — обновление информации о позициях всех элементов.

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

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

  1. Новостная лента с карточками разного размера.
  2. Фотогалерея с анимацией появления каждого изображения.
  3. История проекта с поэтапным появлением блоков.
  4. Таймлайн событий с анимацией и динамическим добавлением новых элементов.

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

Оглавление