Isotope - sort and group by similar category

HTML

<script src="https://npmcdn.com/[email protected]/dist/isotope.pkgd.js"></script>
<script src="http://thoughtfulviewfinder.in/mainsite/js/isotope/bower_components/isotope-cells-by-column/cells-by-column.js"></script>
<ul id="filters" class="option-set clearfix">
  <li><a href="#" data-category="design">design [red]</a></li>
  <li><a href="#" data-category="sculpture">sculpture [blue]</a></li>
  <li><a href="#" data-category="installation">installation [orange]</a></li>
  <li><a href="#" data-category="others">others [green]</a></li>
</ul>
<div class="grid">
  <div data-category="design" class="item design"></div>
  <div data-category="sculpture" class="item sculpture"></div>
  <div data-category="others" class="item others"></div>
  <div data-category="installation" class="item installation"></div>
  <div data-category="design" class="item design"></div>
  <div data-category="sculpture" class="item sculpture"></div>
  <div data-category="others" class="item others"></div>
  <div data-category="installation" class="item installation"></div>
  <div data-category="design" class="item design"></div>
  <div data-category="sculpture" class="item sculpture"></div>
  <div data-category="others" class="item others"></div>
  <div data-category="design" class="item design"></div>
  <div data-category="sculpture" class="item sculpture"></div>
  <div data-category="others" class="item others"></div>
  <div data-category="installation" class="item installation"></div>
  <div data-category="design" class="item design"></div>
  <div data-category="sculpture" class="item sculpture"></div>
  <div data-category="others" class="item others"></div>
  <div data-category="installation" class="item installation"></div>
  <div data-category="design" class="item design"></div>
  <div data-category="sculpture" class="item sculpture"></div>
  <div data-category="others" class="item others"></div>
</div>

CSS

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}
.item {
  width: 100px;
  height: 100px;
  margin: 3px;
  float: left;
	-webkit-transition: background 0.1s ease-in-out;
	-moz-transition: background 0.1s ease-in-out;
	-o-transition: background 0.1s ease-in-out;
	transition: background 0.1s ease-in-out;
}

div.grid .item.not-filtered {
  opacity: .8;
  background: #dfdfdf;
}

.design {
  background: red;
}

.sculpture {
  background: blue;
}

.others {
  background: green;
}

.installation {
  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'),
    currentCategory;

  var onAnimationFinished = function() {
  	$('.grid .item').removeClass('not-filtered');
    $('.grid .item').not('.' + currentCategory).addClass('not-filtered');
    console.log('sss');
  }

var $grid = $('.grid').isotope({
    itemSelector: '.item',
    animationEngine: 'jquery',
    animationOptions: {
      duration: 650,
      easing: 'easeInOutQuart',
      queue: false
    },
    getSortData: {
      similarCategory: function($elem) {
      //console.log($elem);
        return $($elem).data('category') === currentCategory ? 0 : 1;
      }
    }
  });
  
$grid.on( 'arrangeComplete', onAnimationFinished );


  // $container.isotope().on( 'arrangeComplete', setSortItemsClass );


  $('#filters li a').click(function() {
    var newCategory = $(this).data('category');
    if (newCategory !== currentCategory) {
      currentCategory = newCategory;
      $grid
      // update sorting based on new category
        .isotope('updateSortData', $items)
        // call sort and reLayout 
        .isotope({
          sortBy: 'similarCategory'
        });
    }
  });

});