Gridify

Lightweight, simple and pure javascript plugin that creates a Pinterest-like grid.

Usage

Add script tag before your closing </body> tag:

<script src="gridify.min.js"></script>

Settings

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);

Events

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);