Проверка корректности установки

После установки библиотеки Packery необходимо убедиться, что она интегрирована в проект корректно и готова к использованию. Проверка корректности установки включает несколько ключевых шагов: подключение скриптов, инициализацию сетки и базовое тестирование функционала.

Подключение скриптов

Packery может быть подключена как через CDN, так и локально. Для проверки корректности важно убедиться, что браузер загружает библиотеку без ошибок. Пример подключения через CDN:

<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>

Для локальной версии:

<script src="path/to/packery.pkgd.min.js"></script>

Проверка: открыть консоль браузера и убедиться, что нет ошибок Failed to load resource или Uncaught ReferenceError: Packery is not defined.

Создание тестовой сетки

Следующий шаг — создание минимального HTML-контейнера и элементов для проверки работы Packery:

<div id="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>

И соответствующие CSS-правила:

#grid {
  width: 600px;
}

.grid-item {
  width: 100px;
  height: 100px;
  background: #3498db;
  margin: 5px;
  float: left;
}

Задача: убедиться, что контейнер и элементы визуально отображаются на странице, что подтверждает корректность HTML и CSS.

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

После подтверждения, что скрипт загружен, выполняется инициализация Packery:

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

Проверка: элементы должны перестроиться в сетку с учетом отступов gutter. Если элементы остаются неупорядоченными, необходимо проверить:

  1. Корректность селектора контейнера и элементов.
  2. Наличие всех стилей для правильного отображения размеров элементов.
  3. Ошибки в консоли браузера.

Тестирование функциональности

После базовой инициализации проверяется работа основных возможностей:

  1. Drag & Drop Для проверки перетаскивания элементов подключается Draggabilly (если требуется интерактивность):

    <script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>
    var itemElems = grid.querySelectorAll('.grid-item');
itemElems.forEach(function(itemElem) {
  var draggie = new Draggabilly(itemElem);
  pckry.bindDraggabillyEvents(draggie);
});

    Перетаскивание элементов должно корректно перестраивать сетку.

  2. Методы Packery Проверка основных методов:

    pckry.layout(); // пересборка сетки
console.log(pckry.items.length); // вывод количества элементов

    Результат должен соответствовать количеству элементов в DOM. Любые расхождения указывают на ошибки инициализации.

Проверка совместимости

Важно убедиться, что Packery работает корректно во всех целевых браузерах. Основные моменты:

  • Поддержка CSS-свойств transform и position: absolute для корректного расположения элементов.
  • Проверка адаптивности при изменении ширины контейнера:
window.addEventListener('resize', function() {
  pckry.layout();
});
  • Совместимость с другими библиотеками, использующими CSS-флоаты или позиции элементов.

Отладка ошибок

Наиболее частые проблемы при проверке установки:

  1. Packery не загружается – ошибка в пути к скрипту, неверная версия.
  2. Элементы не выстраиваются – неверный itemSelector или отсутствие размеров у элементов.
  3. Методы не работают – объект Packery не создан из-за ошибки инициализации.

Для отладки рекомендуется использовать консоль браузера и проверять объект Packery:

console.log(Packery); // должен вернуть функцию конструктора

Если объект определен, библиотека установлена корректно.

Резюме проверки

Для подтверждения корректной установки Packery проверяется:

  • Подключение скрипта без ошибок.
  • Отображение контейнера и элементов.
  • Инициализация объекта Packery и перестройка сетки.
  • Работа методов и интерактивности (если подключен Draggabilly).
  • Адаптивность и совместимость с браузерами.

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

Оглавление