<div id="sorts" class="button-group">
<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">
<p class="number">79</p>
<h3 class="symbol">Au</h3>
<h2 class="name">Gold</h2>
<p class="weight">196.966569</p>
</div>
<div class="item metalloid" data-category="metalloid">
<p class="number">51</p>
<h3 class="symbol">Sb</h3>
<h2 class="name">Antimony</h2>
<p class="weight">121.76</p>
</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 {
body {
padding: 100px;
}
.button-group {
margin: 5px;
}
.item {
width: 150px;
height: 150px;
margin: 5px;
padding: 10px;
color: black;
}
.item > * {
margin: 0;
padding: 0;
}
.metal {
background-color: gold;
}
.metalloid {
background-color: silver;
}
x
$(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 });
});
});