Packery Documentation

You can include Packery in your project using several methods:

CDN

Link directly to the files on unpkg:

<script src="https://unpkg.com/packery@3/dist/packery.pkgd.js"></script>
<!-- or minified -->
<script src="https://unpkg.com/packery@3/dist/packery.pkgd.min.js"></script>

Package Managers

• npm: npm install packery --save
• Bower: bower install packery --save

Download

You can download the un-minified packery.pkgd.js or minified packery.pkgd.min.js directly from unpkg.

If your project uses jQuery, you can initialize Packery by calling the .packery() method on a jQuery selector.

$('.grid').packery({
  // options...
  itemSelector: '.grid-item'
});

Packery can be automatically initialized by adding a data-packery attribute to your container element. Configuration options can be provided as a JSON string within the attribute value.

<div class="grid" data-packery='{ "itemSelector": ".grid-item" }'>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

You can initialize Packery using the Packery constructor. You can pass either a DOM element or a selector string as the first argument.

// initialize with element
var grid = document.querySelector('.grid');
var pckry = new Packery(grid, {
  // options...
  itemSelector: '.grid-item'
});

// initialize with selector string
var pckry = new Packery('.grid', {
  // options...
});

Sorts the items in the layout based on their current position. The sorting direction (vertical or horizontal) depends on the horizontal option set during initialization.

sortItemsByPosition()

If you are using Draggabilly for dragging, you can bind its events to Packery to enable interactive reordering of items within the grid.

bindDraggabillyEvents(draggie) unbindDraggabillyEvents(draggie)

If you are using jQuery UI Draggable, you can bind its events to Packery to enable interactive reordering.

bindUIDraggableEvents($elems) unbindUIDraggableEvents($elems)

Use the fit() method to expand an element within the layout. Packery will position other items around it to accommodate the change. This is useful for expanding elements dynamically.

fit(elem, [x], [y])

• elem: The DOM element to fit.
• x (optional): The horizontal destination position.
• y (optional): The vertical destination position.

When an item is being fitted, Packery emits the fitComplete event once the item and the rest of the layout have finished updating.

Packery exposes its internal helper classes via the main constructor:

• Packery.Rect: Handles rectangle logic and collision detection (canFit).
• Packery.Packer: The core bin-packing algorithm engine.
• Packery.Item: Represents an individual item within the layout.