Working with masonry.js for aligning images like pintrest- @i-visionblog

Working with masonry.js for aligning images like pintrest & Aligning images using CSS is little bit a tough job as attractively like Facebook Search gallery, Pintrest posts with attractive way of showing images and updates.This masonry.js will work finely for image gallery with images of different sizes ,this would create and manage spaces efficiently and users would surely love this gallery made of masonry.js.It can be easily applied with minimum efforts and make efficient designs.Have a look at the design below.

Download Script files from here -Download

How simple we could code it ?

let us assume a div tag with class and child div containing images like this below.to maintain the image we are giving constant width as 300px and gallery size as width 1300px.
html code:

<div id="gallery" style="width:1300px;"> <!--- your gallery---- !>
<div class="gallerychild"><img src="path/to/your/first image" width="300" /></div>
<div class="gallerychild"><img src="path/to/your/second image" width="300" /></div>
<div class="gallerychild"><img src="path/to/your/third image" width="300" /></div>
<div class="gallerychild"><img src="path/to/your/fourth image" width="300" /></div>
</div>

now let us make the gallery look and allign neatly as pintrest gallery.applying jquery.masonry.min.js with respective arguments as options.

<script src="./jquery.js"></script>
<script src="./jquery.masonry.min.js"></script>
<script>
  $(function(){
    var $container = $('#gallery');
       $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.gallerychild'
      });
    });
   });
</script>

let us little CSS to our Image Gallery.

.gallerychild{
border: 1px solid #69F;
margin: 10px;
box-shadow: 0px 0.1px 0px 2px rgba(0, 0, 0, 0.3),  0px 5px 5px 0px rgba(0, 0, 0, 0.6); 
       height: auto; float:left;
 }

this will create a simple gallery with various size of image.this post will give you iniative only and for more options you must visit masonry.js official website for documentations and further versions.
feel free to comment below!