Press "Enter" to skip to content

Minimalist Dependency-Free Masonry Layout Library | MiniMasonry.js

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.

How to make use of it:

The fundamental HTML structure for the grid format.

<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 model 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 format.

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

Set the bottom width in pixels.

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

Set the space between grid objects.

var myLayout = new MiniMasonry({
    container: '.default',
    gutter: 10,
    ultimateGutter: 5 // Gutter applied when only 1 column can be displayed.
});

Decide whether or not to minify the grid format.

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

Refresh the layout in instances where new objects are added.

myLayout.layout();

Minimal Masonry Web Layout, MiniMasonry.js Plugin/Github


See Demo And Download

Official Website(Spope): Click Here

This superior jQuery/javascript plugin is developed by Spope. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *