Minimal Masonry Web Layout In Pure JavaScript – MiniMasonry.js

Category: Javascript , Layout , Recommended | December 7, 2017
Author: Spope
Views Total: 601
Official Page: Go to website
Last Update: December 7, 2017
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.

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

Decide whether to minify the grid layout.

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

Leave a Reply