Bootstrap 3 Image gallery with varying heights

This is a simple Bootstrap 3 image gallery with varying image heights to demonstrate how to clear floats using the clearfix helper and visibility utility classes.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/unveil/1.3.0/jquery.unveil.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.1.1/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<div id="masonry">
  <ul>
      <li>
  <img width="200" height="300" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-src="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" alt="Stanley" />
    </li>
     <li>
  <img width="150" height="300" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-src="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" alt="Stanley" />
    </li>

     <li>
  <img width="150" height="200" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-src="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" alt="Stanley" />
    </li>
     <li>
  <img width="150" height="200" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-src="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" alt="Stanley" />
    </li>
        <li>
  <img width="200" height="300" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-src="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" alt="Stanley" />
    </li>
     <li>
  <img width="150" height="300" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-src="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" alt="Stanley" />
    </li>
     <li>
  <img width="150" height="200" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-src="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" alt="Stanley" />
    </li>
     <li>
  <img width="150" height="200" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif"...

CSS

#masonry{
  clear:both
}
#masonry li{
  border:2px solid black;
  float:left;
  list-style:none;
  width:20%;
    margin:10px;
 }
#masonry li:nth-child(2n+3){
  height:300px;

  }

#masonry img{
  display:block;
  opacity: 0;
  transition: all 0.3s ease-in;
  width:100%;height:auto;
}

JavaScript

$(document).ready(function () {
   
    $("img").unveil(50, function() {
    var $container = $('#masonry').imagesLoaded( function() {
    $container.isotope({
        itemSelector: 'ul li',
        transitionDuration: 0
    });
   });
      $(this).load(function() {
        this.style.opacity = 1;
      });
    });
});