Учебник Packery

Введение
- Что такое Packery
- История и развитие библиотеки
- Сравнение с аналогами
- Когда использовать Packery
- Системные требования и совместимость
Установка и начало работы
- Подключение через CDN
- Установка через npm
- Установка через Bower
- Загрузка и подключение локальных файлов
- Проверка корректности установки
Базовая инициализация
- Инициализация через JavaScript
- Инициализация через HTML-атрибуты
- Выбор контейнера
- Определение элементов сетки
- Параметры инициализации по умолчанию
Основные опции
- itemSelector
- columnWidth
- rowHeight
- gutter
- percentPosition
- stamp
- horizontal
- originLeft и originTop
- containerStyle
- transitionDuration
- stagger
- resize
- initLayout
Работа с элементами
- Добавление элементов
- Удаление элементов
- Перемещение элементов
- Изменение размеров элементов
- Обновление позиций после изменений
- Работа с динамическим контентом
Размещение элементов
- Алгоритм упаковки
- Направление размещения
- Заполнение пробелов
- Выравнивание элементов
- Контроль переполнения
- Фиксированные элементы
Сетка и колонки
- Настройка ширины колонок
- Адаптивная сетка
- Процентные значения
- Фиксированные значения
- Комбинированные подходы
- Отступы между элементами
Методы экземпляра
- appended
- prepended
- addItems
- remove
- layout
- layoutItems
- unstamp
- destroy
- reloadItems
- getItemElements
- on и off
События
- layoutComplete
- dragItemPositioned
- fitComplete
- removeComplete
- Подписка на события
- Отписка от событий
- Контекст обработчиков событий
- Передача данных в события
Drag and Drop
- Подключение Draggabilly
- Подключение jQuery UI Draggable
- Настройка перетаскивания
- Ограничение области перетаскивания
- События при перетаскивании
- Snap-эффекты
- Конфликты с другими элементами
Адаптивность и медиазапросы
- Изменение параметров под разные разрешения
- Пересчет layout при ресайзе
- Отключение адаптивности
- Breakpoints и условия
- Мобильная оптимизация
Анимация и переходы
- Настройка продолжительности анимации
- CSS transitions
- Отключение анимации
- Задержка между элементами
- Кастомные анимации
- Производительность анимаций
Изображения и асинхронный контент
- Проблема загрузки изображений
- Использование imagesLoaded
- Ожидание загрузки контента
- Предзагрузка изображений
- Placeholder-элементы
- Ленивая загрузка
Фильтрация и сортировка
- Интеграция с Isotope
- Показ и скрытие элементов
- Изменение порядка элементов
- Комбинирование фильтров
- Анимация при фильтрации
Производительность
- Оптимизация большого количества элементов
- Виртуализация
- Debounce и throttle для событий
- Минимизация перерасчетов
- Работа с DOM
- Профилирование и отладка
Стилизация
- CSS для контейнера
- CSS для элементов
- Переходы и трансформации
- z-index и наложения
- Тени и эффекты
- Адаптивные стили
Интеграция с фреймворками
- Vanilla JavaScript
- jQuery
- React
- Angular
- Особенности работы с виртуальным DOM
Доступность
- Семантическая разметка
- ARIA-атрибуты
- Навигация с клавиатуры
- Screen readers
- Фокус и табуляция
Отладка и решение проблем
- Частые ошибки
- Проблемы с инициализацией
- Неправильное позиционирование
- Конфликты стилей
- Баги с размерами
Продвинутые техники
- Вложенные сетки
- Асимметричные элементы
- Динамическое изменение опций
- Программное управление позициями
- Кастомные алгоритмы размещения
- Синхронизация нескольких экземпляров
Расширение функционала
- Написание плагинов
- Кастомные методы
- Интеграция сторонних библиотек
Миграция и обновление
- Переход с предыдущих версий
- Изменения в API
- Устаревшие методы и опции
- Обратная совместимость