Prepending content with masonry

For https://github.com/desandro/masonry/issues#issue/64

by vijayweb

HTML

<script src="https://github.com/desandro/masonry/raw/master/jquery.masonry.min.js"></script>
<p><button id="prepend">Prepend</button></p>

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

CSS

#container {
  padding: 2px;
  border: 1px solid
}

.item {
  width: 46px;
  height: 46px;
  margin: 2px;
  float: left;
  background: #888;
}

.item.w2 { width: 96px; }
.item.h2 { height: 96px; }

.item.new { background: red; }

JavaScript

var $container = $('#container'),http://jsfiddle.net/5Rhd6/#fork
    masonryOptions = { columnWidth: 50 };

$container.masonry( masonryOptions );

var i = 0;

$('#prepend').click(function(){
  i++;
  var $newItems = $('<div class="item w2 new">' + i + 
                    '</div><div class="item h2 new">' + i + 
                    '</div><div class="item new">' + i + '</div>');
  
  $container
     // clear out data cache
    .data('masonry', null)
    // prepend new items  
    .prepend( $newItems )
    // call masonry again, need to specify options again  
    .masonry( masonryOptions );
  
});