JSFiddle - React, Tailwind, and code Playground

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">Executive Summaries</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 class="box-title">NA Crude Infobase</div></div>
  <div class="box"><div class="box-title">NA Crude Infobase</div></div>
  <div class="box"><div class="box-title">NA Crude Infobase</div></div>
  <div class="box"><div class="box-title">NA Crude Infobase</div></div>

  <div class="box"><div class="box-title">NA Crude Tracking</div></div>
  <div class="box"><div class="box-title">NA Crude Tracking</div></div>
  <div class="box"><div class="box-title">NA Crude Tracking</div></div>
  <div class="box"><div class="box-title">NA Crude Tracking</div></div>
</div>

CSS

#container {
    width:960px;
    border:1px solid #333333;
    background-color: #eeeeee;
    padding: 1em;
    font-family:helvetica,arial,sans-serif;
}
.box {
  width: 188px;
  height: 188px;
  margin: 5px;
  padding:20px;
  float: left;
    background: none repeat scroll 0 0 #E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 1px 1px #F6F6F6 inset;
    color: #333333;
    font: bold 10px;
    text-align: center;
}

.box-body {
  margin-top:30px;  
  text-shadow: 0 1px 0 #FFFFFF;
}

.box-title {
  width: 208px;
  padding:5px 10px;
  margin:-20px -20px;
  background: #999999;
  font-weight:bold;
  font-size:10px;
  font-family:helvetica,arial,sans-serif;
}

.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 );
  });
});