$(function(){ var $container = $('#container'); $container.isotope({ itemSelector : '.element', getSortData : { symbol : function( $elem ) { return $elem.find('.symbol').text(); }, number : function( $elem ) { return parseInt( $elem.find('.number').text(), 10 ); }, score : function( $elem ) { return parseInt( $elem.find('.score').text(), 10 ); }, name : function ( $elem ) { return $elem.find('.name').text(); } } }); var $sortedItems = $container.data('isotope').$filteredAtoms; // sorting $('#sorts a').click(function(){ // get href attribute, minus the # var $this = $(this), sortName = $this.data('sort'); $container.isotope({ sortBy : sortName }); // highlight first item $container.find('.first').removeClass('first'); $sortedItems.first().addClass('first'); // highlight last item $container.find('.last').removeClass('last'); $sortedItems.last().addClass('last'); // switches selected class on buttons // don't proceed if already selected if ( !$this.hasClass('selected') ) { $this.parents('#sorts').find('.selected').removeClass('selected'); $this.addClass('selected'); } return false; }); });
<ul id="sorts"> <li><a href="#original-order" data-sort="original-order" class="selected">original order</a></li> <li><a href="#name" data-sort="name">name</a></li> <li><a href="#symbol" data-sort="symbol">symbol</a></li> <li><a href="#number" data-sort="number">number</a></li> <li><a href="#score" data-sort="score">score</a></li> </ul> <div id="container" class="clearfix"> <div class="element first"> <p class="number">80</p> <h3 class="symbol">Hg</h3> <h2 class="name">Mercury</h2> <p class="score">18</p> </div> <div class="element"> <p class="number">52</p> <h3 class="symbol">Te</h3> <h2 class="name">Tellurium</h2> <p class="score">62</p> </div> <div class="element"> <p class="number">83</p> <h3 class="symbol">Bi</h3> <h2 class="name">Bismuth</h2> <p class="score">5</p> </div> <div class="element"> <p class="number">48</p> <h3 class="symbol">Cd</h3> <h2 class="name">Cadmium</h2> <p class="score">43</p> </div> <div class="element"> <p class="number">20</p> <h3 class="symbol">Ca</h3> <h2 class="name">Calcium</h2> <p class="score">40</p> </div> <div class="element"> <p class="number">75</p> <h3 class="symbol">Re</h3> <h2 class="name">Rhenium</h2> <p class="score">92</p> </div> <div class="element"> <p class="number">81</p> <h3 class="symbol">Tl</h3> <h2 class="name">Thallium</h2> <p class="score">76</p> </div> <div class="element"> <p class="number">51</p> <h3 class="symbol">Sb</h3> <h2 class="name">Antimony</h2> <p class="score">51</p> </div> <div class="element"> <p class="number">27</p> <h3 class="symbol">Co</h3> <h2 class="name">Cobalt</h2> <p class="score">88</p> </div> <div class="element"> <p class="number">71</p> <h3 class="symbol">Lu</h3> <h2 class="name">Lutetium</h2> <p class="score">63</p> </div> <div class="element"> <p class="number">18</p> <h3 class="symbol">Ar</h3> <h2 class="name">Argon</h2> <p class="score">16</p> </div> <div class="element"> <p class="number">37</p> <h3 class="symbol">Rb</h3> <h2 class="name">Rubidium</h2> <p class="score">85</p> </div> <div class="element"> <p class="number">7</p> <h3 class="symbol">N</h3> <h2 class="name">Nitrogen</h2> <p class="score">41</p> </div> <div class="element"> <p class="number">93</p> <h3 class="symbol">Np</h3> <h2 class="name">Neptunium</h2> <p class="score">26</p> </div> <div class="element last"> <p class="number">89</p> <h3 class="symbol">Ac</h3> <h2 class="name">Actinium</h2> <p class="score">38</p> </div> </div> <!-- #container -->
body { font-family: 'Helvetica Neue', Arial, sans-serif; } .element { width: 65px; height: 65px; background: #666; color: white; font-weight: bold; float: left; margin: 3px; padding: 3px; font-size: 12px; } .element.first { background: red; } .element.last { background: blue; } .selected { background: yellow; } #sorts li { display: inline-block; } /* isotope transition styles */ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; }