Masonry DOM effect with pure JavaScript
Installation
npm install --save-dev pure-masonryUsage
1. Add pureMasonry.js to your project code and init the Plugin like shown below
<html>
<head></head>
<body>
... your html ...
<script type="text/javascript" src="path/to/pureMasonry.js"></script>
<script>PureMasonry.init();</script>
</body>
</html>OR
If you use webpack you can do
let PureMasonry = require('pure-masonry-js');
PureMasonry.init();2. Add a container wall to your html body with bricks inside: (The container's size is under your control, feel free to make it absolute (px) or relative (vw, vh, %).)
<div id="masonry-wall">
<div class="brick">
...
</div>
(more bricks... )
</div>! Important ! if you don't specify the options, then you need to use exact html as shown in the example above.
<script>
var options = {
container: '#masonry-wall',
width: 320,
horizontal_gutter: 5,
vertical_gutter: 5,
responsive: true,
transition: {
duration: '350ms',
easing: 'ease'
},
advanced: {
centered: true
}
};
PureMasonry.init(options);
</script>List of options:
By default you get a whole specturm of them, but you can control the options by passing an object as shown above
| Option | Default Value | Comments |
|---|---|---|
| container | #masonry-wall (String) | Accepts a javascript selector, it uses document.querySelectorAll(selector) |
| width | 320 (Integer) | Width of bricks. This will apply to all bricks. |
| horizontal_gutter | 5 (Integer) | horizontal spacing between bricks |
| vertical_gutter | 5 (Integer) | vertical spacing between bricks |
| responsive | true (Boolean) | The bricks will be initially built to fit the container, but the resize function will not be called on width change (window) |
| duration | 350ms (String) | Trainsition duration, can be 350ms 1s and etc... |
| easing | ease (String) | Default transition for css (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)). visit https://www.w3schools.com/css/css3_transitions.asp for info |
| centered | true (Boolean) | If you want the content of the masonry to be centered in the container (uses width to cal the needed space for bricks in a row) |
Please write issues, suggestions so this plugin can be improved