Isotope + imageready - Instalação e Config Básica
## Bibliotecas
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.1/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
##HTML
<ul class="grid">
<li class="grid-sizer"></li>
<li class="gutter-sizer"></li>
<li class="grid-item">
<img src="">
</li>
<li class="grid-item">
<img src="">
</li>
<li class="grid-item grid-item-double">
<img src="">
</li>
</ul>
##CSS
.grid-sizer,.grid-item
{ width: 20%; }
.grid-item--width2
{ width: 40%; }
##JS
// init Isotope
var $grid = $('.grid').isotope({
// set itemSelector so .grid-sizer is not used in layout
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
// use element for option
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer'
}
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});