Wsrtjtyk

// external js: isotope.pkgd.js



// init Isotope

var $grid = $('.grid').isotope({

  itemSelector: '.element-item'

});

// filter functions

var filterFns = {

  // show if number is greater than 50

  numberGreaterThan50: function() {

    var number = $(this).find('.number').text();

    return parseInt( number, 10 ) > 50;

  },

  // show if name ends with -ium

  ium: function() {

    var name = $(this).find('.name').text();

    return name.match( /ium$/ );

  }

};

// bind filter button click

$('.filters-button-group').on( 'click', 'button', function() {

  var filterValue = $( this ).attr('data-filter');

  // use filterFn if matches value

  filterValue = filterFns[ filterValue ] || filterValue;

  $grid.isotope({ filter: filterValue });

});

// change is-checked class on buttons

$('.button-group').each( function( i, buttonGroup ) {

  var $buttonGroup = $( buttonGroup );

  $buttonGroup.on( 'click', 'button', function() {

    $buttonGroup.find('.is-checked').removeClass('is-checked');

    $( this ).addClass('is-checked');

  });

});

* { box-sizing: border-box; }



body {

  font-family: sans-serif;

}



/* ---- button ---- */



.button {

  display: inline-block;

  padding: 10px 18px;

  margin-bottom: 10px;

  background: #EEE;

  border: none;

  border-radius: 7px;

  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );

  color: #222;

  font-family: sans-serif;

  font-size: 16px;

  text-shadow: 0 1px white;

  cursor: pointer;

}



.button:hover {

  background-color: #8CF;

  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);

  color: #222;

}



.button:active,

.button.is-checked {

  background-color: #28F;

}



.button.is-checked {

  color: white;

  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);

}



.button:active {

  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);

}



/* ---- button-group ---- */



.button-group:after {

  content: '';

  display: block;

  clear: both;

}



.button-group .button {

  float: left;

  border-radius: 0;

  margin-left: 0;

  margin-right: 1px;

}



.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }

.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }



/* ---- isotope ---- */



.grid {

  position: relative;

  border: 1px solid #333;

  display: grid;

    grid-template-columns: repeat(7,1fr);

    grid-template-rows: 1fr;

    grid-template-areas: 'c1 c2 c3 c4 c5 c6 c7';

    grid-gap: 0 8px;

}



.grid .c1 {

  grid-area: c1;

}



.grid .c2 {

  grid-area: c2;

}



.grid .c3 {

  grid-area: c3;

}



.grid .c4 {

  grid-area: c4;

}



.grid .c5 {

  grid-area: c5;

}



.grid .c6 {

  grid-area: c6;

}



.grid .c7 {

  grid-area: c7;

}



/* clear fix */

.grid:after {

  content: '';

  display: block;

  clear: both;

}



/* ---- .element-item ---- */



.element-item {

  position: relative;

/*   float: left; */

  width: 100px;

  height: 100px;

  margin: 5px;

  padding: 10px;

  background: #888;

  color: #262524;

}



.element-item > * {

  margin: 0;

  padding: 0;

}



.element-item .name {

  position: absolute;



  left: 10px;

  top: 60px;

  text-transform: none;

  letter-spacing: 0;

  font-size: 12px;

  font-weight: normal;

}



.element-item .symbol {

  position: absolute;

  left: 10px;

  top: 0px;

  font-size: 42px;

  font-weight: bold;

  color: white;

}



.element-item .number {

  position: absolute;

  right: 8px;

  top: 5px;

}



.element-item .weight {

  position: absolute;

  left: 10px;

  top: 76px;

  font-size: 12px;

}



.element-item.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }

.element-item.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }

.element-item.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }

.element-item.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }

.element-item.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }

.element-item.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }

.element-item.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }

.element-item.diatomic        { background: #00F; background: hsl( 252, 100%, 50%); }

.element-item.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }

.element-item.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="//npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

<h1>Isotope - filtering</h1>



<div class="button-group filters-button-group">

  <button class="button is-checked" data-filter="*">show all</button>

  <button class="button" data-filter=".metal">metal</button>

  <button class="button" data-filter=".transition">transition</button>

  <button class="button" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</button>

  <button class="button" data-filter=":not(.transition)">not transition</button>

  <button class="button" data-filter=".metal:not(.transition)">metal but not transition</button>

  <button class="button" data-filter="numberGreaterThan50">number > 50</button>

  <button class="button" data-filter="ium">name ends with &ndash;ium</button>

</div>



<div class="grid">

  <div class="c1 element-item transition metal " data-category="transition">

    <h3 class="name">Mercury</h3>

    <p class="symbol">Hg</p>

    <p class="number">80</p>

    <p class="weight">200.59</p>

  </div>

  <div class="c2 element-item metalloid " data-category="metalloid">

    <h3 class="name">Tellurium</h3>

    <p class="symbol">Te</p>

    <p class="number">52</p>

    <p class="weight">127.6</p>

  </div>

  <div class="c3 element-item post-transition metal " data-category="post-transition">

    <h3 class="name">Bismuth</h3>

    <p class="symbol">Bi</p>

    <p class="number">83</p>

    <p class="weight">208.980</p>

  </div>

  <div class="c4 element-item post-transition metal " data-category="post-transition">

    <h3 class="name">Lead</h3>

    <p class="symbol">Pb</p>

    <p class="number">82</p>

    <p class="weight">207.2</p>

  </div>

  <div class="c5 element-item transition metal " data-category="transition">

    <h3 class="name">Gold</h3>

    <p class="symbol">Au</p>

    <p class="number">79</p>

    <p class="weight">196.967</p>

  </div>

  <div class="c6 element-item alkali metal " data-category="alkali">

    <h3 class="name">Potassium</h3>

    <p class="symbol">K</p>

    <p class="number">19</p>

    <p class="weight">39.0983</p>

  </div>

  <div class="c7 element-item alkali metal " data-category="alkali">

    <h3 class="name">Sodium</h3>

    <p class="symbol">Na</p>

    <p class="number">11</p>

    <p class="weight">22.99</p>

  </div>

  <div class="c1 element-item transition metal " data-category="transition">

    <h3 class="name">Cadmium</h3>

    <p class="symbol">Cd</p>

    <p class="number">48</p>

    <p class="weight">112.411</p>

  </div>

  <div class="c2 element-item alkaline-earth metal " data-category="alkaline-earth">

    <h3 class="name">Calcium</h3>

    <p class="symbol">Ca</p>

    <p class="number">20</p>

    <p class="weight">40.078</p>

  </div>

  <div class="c3 element-item transition metal " data-category="transition">

    <h3 class="name">Rhenium</h3>

    <p class="symbol">Re</p>

    <p class="number">75</p>

    <p class="weight">186.207</p>

  </div>

  <div class="c4 element-item post-transition metal " data-category="post-transition">

    <h3 class="name">Thallium</h3>

    <p class="symbol">Tl</p>

    <p class="number">81</p>

    <p class="weight">204.383</p>

  </div>

  <div class="c5 element-item metalloid " data-category="metalloid">

    <h3 class="name">Antimony</h3>

    <p class="symbol">Sb</p>

    <p class="number">51</p>

    <p class="weight">121.76</p>

  </div>

  <div class="c6 element-item transition metal " data-category="transition">

    <h3 class="name">Cobalt</h3>

    <p class="symbol">Co</p>

    <p class="number">27</p>

    <p class="weight">58.933</p>

  </div>

  <div class="c7 element-item lanthanoid metal inner-transition " data-category="lanthanoid">

    <h3 class="name">Ytterbium</h3>

    <p class="symbol">Yb</p>

    <p class="number">70</p>

    <p class="weight">173.054</p>

  </div>

  <div class="c1 element-item noble-gas nonmetal " data-category="noble-gas">

    <h3 class="name">Argon</h3>

    <p class="symbol">Ar</p>

    <p class="number">18</p>

    <p class="weight">39.948</p>

  </div>

  <div class="c2 element-item diatomic nonmetal " data-category="diatomic">

    <h3 class="name">Nitrogen</h3>

    <p class="symbol">N</p>

    <p class="number">7</p>

    <p class="weight">14.007</p>

  </div>

  <div class="c3 element-item actinoid metal inner-transition " data-category="actinoid">

    <h3 class="name">Uranium</h3>

    <p class="symbol">U</p>

    <p class="number">92</p>

    <p class="weight">238.029</p>

  </div>

  <div class="c4 element-item actinoid metal inner-transition " data-category="actinoid">

    <h3 class="name">Plutonium</h3>

    <p class="symbol">Pu</p>

    <p class="number">94</p>

    <p class="weight">(244)</p>

  </div>

</div>