Javascript Minimal Masonry Web Layout – MiniMasonry.js

The MiniMasonry.js is a dependency-free masonry layout library to create layout easily and quickly. It’s lightweight (1kb Gzipped) and minimal responsive plugin.

It automatically calculates elements (Such as div) position using Javascript and updates their positions using CSS3  transform attribute.

That means it does not trigger the browser layout and use the devices GPU. It also allows CSS animation during the element positioning.

You simply need to set the target width and it will automatically adjust the column number and elements width. The MiniMasonry increase the width of the element until another column can fit into the web layout but never reduce the target width.

How to Create Masonry Layout

You need to download the plugin and add require minimasonry.min.js file at the end of HTML file.

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

The HTML structure is simple and easy. You need to define the elements inside the container with different height.

You can keep the height as you wish for each element.

<div class="container example_size section_content">
    <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>

Initialize the MiniMasonry to create a default grid layout.

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

The plugin comes with handy functions which give you full control to customize. Like you can set the base width in pixels like this way:

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

The gutter function allows you to set the space between grid items.

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

Control whether to minify the grid layout.

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