Packery – The gapless, draggable grid layouts library

Packery

The Packery Script creates in-packing layouts, which allows it to be used for draggable interactions. The script author also wrote the well-known Masonry script as well as the Isotope script. However, it’s also licensed under the GNU GPLv3 and chargeable for commercial non-open-source projects! It is also usable without the jQuery library but dropped the Internet Explorer 8/9 support in Version 2.0.0 (like the Masonry script did in 3.0.0).

Download the latest version of Packery as .ZIP or as .TAR package!

npm i packery --save

yarn add packery --save

bower install packery --save

Instructions

The Packery script is based on just a single JavaScript file, which is available as minified and normal version. But it still require some additional styles, depending on the used settings (see below)!

 

Load Packery

The single JavaScript file for the script can be located wherever you want, but we recommend to load it immediately after the started <body> tag.

<DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/packery.pkgd.min.js"></script>
    </body>
</html>

 

Configure Packery

This draggable Layout Library has some settings to configure the design and behavior, it may work also without any settings but it’s highly recommended to configure at least the itemSelector as well as the columnWidth options to prevent errors!

document.addEventListener("DOMContentLoaded", {
    var pckry = new Packery(".my-grid", {
        itemSelector:       ".grid-item",
        columnWidth:        undefined,
        rowHeight:          null,
        gutter:             0,
        percentPosition:    false,
        stamp:              undefined,
        horizontal:         false,
        originLeft:         true,
        originTop:          true,
        containerStyle:     null,
        transitionDuration: "0.4s",
        stagger:            30,
        shiftResize:        true,
        resize:             true,
        initLayout:         true
    });
});

 

Configure: Options

itemSelector
Specifies which child elements will be used as item elements in the layout. We recommend always setting itemSelector. itemSelector is useful to exclude sizing elements or other elements that are not part of the layout.
columnWidth
Aligns items to a horizontal grid. We recommend setting columnWidth. If columnWidth is not set, Masonry will use the outer width of the first item.
rowHeight
Aligns items to a vertical grid. rowHeight is not required for grid layouts, but may help align items when dragging items in a horizontal layout.
gutter
Adds horizontal space between item elements.
percentPosition
Sets item positions in percent values, rather than pixel values. percentPosition: true works well with percent-width items, as items will not transition their position on resize.
stamp
Specifies which elements are stamped within the layout. Masonry will layout items below stamped elements. The stamp option stamps elements only when the Masonry instance is first initialized. You can stamp additional elements afterwards with the stamp method.
horizontal
Lays out items horizontally instead of vertically.
originLeft
Controls the horizontal flow of the layout. By default, item elements start positioning at the left, with originLeft: true. Set originLeft: false for right-to-left layouts.
originTop
Controls the vertical flow of the layout. By default, item elements start positioning at the top, with originTop: true. Set originTop: false for bottom-up layouts. It’s like Tetris!
containerStyle
CSS styles that are applied to the container element.
transitionDuration
Duration of the transition when items change position or appearance, set in a CSS time format.
stagger
Staggers item transitions, so items transition incrementally after one another. Set as a CSS time format, ‘0.03s’, or as a number in milliseconds, 30.
shiftResize
Adjusts sizes and positions when window is resized. Enabled by default resize: true.
resize
Adjusts sizes and positions when window is resized.
initLayout
Enables layout on initialization. Set initLayout to false to disable layout on initialization, so you can use methods or add events before the initial layout.

Leave a Reply

Top