Javascript Minimal Masonry Web Layout – MiniMasonry.js

Category: Layout | May 23, 2019
Javascript Minimal Masonry Web Layout - MiniMasonry.js
Author: Spope
Official Page: Go to Website
Last Update:May 23, 2019
License:MIT

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
});

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.