Placeholder-элементы

В библиотеке Packery placeholder-элементы играют ключевую роль при динамическом изменении сетки. Они позволяют управлять визуальным пространством, занимаемым элементами до того, как контент полностью загружен или элементы перемещены. Использование placeholder обеспечивает плавное заполнение сетки и предотвращает «прыжки» блоков при изменении размеров контейнера или добавлении новых элементов.

Создание placeholder-элемента

Placeholder создается как обычный HTML-элемент с заранее заданными размерами. Основное отличие — отсутствие содержимого или использование минимального контента, который не влияет на итоговый макет. Например:

<div class="grid">
  <div class="grid-item">Контент 1</div>
  <div class="grid-item placeholder"></div>
  <div class="grid-item">Контент 2</div>
</div>

.grid-item.placeholder {
  background-color: rgba(0,0,0,0.05);
  width: 200px;
  height: 150px;
}

Ключевые моменты:

Размеры placeholder должны соответствовать предполагаемому элементу, чтобы Packery корректно рассчитывал расположение соседних блоков.
Placeholder может быть как фиксированного размера, так и адаптивным при использовании width: 100% и динамических высот.

Регистрация placeholder в Packery

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

const grid = document.querySelector('.grid');
const pckry = new Packery(grid, {
  itemSelector: '.grid-item:not(.placeholder)',
  gutter: 10
});

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

Динамическое управление placeholder

Packery поддерживает методы appended, prepended и layout для динамического обновления сетки. Placeholder легко интегрировать с этими методами:

// Добавление placeholder перед загрузкой контента
const placeholder = document.createElement('div');
placeholder.className = 'grid-item placeholder';
grid.appendChild(placeholder);
pckry.appended(placeholder);

// Удаление после загрузки данных
placeholder.remove();
pckry.layout();

Особенности динамического управления:

Сетку можно перезапускать после удаления или изменения placeholder без полного пересоздания контейнера.
Packery автоматически перераспределяет оставшиеся элементы, занимая освободившееся пространство.

Placeholder и анимации

Для плавной анимации сетки при появлении контента рекомендуется сочетать placeholder с CSS-переходами:

.grid-item {
  transition: transform 0.4s, width 0.4s, height 0.4s;
}

При удалении placeholder элементы постепенно смещаются на его место.
Использование transition предотвращает резкие скачки и делает работу сетки визуально приятной.

Комбинирование с изображениями и медиа

Placeholder особенно полезен при работе с изображениями, которые загружаются асинхронно. Для корректного расчета размеров:

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

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