Minimalist dependancy free Masonry layout library

MiniMasonry is a lightweight (1kb Gzipped) dependancy free Masonry layout. It will compute elements position in Javascript and update their positions using css's transform attribute. This means positioning does not trigger browser layout and use the device's GPU. This also allow css animation during element positionning.

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.

Just include the minified version of MiniMasonry.js on your website :

<script src="minimasonry/build/minimasonry.min.js"></script>

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 = new MiniMasonry({
    container: '.masonry_transition'
});

Here is the list of available parameters :

Here is the list of available APIs :

MiniMasonry will add a "resize" event listener on the window to redraw the masonry on window resize. This listener is throttled to 66ms (15fps).

See website

MIT

Made by Spope