grid-gallery
JavaScript grid gallery to produce un-equal cols grid
Installation:
-
via npm grid gallery can be used via CommonJS or AMD after installation via npm.
$ npm install --save grid-gallery
-
bower
$ bower install --save grid-gallery
usage:
the container must have grid-gallery
class and the grid items grid-gallery__item
in browser
... <!-- grid container --> <!-- grid item --> <!-- some content --> <!-- grid item --> <!-- some content --> .... ...
CJs
var GridGallery = ; var options = ... var myGrid = document options;
ES6
; var options = ... var myGrid = document options;
AMD
options:
var options = direction: 'right' // left is default for ltr and right for rtl. watch: true // false by default, and if set to true // it will watch DOM changes // and update positions if grid item inserted/removed // callbacks { ... } // called before init. { ... } // called after init. { ... } // called before update after 'resize' event as example. { ... } // called after updated. { ... } // called before setting position of grid items { ... } // called after positioning the grid items
methods
update
it will reposition the grid itemsdestroy
it will clear the positions, reset all options and remove event handlers.