Cacher is the code snippet organizer for pro developers

## 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');
});