pure-masonry-js
v0.2.9
Published
Masonry DOM effect with pure JavaScript
Downloads
37
Readme
Pure Masonry
Masonry DOM effect with pure JavaScript
Installation
npm install --save-dev pure-masonry
Usage
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
Please write issues, suggestions so this plugin can be improved