Single category

We all know and love Isotope magical layouts. Amazing work by David DeSandro / Metafizzy

You can easily integrate Isotope/Masonry with filtrify and get all of those sexy animations.

Download isotope and add it to the <head> section of your page.

Don't forget to add the styles to enable animation with CSS transitions.

<div id="placeHolder"></div>

<ul id="container">
	<li data-genre="rock, blues, classic rock, jazz"> ... B.B. King ... </li>
	<li data-genre="pop, rock, alternative, indie, british, britpop"> ... Oasis ... </li>
	<li data-genre="soul, rnb, jazz, female vocalists"> ... Erykah Badu ... </li>
	<li data-genre="alternative, hip hop, soul, funk"> ... Gnarls Barkley ... </li>
	<li data-genre="blues"> ... Howlin' Wolf ... </li>
    ...
</ul>
$(function() {
    
    var container = $("#container");
    
    container.isotope({
        itemSelector : 'ul#container > li',
        layoutMode : 'fitRows'
    });
    
    $.filtrify("container", "placeHolder", {
        hide     : false,
        callback : function ( query, match, mismatch ) {
            container.isotope({ filter : $(match) });
        }
    });

});
/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}