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.