Isotope - fitColumns in fit container

Re http://stackoverflow.com/questions/5100009/relayout-items-with-isotope-doesnt-seem-to-maintain-structure

by Reusablecode

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="container">
  <div class="item large">
{!Pet__c.Account__r.Clinic__r.Clinic_Name__c}
{!Pet__c.Account__r.Clinic__r.Location_Street__c} 
{!Pet__c.Account__r.Clinic__r.Location_City__c}, {!Pet__c.Account__r.Clinic__r.Location_State__c} {!Pet__c.Account__r.Clinic__r.Location_ZipCode__c} 
{!Pet__c.Account__r.Clinic__r.Phone_Primary__c}
         
  </div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

CSS

#container {
  border: 2px solid;
  padding: 5px;
  width: 400px;
  height: 160px;
}

.item {
  width: 70px;
  height: 70px;
  background: #26D;
  float: left;
  margin: 5px;
  color: white;
  font-size: 60px;
}

.item.large {
  width: 150px;
  height: 150px;
  background: #2D6;
  z-index: 10;
}

.item:hover {
  cursor: pointer;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -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'),
      $items = $('.item');
  
  $container.isotope({
    itemSelector: '.item',
    layoutMode : 'fitColumns',
    resizesContainer : false,
    getSortData : {
      fitOrder : function( $item ) {
        var order,
            index = $item.index();
        
        if ( $item.hasClass('large') && index % 2 ) {
          order = index + 1.5;
        } else {
          order = index;
        }
        return order;
      }
    },
    sortBy : 'fitOrder'
  });
  
  $items.click(function(){
    var $this = $(this);
    // nothing to change if this already has large class
    if ( $this.hasClass('large') ) {
      return;
    }
    var $previousLargeItem = $items.filter('.large');
    
    $previousLargeItem.removeClass('large');
    $this.addClass('large');
    $container
      // update sort data on changed items
      .isotope('updateSortData', $this )
      .isotope('updateSortData', $previousLargeItem )
      // trigger layout and sort
      .isotope();
  });
});