MiniMasonry.js

MiniMasonry is a lightweight 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's CSS animation during element positioning.

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.

Installation

You can install MiniMasonry by cloning the repository, downloading the minified build/minimasonry.min.js or using npm :

npm install minimasonry

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

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

Or use the ESM :

import MiniMasonry from "minimasonry";

Usage

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 initialize MiniMasonry :

var masonry = new MiniMasonry({
    container: '.container'
});

Parameters

Here is the list of available parameters :

Name	Default value	Description
baseWidth	255	Target width of elements.
container	Null	Container selector or HTMLElement. Required
gutter	10	Width / height of gutter between elements. Use gutterX / gutterY to set different values.
gutterX	null	Width of gutter between elements. Need gutterY to works, fallback to "gutter".
gutterY	null	Height of gutter between elements. Need gutterX to works, fallback to "gutter".
minify	true	Whether or not MiniMasonry place elements on shortest column or keep exact order of list.
surroundingGutter	true	Set left gutter on first column and right gutter on last.
ultimateGutter	5	Gutter applied when only 1 column can be displayed.
direction	'ltr'	Sorting direction, "ltr" or "rtl".
wedge	false	False will start to sort from center, true will start from left or right according to direciton parameter.

API

Here is the list of available APIs :

Name	Description
layout()	If list has changed, trigger a relayout of the masonry.
destroy()	Remove the resize listener and set back container as it was before initialization.

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

Example

Default parameters :

var exampleDefault = new MiniMasonry({
    container: document.querySelector('.example_default')
});

Minify parameter set to false :

var exampleMinify = new MiniMasonry({
    container: '.example_minify',
    minify: false
});

Gutter an baseWidth :

var exampleSize = new MiniMasonry({
    container: '.example_size',
    gutter: 40,
    basewidth: 350
});

Direction :

var exampleDirection = new MiniMasonry({
    container: '.example_direction',
    direction: 'rtl'
});