Author: | Spope |
---|---|
Views Total: | 106 views |
Official Page: | Go to website |
Last Update: | April 4, 2023 |
License: | MIT |
Preview:

Description:
MiniMasonry.js is a lightweight (~3kb) JavaScript library to create a responsive, fluid, Masonry-style grid layout for modern web design.
See also:
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, // or gutterX: null, gutterY: null, ultimateGutter: 5, // Gutter applied when only 1 column can be displayed. surroundingGutter: true, // Set left gutter on first columns and right gutter on last. });
Decide whether to minify the grid layout.
var myLayout = new MiniMasonry({ container: '.default', minify: true });
Set the sorting direction.
var myLayout = new MiniMasonry({ container: '.default', direction: 'ltr', // or 'rtl' wedge: false, // False will start to sort from center, true will start from left or right according to direction parameter. });
Refresh the layout in cases where new items are added.
myLayout.layout();
Destroy the instance.
myLayout.destroy();
Changelog:
v1.3.2 (04/04/2023)
- Bugfix
v1.3.1 (10/14/2022)
- Bugfix
v1.3.0 (10/31/2021)
- Added ‘wedge’ and ‘direction’ parameters.
v1.2.0 (05/18/2021)
- Added a destroy method to properly remove instances.
v1.1.6 (03/31/2021)
- Fixed container’s children retrieval.
v1.1.5 (08/13/2020)
- Fixed error on container height computing when surroundingGutter is set to false.
- Removed bottom gutter to be consistent with top behaviour. Gutters are applied on the sides but not on top / bottom.
v1.1.3 (07/03/2020)
- Added ES Module version: ‘minimasonry.esm.js’.
v1.1.2 (04/14/2020)
- Increased refresh rate to 30fps
v1.1.0 (04/14/2020)
- Updated responsive behaviour by adding ultimateReponsive parameters.
04/24/2019
- Cleaned useless condition