Isotope - sort similar category with history

by Reusablecode

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="container">
  <div data-category="red" class="item red"></div>
  <div data-category="blue" class="item blue"></div>
  <div data-category="green" class="item green"></div>
  <div data-category="orange" class="item orange"></div>
  <div data-category="red" class="item red"></div>
  <div data-category="blue" class="item blue"></div>
  <div data-category="green" class="item green"></div>
  <div data-category="orange" class="item orange"></div>
  <div data-category="red" class="item red"></div>
  <div data-category="blue" class="item blue"></div>
  <div data-category="green" class="item green"></div>
  <div data-category="orange" class="item orange"></div>
  <div data-category="red" class="item red"></div>
  <div data-category="blue" class="item blue"></div>
  <div data-category="green" class="item green"></div>
  <div data-category="orange" class="item orange"></div>
  <div data-category="red" class="item red"></div>
  <div data-category="blue" class="item blue"></div>
  <div data-category="green" class="item green"></div>
  <div data-category="orange" class="item orange"></div>
  <div data-category="red" class="item red"></div>
  <div data-category="blue" class="item blue"></div>
  <div data-category="green" class="item green"></div>
  <div data-category="orange" class="item orange"></div>
  <div data-category="red" class="item red"></div>
  <div data-category="blue" class="item blue"></div>
  <div data-category="green" class="item green"></div>
  <div data-category="orange" class="item orange"></div>
  <div data-category="red" class="item red"></div>
  <div data-category="blue" class="item blue"></div>
  <div data-category="green" class="item green"></div>
  <div data-category="orange" class="item orange"></div>
  <div data-category="red" class="item red"></div>
  <div data-category="blue" class="item blue"></div>
  <div data-category="green" class="item green"></div>
  <div...

CSS

.item {
  width: 50px;
  height: 50px;
  margin: 3px;
  float: left;
}

.item:hover { cursor: pointer; }

.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.orange { background: orange; }

/**** 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'),
      // keeps track of most recent category
      history = [],
      currentCategory;

  $container.isotope({
    itemSelector: '.item',
    getSortData: {
      similarCategory : function( $elem ) {
          var position = history.indexOf( $elem.data('category') );
          position = position === -1 ? Infinity : position;
          return position;
      }
    }
  });

  $items.click(function(){
    var newCategory = $(this).data('category')
    // proceed only if new category
    if ( newCategory === currentCategory ) {
      return;
    }
    currentCategory = newCategory;
    history.unshift( currentCategory );
    $container
      // update sorting based on new category
      .isotope( 'updateSortData', $items )
      // call sort and reLayout 
      .isotope({ sortBy: 'similarCategory' });
  });

});