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
<div id="container">
10
  <div class="item transition metal" data-category="transition">
11
    <img src="http://www.innovation.web.id/isotope/images/portfolio1.jpg" width="170px" height="110">   
12
  </div>
13
  <div class="item metalloid" data-category="metalloid">
14
    <img src="http://www.innovation.web.id/isotope/images/portfolio2.jpg" width="170px" height="110">   
15
  </div>
16
  <div class="item transition metalloid2" data-category="metalloid2">
17
    <img src="http://www.innovation.web.id/isotope/images/portfolio3.jpg" width="170px" height="110">   
18
  </div>
19
  <div class="item transition metalloid3" data-category="metalloid3">
20
  <img src="http://www.innovation.web.id/isotope/images/portfolio4.jpg" width="170px" height="110">  
21
  </div>
22
</div>
23
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
24
<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
.button-group {
5
  margin: 5px;
6
}
7
 
8
#container {
9
  max-width: 600px;
10
}
11
 
12
.item {
13
  float: left;
14
  width: 170px;
15
  margin: 5px 5px 0;
16
  padding: 0;
17
  color: black;  
18
}
19
.item > * {
20
  margin: 0;
21
  padding: 0;
22
}
23
 
 
JavaScript
$(function(){
1
$(function(){
2
  var $container = $('#container').isotope({
3
    getSortData: {
4
      name: '.name',
5
      symbol: '.symbol',
6
      number: '.number parseInt',
7
      category: '[data-category]',
8
      weight: function( itemElem ) {
9
        var weight = $( itemElem ).find('.weight').text();
10
        return parseFloat( weight.replace( /[\(\)]/g, '') );
11
      }
12
    }
13
  });
14
  // sort items on button click
15
  $('#sorts').on( 'click', 'button', function() {
16
    var sortByValue = $(this).attr('data-sort-by');
17
    $container.isotope({ sortBy: sortByValue });
18
  });
19
 
 

Untitled

CSSDeck G+