0.2.9 • Published 7 years ago
pure-masonry-js v0.2.9
Pure Masonry
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
Please write issues, suggestions so this plugin can be improved