Centering Isotope layout

by secretgspot

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<p><button id="add-items">Add 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;
}

.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'),
      colW = 60,
      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
    }
  });
  
  // use .css() or .animate()
  var applyStyleFnName = $container.data('isotope').applyStyleFnName;
  
  $('#add-items').click(function(){
    var $newItems = $( createItems() ),
        // set position Isotope-wise with progressive enhancement
        // use CSS transforms translate, or top/left position
        newStyle = $container.isotope( 'positionFn', 0, $container.height() );
    
    newStyle.opacity = 0;

    // apply style
    $newItems.css( newStyle );

    $container.append( $newItems ).isotope( 'appended', $newItems );
    // fade new items to full opacity
    $newItems[ applyStyleFnName ]({ opacity: 1 });
  });
  
});