Minimalist dependancy free Masonry layout library
MiniMasonry is responsive, you give it a target width and it will adjust columns number and elements width. MiniMasonry will increase element width (until another column can fit in the layout) but will never reduce the target width.
You can install MiniMasonry by cloning the repository, downloading the build type (minimasonry.min.js / minimasonry.esm.js) or using npm :
npm install minimasonry
Then, include the minified version of MiniMasonry.js on your website :
or use it via ESM :
To use MiniMasonry you should have a container relatively positioned with your elements as children. Those children elements must be absolutely positioned.
Then you can initialise MiniMasonry :
var masonry =container: '.masonry_transition';
Here is the list of available parameters :
|baseWidth (int)||255||Target width of elements.|
|container (string)||Null||Container selector. Required|
|gutter (int)||10||Width / height of gutter between elements. Use gutterX / gutterY to set different values.|
|gutterX (int)||null||Width of gutter between elements. Need gutterY to works, fallback to
|gutterY (int)||null||Height of gutter between elements. Need gutterX to works, fallback to
|minify (boolean)||true||Whether or not MiniMasonry place elements on shortest column or keep exact order of list.|
|surroundingGutter (boolean)||true||Set left gutter on first columns and right gutter on last.|
|ultimateGutter (int)||5||Gutter applied when only 1 column can be displayed.|
Here is the list of available APIs :
|layout()||If list has changed, trigger a relayout of the masonry|
MiniMasonry will add a "resize" event listener on the window to redraw the masonry on window resize. This listener is throttled to 66ms (15fps).
Made by Spope