originLeft и originTop

Библиотека Packery используется для создания динамических сеток с элементами, которые можно перемещать и выравнивать по свободной форме. Одними из ключевых параметров, влияющих на позиционирование элементов в сетке, являются originLeft и originTop. Эти свойства определяют исходные точки отсчёта для расположения ячеек внутри контейнера.

originLeft

originLeft — это булевое значение, которое задаёт горизонтальный исходный угол, откуда начинается размещение элементов:

  • true (по умолчанию) — элементы располагаются слева направо.
  • false — элементы располагаются справа налево.

Применение этого свойства особенно полезно при создании интерфейсов для языков с направлением текста справа налево (например, арабский или иврит). При значении false Packery будет учитывать правый край контейнера как точку отсчёта, что позволяет сохранять правильное визуальное расположение.

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

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

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

originTop

originTop — булевое свойство, определяющее вертикальное направление размещения элементов:

  • true (по умолчанию) — элементы располагаются сверху вниз.
  • false — элементы располагаются снизу вверх.

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

Пример:

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

В этом случае первый добавленный элемент будет располагаться у нижнего края контейнера, а последующие элементы поднимутся вверх по мере добавления.

Взаимодействие originLeft и originTop

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

originLeft originTop Направление размещения
true true Слева направо, сверху вниз
false true Справа налево, сверху вниз
true false Слева направо, снизу вверх
false false Справа налево, снизу вверх

Комбинированное использование обеспечивает гибкость при адаптивном дизайне, особенно при изменении размеров контейнера или при динамическом добавлении/удалении элементов.

Динамическое изменение после инициализации

Packery позволяет изменять эти свойства даже после создания экземпляра сетки. Для этого используется метод option:

pckry.options.originLeft = false;
pckry.options.originTop = false;
pckry.layout(); // Перерасчет позиций элементов

После вызова layout() сетка пересчитывает позиции всех элементов с учётом новых точек отсчёта, что позволяет мгновенно изменять направление сетки без полного пересоздания экземпляра.

Практические советы по использованию

  • При использовании originLeft: false убедитесь, что CSS контейнера поддерживает правильное выравнивание текста и направление потока (direction: rtl), чтобы элементы выглядели корректно.
  • Для сеток с анимацией добавления/удаления элементов рекомендуется сохранять согласованность значений originLeft и originTop на протяжении всей работы страницы.
  • Комбинация originTop: false и вертикальных анимаций помогает создавать интерфейсы «снизу вверх», например для чат-приложений или журналов событий.

Эффективное использование originLeft и originTop позволяет полностью контролировать логику размещения элементов в сетке Packery, делая её гибкой для любых направлений и языковых требований.

Оглавление