How To Use Lazy Masonry!
It is very simple. You can enable it by adding script tag or via npm.
<script src="https://lazy-masonry.web.app/lazy-masonry-min.js"></script>
OR
npm i lazy-masonry
// for the first add this div tag inside body
<div id="lazy-masonry"></div>
// add this line only if installed via npm
import LazyMasonry from 'lazy-masonry';
// creating object masonry, you can pass options to it
var masonry = new LazyMasonry('lazy-masonry', {
images: 5,
width: 800,
animateable: true,
animationType: 'from-top',
animationDuration: '1s'
});
animation types are [from-top, from-top-left, from-top-right, from-right, from-left, from-bottom]
// now you have masonry object and can add images to it
// this will add one element
masonry.add({uri: 'some-image.jpg'}, successCalback, errorCalback);
// this will add all elements of array
masonry.runWithArray([{uri: 'some-image.jpg'}, {uri: 'some-image.jpg'}]);
// you can listen to every click on elements
masonry.onclick((item) => {
console.log(item);
});
