Isotope - appending items

Re https://github.com/desandro/isotope/issues/92

by Reusablecode

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<button id="more">append more items</button>

<div id="container">
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item w2 h2"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item h2"></div>
  <div class="item w2 h2"></div>
</div>

CSS

#container {
  padding: 5px;
  margin: 0 auto;
  border: 2px solid black;

}

.item {
  float: left;
  background: #CCC;
  margin: 5px;
  width: 50px;
  height: 50px;
}
.item.w2 { width: 110px; }
.item.h2 { height: 110px; }

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
          transition-duration: 0s;
}

JavaScript

$(function(){
  
  var $container = $('#container');
  
  $container.isotope({
    masonry: {
      columnWidth: 60
    }
  });
  
    
  $('#more').click(function(){
    var html = '<div class="item"></div><div class="item w2"></div><div class="item"></div>';
    var newItems = $(html);
    $container.append(newItems)
      .isotope('appended',newItems);
  });
 
});