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.

Must Read – Masonry Gallery Layout Component for Vue.js

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.

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

Must Read – Mosaic Tiling with Lazy Image Loading Plugin

Parameters

Here is the list of available parameters :

NameDefault valueDescription
baseWidth (int)255Target width of elements.
container (string|HTMLElement)NullContainer’s selector or element. Required
gutter (int)10Width/height of gutter between elements. Use gutterX / gutterY to set different values.
gutterX (int)nullWidth of gutter between elements. Need gutterY to work, fallback to gutter.
gutterY (int)nullHeight of gutter between elements. Need gutterX to work, fallback to gutter.
minify (boolean)trueWhether or not MiniMasonry places elements on the shortest column or keeps the exact order of the list.
surroundingGutter (boolean)trueSet the left gutter on the first column and the right gutter on the last.
ultimateGutter (int)5A gutter is applied when only 1 column can be displayed.
direction (string)“ltr”Sorting direction, “ltr” or “rtl”.
wedge (boolean)falseFalse will start to sort from the center, true will start from left or right according to the direction parameter.

Must Read – An Interactive Vue Component That Displays Multiple Images

API

Here is the list of available APIs :

NameDescription
layout()If the list has changed, trigger a relayout of the masonry.
destroy()Remove the resize listener and set back the container as it was before initialization.

Read More – 

Pure Block Grid Layout In Pure CSS | wall.css
Create Pinterest-like Boards With Pure CSS | Boardz.css


See Demo And Download

Official Website(Spope): Click Here

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

Share