@squarespace/layout-autocolumns v1.0.3
Squarespace Layout: Autocolumns
A module to lay out a group of elements in an autocolumns-style (i.e., masonry) grid.
NOTICE: This code is licensed to you pursuant to Squarespace’s Developer Terms of Use. See license section below.
Usage
npm install --save @squarespace/layout-autocolumns;
const Autocolumns = require('@squarespace/layout-autocolumns');
const grid = new Autocolumns(rootNode, {
config
});
Using ES6
If you prefer to handle transpiling and polyfilling on your own, you can import ES6 from Mercury:
import Autocolumns from '@squarespace/layout-autocolumns/src';
Alternately, Autocolumns specifies a module
property in package.json
that points to the uncompiled src/index.js
, so you may be able to simply import @squarespace/layout-autocolumns
if you're using one of the following bundlers:
Reference
new Autocolumns(rootNode, {config})
Params
- rootNode
Node
- Wrapper around the whole grid (required) - config
Object
- Config object - config.childNodes
String
- Class name of the elements to be placed (required) - config.imageNodes
String
- Class name of the parent wrapper around each image - config.gutter
Number
- Space between each item (in pixels; default5
) - config.minColumns
Number
- Smallest number of columns the modules will create (default1
) - config.maxColumns
Number
- Largest number of columns the module will create (default12
) - config.minColumnWidth
Number
- Minimum width for each column (in pixels; default300
) - config.afterChildLoaded
Function
- Callback function run after each child is loaded - config.autoLoadImages
Boolean
- Set totrue
for the module to handle image loading (defaultfalse
)
Autocolumns.layout(config)
Lays out the grid with existing parameters. Can also pass new parameters when called.
Autocolumns.afterResize()
Function to call after resize event. Calls Autocolumns.reset()
then Autocolumns.layout()
.
Autocolumns.reset()
Resets styles on all children.
Autocolumns.destroy()
Resets styles on wrapper and all children and removes the module classes.
License
Portions Copyright © 2016 Squarespace, Inc. This code is licensed to you pursuant to Squarespace’s Developer Terms of Use, available at http://developers.squarespace.com/developer-terms-of-use (the “Developer Terms”). You may only use this code on websites hosted by Squarespace, and in compliance with the Developer Terms. TO THE FULLEST EXTENT PERMITTED BY LAW, SQUARESPACE PROVIDES ITS CODE TO YOU ON AN “AS IS” BASIS WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED.