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

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

Download Details:

Author: krybinski

GitHub: https://github.com/krybinski/gridify

#javascript #programming