Untitled

<div id="sorts" class="button-group">

  <button data-sort-by="original-order">original order</button>

  <button data-sort-by="name">name</button>

  <button data-sort-by="symbol">symbol</button>

  <button data-sort-by="number">number</button>

  <button data-sort-by="weight">weight</button>

  <button data-sort-by="category">category</button>

</div>

<div id="container">

  <div class="item transition metal" data-category="transition">

    <img src="http://www.innovation.web.id/isotope/images/portfolio1.jpg" width="170px" height="110">   

  </div>

  <div class="item metalloid" data-category="metalloid">

    <img src="http://www.innovation.web.id/isotope/images/portfolio2.jpg" width="170px" height="110">   

  </div>

  <div class="item transition metalloid2" data-category="metalloid2">

    <img src="http://www.innovation.web.id/isotope/images/portfolio3.jpg" width="170px" height="110">   

  </div>

  <div class="item transition metalloid3" data-category="metalloid3">

  <img src="http://www.innovation.web.id/isotope/images/portfolio4.jpg" width="170px" height="110">  

  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>

body {

  padding: 100px;

}

.button-group {

  margin: 5px;

}

#container {

  max-width: 600px;

}

.item {

  float: left;

  width: 170px;

  margin: 5px 5px 0;

  padding: 0;

  color: black;  

}

.item > * {

  margin: 0;

  padding: 0;

}

$(function(){

  var $container = $('#container').isotope({

    getSortData: {

      name: '.name',

      symbol: '.symbol',

      number: '.number parseInt',

      category: '[data-category]',

      weight: function( itemElem ) {

        var weight = $( itemElem ).find('.weight').text();

        return parseFloat( weight.replace( /[\(\)]/g, '') );

      }

    }

  });

  // sort items on button click

  $('#sorts').on( 'click', 'button', function() {

    var sortByValue = $(this).attr('data-sort-by');

    $container.isotope({ sortBy: sortByValue });

  });