Ajax Loader
×
HTML
<div id="sorts" class="button-group">
1
<div id="sorts" class="button-group">
2
  <button data-sort-by="original-order">original order</button>
3
  <button data-sort-by="name">name</button>
4
  <button data-sort-by="symbol">symbol</button>
5
  <button data-sort-by="number">number</button>
6
  <button data-sort-by="weight">weight</button>
7
  <button data-sort-by="category">category</button>
8
</div>
9
 
10
<div id="container">
11
  <div class="item transition metal" data-category="transition">
12
    <p class="number">79</p>
13
    <h3 class="symbol">Au</h3>
14
    <h2 class="name">Gold</h2>
15
    <p class="weight">196.966569</p>
16
  </div>
17
  <div class="item metalloid" data-category="metalloid">
18
    <p class="number">51</p>
19
    <h3 class="symbol">Sb</h3>
20
    <h2 class="name">Antimony</h2>
21
    <p class="weight">121.76</p>
22
  </div>
23
</div>
24
 
25
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
26
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
 
CSS
body {
1
body {
2
  padding: 100px;
3
}
4
 
5
.button-group {
6
  margin: 5px;
7
}
8
 
9
.item {
10
  width: 150px;
11
  height: 150px;
12
  margin: 5px;
13
  padding: 10px;
14
  color: black;  
15
}
16
 
17
.item > * {
18
  margin: 0;
19
  padding: 0;
20
}
21
.metal {
22
  background-color: gold;
23
}
24
 
25
.metalloid {
26
  background-color: silver;
27
}
 
JavaScript
x
20
1
 
2
$(function(){
3
  var $container = $('#container').isotope({
4
    getSortData: {
5
      name: '.name',
6
      symbol: '.symbol',
7
      number: '.number parseInt',
8
      category: '[data-category]',
9
      weight: function( itemElem ) {
10
        var weight = $( itemElem ).find('.weight').text();
11
        return parseFloat( weight.replace( /[\(\)]/g, '') );
12
      }
13
    }
14
  });
15
  // sort items on button click
16
  $('#sorts').on( 'click', 'button', function() {
17
    var sortByValue = $(this).attr('data-sort-by');
18
    $container.isotope({ sortBy: sortByValue });
19
  });
20
});
 

Untitled

CSSDeck G+