Minimal Masonry Web Layout In Pure JavaScript – MiniMasonry.js

Category: Javascript , Layout , Recommended | April 4, 2023
Author:Spope
Views Total:395 views
Official Page:Go to website
Last Update:April 4, 2023
License:MIT

Preview:

Minimal Masonry Web Layout In Pure JavaScript – MiniMasonry.js

Description:

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

See also:

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

You Might Be Interested In:


Leave a Reply