Js-masonry NPM

Vanilla Js library to lay elements in masonry grid in optimal positions and which auto adjusts margin between bricks based on residual space

🏠 Homepage

Install

npm install js-masonry

Script Tag

Dowload and include following file:

js-masonry.js

Options

const mas = new jsMasonry('selector/s',
                                      { 
                                        elSelector: string, 
                                        elWidth:number, 
                                        elMargin:number, 
                                        heightSort:string,
                                        percentWidth:boolean, 
                                        callBack : function
                                        })

First Parameter : one or multple selector to apply masonry. ('Refer to querySelectorAll')

Second Parameter :

elSelector : String, (Optional, Element to be used as base brick default first element)
elWidth : Number, (Optional, Width for bricks, deafult elSelector or first element width )
heightSort:string,('ASC' for ascending height, 'DESC' for descending,do not set for as it is)
elMargin : Number, (Optional, Minimum hotizontal and vertical margin between bricks)
percentWidth : Boolen, (Optional, Use percent width set with CSS, deafult:true, Note: do not use elSelector)
callBack : Function (Optional, Function to call after all bricks are lay which get selected element object as parameter1)



Note 1 : Initialize carousel inside script tag on window onload or footer.
Note 2 : If multiple masnory is layed each will get respective element object as callback parameter.
Note 3 : To apply masonry after adding  bricks apply mas.layBrks(el), where el is object (see querySelector)