Lightweight, simple and pure javascript plugin that creates a Pinterest-like grid.
Add script tag before your closing </body>
tag:
<script src="gridify.min.js"></script>
Option | Type | Default | Description |
---|---|---|---|
containerSelector | string | .grid | Selector for grid items container |
itemSelector | string | .grid--item | Selector for grid item |
columnSelector | string | .grid--column | Selector for grid column |
resizable | boolean | true | Enables window resize event |
Initialize without options:
const gridify = new Gridify();
Initialize with options:
const defaultOptions = {
containerSelector: '.grid', // selector for items container
itemSelector: '.grid--item', // selector for item
columnSelector: '.grid--column', // selector for column
resizable: true, // re-draw layout if window resize
}
const gridify = new Gridify(defaultOptions);
Add handler on a container element
Event | Parameters | Description |
---|---|---|
gridify:init | $event | Dispatched after plugin init |
gridify:resized | $event | Dispatched after grid resized |
Usage example:
const container = document.querySelector('.grid');
container.addEventListener('gridify:init', (ev) => {
console.log('Init handler');
}, false);
container.addEventListener('gridify:resized', (ev) => {
console.log('Resized handler');
}, false);