lazy-masonry

A Simple Lazy Masonry for JavaScript

Getting Started

Installation

• with NPM

  $ npm install lazy-masonry

Demo

https://lazy-masonry.web.app

How to use it

It's a pretty easy to use this library. This is the usage example :

 
// 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: 'example-image.jpg'}, successCalback, errorCalback);
 
// this will add all elements of array
masonry.runWithArray([{uri: 'example-image.jpg'}, {uri: 'example-image.jpg'}]);
 
// you can listen to every click on elements
masonry.onclick((item) => {
    console.log(item);
});                
 

Contributors ✨

Rafael Muradyan 💻