Masonry - basic item resizing

re https://github.com/desandro/masonry/issues/98

by akaimo

HTML

<script src="http://desandro.com/demo/masonry/jquery.masonry.min.js"></script>
<div id="container">

  <div class="box"><div class="box-title">NA Crude 2014</div><div class="box-body">go and get that sucka cuz it's now or never</div></div>
  <div class="box"><div class="box-title">NA Crude 2014</div></div>
  <div class="box"><div class="box-title">NA Crude 2014</div></div>
  <div class="box"><div class="box-title">NA Crude 2014</div></div>

  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS

#container {
    width:960px;
    border:1px solid #333333;
}
.box {
  width: 190px;
  height: 190px;
  margin: 5px;
  padding:20px;
  background: #cccccc;
  float: left;
}

.box-body {
  margin-top:30px;  
}

.box-title {
  width: 210px;
  padding:5px 10px;
  margin:-20px -20px;
  background: #777777;
  font-weight:bold;
  font-size:10px;
}

.box:hover {
  background: #eeeeee;
  cursor: pointer;
}

.box.large {
  background: #084;
  z-index: 2;
}

JavaScript

$(function(){

  var $container = $('#container');

  var reMasonry = function() {
    $container.masonry();
  };

  // trigger masonry
  $container.masonry({
    columnWidth: 100,
    animate: true
  });

  $('.box').click(function(){
    var $this = $(this),
        size = $this.hasClass('large') ?
          { width: 90, height: 90 } :
          { width: 190, height: 190 };
    $this.toggleClass('large').animate( size, reMasonry );
  });
});