simple-masonry.js
Show items with different heights in a grid of responsive columns.
No position: absolute
and so fully flexible in height and width of any item.
Check demo.
simple-masonry.js is written as es6. If you are not using a es6-compiler in your project then use simple-masonry-compiled.js!
simple-masonry works great with bootstrap (but you can use your own grid as well!). Wrap some columns in a container and fill them with items. It dosn't matter if you put them all in one column or preorder them. simple-masonry will order all items from each column in a zipper method as you can see in the following snippet.
<!-- wrap columns --> <!-- columns 1 --> item 1 <!-- item 2 is allready in the second masonry-column --> <!-- item 3 is allready in the third masonry-column --> item 4 item 5 item 6 item 7 item 8 <!-- columns 2 --> item 2 <!-- columns 3 --> item 3 <!-- columns 4 -->
Create columns and set the column width with bootstrap classes (or other grid system) like usual. !important: set 'col-[]-12' classes! Also if it seems to be senseless in normal use.
In default you can use the css-class masonry-box
for the wrapping element and masonry-column
for columns. Items don't need a extra class. Every element will be ordered if it's not just a pure text-node.
Get simple-masonry and include it in your project.
npm
$ npm install simple-masonry -S
bower
$ bower install simple-masonry
You can use your own classes for wrapping element and columns if you put them as parameter.
Usage
var simpleM = ;
Or with your own selector.
var simpleM = masonryBox: '.my-box-class' masonryColumn: '.my-column-class';
Then run it
// init all and order itemssimpleM;
.append()
// add a node or an array of nodes at the end of all itemssimpleM;simpleM;
.prepend()
// add a node or a array of nodes at the beginning of all itemssimpleM;simpleM;
.get()
// get all items in an arraysimpleM;// get all items in an array of the column with this indexsimpleM;
.each()
// iterate trough all itemssimpleM;// or to all items of a single columnsimpleM; // tip: use native Array-iteratorsimpleM;
.columnsLength()
simpleM;// returns number of available columns
.on()
// register a eventListenersimpleM;simpleM;simpleM;
Demo and more information here.