<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 class="item transition metal" data-category="transition">
<img src="http://www.innovation.web.id/isotope/images/portfolio1.jpg" width="170px" height="110">
<div class="item metalloid" data-category="metalloid">
<img src="http://www.innovation.web.id/isotope/images/portfolio2.jpg" width="170px" height="110">
<div class="item transition metalloid2" data-category="metalloid2">
<img src="http://www.innovation.web.id/isotope/images/portfolio3.jpg" width="170px" height="110">
<div class="item transition metalloid3" data-category="metalloid3">
<img src="http://www.innovation.web.id/isotope/images/portfolio4.jpg" width="170px" height="110">
<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>