Minimal Masonry Web Layout In Pure JavaScript – MiniMasonry.js

Category: Javascript , Layout , Recommended | August 13, 2020
Author:Spope
Views Total:197 views
Official Page:Go to website
Last Update:August 13, 2020
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,
    ultimateGutter: 5 // Gutter applied when only 1 column can be displayed.
});

Decide whether to minify the grid layout.

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

Refresh the layout in cases where new items are added.

myLayout.layout();

Changelog:

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