Minimal Masonry Web Layout In Pure JavaScript – MiniMasonry.js

Preview:

Description:

MiniMasonry.js is a lightweight (~3kb) JavaScript library to create a responsive, fluid, Masonry-style grid layout for modern web design.

See also:

• 10 Best jQuery/JavaScript Masonry Layout Plugins

How to use it:

The basic HTML structure for the grid layout.

<div class="example">
  <div class="item" style="height: 150px;">1</div>
  <div class="item" style="height: 50px;">2</div>
  <div class="item" style="height: 80px;">3</div>
  <div class="item" style="height: 100px;">4</div>
  <div class="item" style="height: 70px;">5</div>
  <div class="item" style="height: 50px;">6</div>
</div>

Download and place the minified version of the MiniMasonry.js at the end of the html file.

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

Initialize the MiniMasonry to generate a default grid layout.

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

Set the base width in pixels.

var myLayout = new MiniMasonry({
    container: '.default',
    baseWidth: 255,
});

Set the space between grid items.

var myLayout = new MiniMasonry({
    container: '.default',
    gutter: 10,
    // or
    gutterX: null,
    gutterY: null,
    ultimateGutter: 5, // Gutter applied when only 1 column can be displayed.
    surroundingGutter: true, // Set left gutter on first columns and right gutter on last.
});

Decide whether to minify the grid layout.

var myLayout = new MiniMasonry({
    container: '.default',
    minify: true
});

Set the sorting direction.

var myLayout = new MiniMasonry({
    container: '.default',
    direction: 'ltr', // or 'rtl'
    wedge: false, // False will start to sort from center, true will start from left or right according to direction parameter.
});

Refresh the layout in cases where new items are added.

myLayout.layout();

Destroy the instance.

myLayout.destroy();

Changelog:

v1.3.2 (04/04/2023)

• Bugfix

v1.3.1 (10/14/2022)

• Bugfix

v1.3.0 (10/31/2021)

• Added ‘wedge’ and ‘direction’ parameters.

v1.2.0 (05/18/2021)

• Added a destroy method to properly remove instances.

v1.1.6 (03/31/2021)

• Fixed container’s children retrieval.

v1.1.5 (08/13/2020)

• Fixed error on container height computing when surroundingGutter is set to false.
• Removed bottom gutter to be consistent with top behaviour. Gutters are applied on the sides but not on top / bottom.

v1.1.3 (07/03/2020)

• Added ES Module version: ‘minimasonry.esm.js’.

v1.1.2 (04/14/2020)

• Increased refresh rate to 30fps

v1.1.0 (04/14/2020)

• Updated responsive behaviour by adding ultimateReponsive parameters.

04/24/2019

• Cleaned useless condition