Isotope - prepending items

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<p><button id="prepend-items">prepend items</button></p>

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

CSS

#container {
  padding: 5px;
  margin: 0 auto;
  border: 2px solid black;
  max-width: 259px;
}

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

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -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;
}

JavaScript

$(function(){
  
  var $container = $('#container'),
      createItems = function(){
        var items = '', widthClass, heightClass;
        for ( var i=0; i<3; i++ ) {
          widthClass = Math.random()*10 > 6 ? 'w2' : 'w1';
          heightClass = Math.random()*10 > 6 ? 'h2' : 'h1';
          items += '<div class="item ' + widthClass + ' ' + heightClass + '"/>'
        }
        return items;
      };
  
  $container.isotope({
    masonry: {
      columnWidth: 60
    },
    getSortData : {
      index : function( $item ) {
        return $item.index();
      }
    },
    sortBy : 'index'
  });
  
  $('#prepend-items').click(function(){
    var $newItems = $( createItems() );

    $container
      .prepend( $newItems )
      .isotope( 'addItems', $newItems )
      // update sort data for all items
      .isotope( 'updateSortData', $container.children() )
      // sort and apply new layout
      .isotope();
  });
  
});