Загрузка и подключение локальных файлов

Для работы с библиотекой Packery необходимо сначала подключить её скрипт и стили. Существует несколько способов подключения: через CDN или локально, сохранив файлы на сервере проекта. Использование локальных файлов позволяет полностью контролировать версию библиотеки и работу без зависимости от внешних ресурсов.

Структура проекта

Пример структуры проекта с локальными файлами Packery:

/project
│
├─ index.html
├─ js/
│  ├─ packery.pkgd.min.js
│  └─ app.js
└─ css/
   └─ styles.css

Здесь packery.pkgd.min.js — это минимизированная версия Packery, скачанная с официального репозитория, а app.js — собственный скрипт, где будет происходить инициализация сетки.

Подключение файлов в HTML

Локальный скрипт Packery подключается через тег <script> в HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример Packery</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>

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

<script src="js/packery.pkgd.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

Важно подключать packery.pkgd.min.js до вашего скрипта app.js, чтобы библиотека была доступна для инициализации.

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

Packery создаёт сетку на основе контейнера и элементов. В app.js инициализация выглядит следующим образом:

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

const pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10,
  percentPosition: true
});
  • itemSelector — селектор элементов внутри контейнера.
  • gutter — расстояние между элементами.
  • percentPosition — включает позиционирование с процентными значениями, что полезно при адаптивной верстке.

Работа с изображениями и асинхронной загрузкой

Packery может некорректно позиционировать элементы, если их размеры неизвестны до полной загрузки контента. Для работы с изображениями требуется дождаться их загрузки. Один из вариантов — использовать событие load для всех изображений:

const images = grid.querySelectorAll('img');
let loadedImages = 0;

images.forEach(img => {
  img.addEventListener('load', () => {
    loadedImages++;
    if (loadedImages === images.length) {
      pckry.layout();
    }
  });
});

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

const newItem = document.createElement('div');
newItem.classList.add('grid-item');
newItem.textContent = 'Новый элемент';
grid.appendChild(newItem);
pckry.appended(newItem);

Использование стилей для Packery

Чтобы элементы корректно располагались, важно задать размеры и отступы в CSS:

.grid {
  max-width: 800px;
  margin: 0 auto;
}

.grid-item {
  width: 200px;
  height: 200px;
  background-color: #8bc34a;
  border: 2px solid #ffffff;
  box-sizing: border-box;
}

При адаптивной верстке можно использовать процентные значения ширины элементов, что совместимо с percentPosition: true.

Локальные зависимости и обновления

Скачивание библиотеки локально обеспечивает:

  • Контроль версий и совместимости с проектом.
  • Возможность работы без подключения к интернету.
  • Возможность модификации исходного кода библиотеки при необходимости.

Обновление локальной версии требует повторного скачивания актуальной сборки и замены файла packery.pkgd.min.js.

Итоговые рекомендации

  • Подключение локальных файлов позволяет полностью контролировать работу Packery.
  • Инициализация сетки должна происходить после загрузки DOM и всех изображений.
  • Для динамически добавляемых элементов использовать метод appended.
  • Правильная настройка CSS критична для корректного отображения сетки.

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

Оглавление