Centering Isotope layout

by Reusablecode

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<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 class="item w1 h1"></div>
  <div class="item w2 h1"></div>
  <div class="item w1 h2"></div>
  <div class="item w2 h2"></div>
  <div class="item w2 h2"></div>
  <div class="item w1 h1"></div>
  <div class="item w1 h1"></div>
  <div class="item w1 h1"></div>
  <div class="item w2 h1"></div>
  <div class="item w1 h1"></div>
  <div class="item w1 h2"></div>
  <div class="item w1 h1"></div>
  <div class="item w1 h1"></div>
  <div class="item w1 h1"></div>
  <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 class="item w1 h1"></div>
  <div class="item w2 h1"></div>
  <div class="item w1 h2"></div>
  <div class="item w2 h2"></div>
  <div class="item w2 h2"></div>
  <div class="item w1 h1"></div>
  <div class="item w1 h1"></div>
  <div class="item w1 h1"></div>
  <div class="item w2 h1"></div>
  <div class="item w1 h1"></div>
  <div class="item w1 h2"></div>
  <div class="item w1 h1"></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; }

/* no transition on .isotope container */

.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 .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

JavaScript

$(function(){
  
  var $container = $('#container'),
      $body = $('body'),
      colW = 60,
      columns = null;
  
  $container.isotope({
    // disable window resizing
    resizable: false,
    masonry: {
      columnWidth: colW
    }
  });
  
  $(window).smartresize(function(){
    // check if columns has changed
    var currentColumns = Math.floor( ( $body.width() -10 ) / colW );
    if ( currentColumns !== columns ) {
      // set new column count
      columns = currentColumns;
      // apply width to container manually, then trigger relayout
      $container.width( columns * colW )
        .isotope('reLayout');
    }
    
  }).smartresize(); // trigger resize to set container width
  
});