 |
| Minimal Grid Masonry Web Layout In JavaScript |
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
1. The basic HTML structure for the grid layout.
123456
2. Download and place the minified version of the MiniMasonry.js at the end of the html file.
<script src="build/minimasonry.min.js"></script>
3. Initialize the MiniMasonry to generate a default grid layout.
var myLayout = new MiniMasonry({
container: '.default'
});
4. Set the base width in pixels.
var myLayout = new MiniMasonry({
container: '.default',
baseWidth: 255,
});
5. 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.
});
6. Decide whether to minify the grid layout.
var myLayout = new MiniMasonry({
container: '.default',
minify: true
});
7. 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.
});
8. Refresh the layout in cases where new items are added.
myLayout.layout();
9. Destroy the instance.
myLayout.destroy();
Live Demo
See the Pen Minimal Grid Masonry Web Layout In JavaScript - MiniMasonry.js by Plugin JS (@teguhsigit)on CodePen.
File Info
- File Name :
- MiniMasonry.js-master.zip
- Size :
- 9.18KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT