jQuery Masonry Example

by dhavaljani

HTML

<script src="http://designshack.net/tutorialexamples/masonry/jquery.masonry.min.js"></script>
<div id="container">
    <div class="masonryImage">
        <img src="http://lorempixum.com/200/200/food/1" alt="" />
    </div>
         
    <div class="masonryImage">
        <img src="http://lorempixum.com/200/150/food/10" alt="" />
    </div>
         
    <div class="masonryImage">
        <img src="http://lorempixum.com/200/250/food/3" alt="" />
    </div>     
          <div class="masonryImage">
              <img src="http://lorempixum.com/200/250/food/4" alt="" />
    </div>     
                <div class="masonryImage">
                    <img src="http://lorempixum.com/200/250/food/5" alt="" />
    </div>     
                      <div class="masonryImage">
                          <img src="http://lorempixum.com/200/250/food/1" alt="" />
    </div>     
      <div class="masonryImage">
          <img src="http://lorempixum.com/200/250/food/10" alt="" />
    </div>     
        <div class="masonryImage">
        <img src="http://lorempixum.com/200/200/food/1" alt="" />
    </div>
         
    <div class="masonryImage">
        <img src="http://lorempixum.com/200/150/food/10" alt="" />
    </div>
         
    <div class="masonryImage">
        <img src="http://lorempixum.com/200/250/food/3" alt="" />
    </div>     
          <div class="masonryImage">
              <img src="http://lorempixum.com/200/250/food/4" alt="" />
    </div>     
                <div class="masonryImage">
                    <img src="http://lorempixum.com/200/250/food/5" alt="" />
    </div>     
                      <div class="masonryImage">
                          <img src="http://lorempixum.com/200/250/food/1" alt="" />
    </div>     
      <div class="masonryImage">
          <img src="http://lorempixum.com/200/250/food/10" alt="" />
    </div>     
</div>

CSS

#container {
    width: 1200px;
    margin: 0 auto;
}
 
/*Media Queries*/
@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
    #container {
        width: 1000px;
    }
}
 
 
@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
    #container {
        width: 800px;
    }
}
 
@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
    #container {
        width: 600px;
    }
}
 
@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
    #container {
        width: 400px;
    }
}
 
@media only screen and (max-width : 399px),
only screen and (max-device-width : 399px){
    #container {
        width: 200px;
    }
}
.masonryImage {
    margin-right: 5px;
}

JavaScript

$(function(){
 
    var $container = $('#container');
   
    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.masonryImage'
      });
    });
   
  });