豪華なエフェクトでソートや絞り込みを行うjQueryプラグイン「Isotope」

Isotopeは非常に美しいエフェクトで要素の絞り込みや並び替えを行えるjQueryプラグイン。プラグイン本体の読み込みとCSSに次の記述を追加しておきます。

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -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;
}

次のように指定すると子要素の高さが揃えられ準備が完了です。

$('#unitItem').isotope({
	layoutMode : 'fitRows'
})

次のようなメソッドを実行するとfilterで要素を絞り込みアニメーションして表示されるようになります。

$('#unitItem').isotope({ filter: ".hoge" });