Minimalist Dependency-Free Masonry Layout Library

MiniMasonry is a lightweight (1kb Gzipped) Masonry layout (stone design) and has dependency-free. It will calculate the positions of the elements in Javascript and update their positions using the CSS transform attribute. This means that positioning does not trigger the browser layout and the device’s GPU usage. This also allows moving the css while positioning the element.

MiniMasonry is very responsive, you give it a target width and it will adjust the column number and the width of the elements. MiniMasonry.js will increase the width of the element (so that another column can fit in the layout) but it will never reduce the width of the target.

Must Read: A Javascript Plugin for Filtering Items from a ‘Masonry’ Grid | Isolde

Table of Contents

How to make use of it:

1. You can install MiniMasonry by cloning the repository, downloading the build type (minimasonry.min.js / minimasonry.esm.js), or using npm:

npm install minimasonry

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

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

3. Or use it over ESM:

import MiniMasonry from "minimasonry";

4. To use MiniMasonry you need to have a relatively placed container with your items as babies. These children’s items must be placed absolutely.

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

Parameters

Here is the list of available parameters:

Must Read: Responsive And Lightweight Masonry Grid jQuery Plugin

Name	Default value	Description
baseWidth (int)	255	Target width of elements.
container (string\|HTMLElement)	Null	Container’s selector or element. 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 work, fallback to `gutter`.
gutterY (int)	null	Height of gutter between elements. Need gutterX to work, fallback to `gutter`.
minify (boolean)	true	Whether or not MiniMasonry places elements on the shortest column or keeps the exact order of the list.
surroundingGutter (boolean)	true	Set the left gutter on the first column and the right gutter on the last.
ultimateGutter (int)	5	A gutter is applied when only 1 column can be displayed.
direction (string)	“ltr”	Sorting direction, “ltr” or “rtl”.
wedge (boolean)	false	False will start to sort from the center, and true will start from left or right according to the direction parameter.

API

Here is the list of available APIs :

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