最近テラスハウスにはまっていて、特にBGMが素敵。

そこでテラスハウスの BGM を簡単に聴けるようなプレーヤー
作っているんだけど、ビデオの一覧をどうやって表示するか悩み中。

職場でそんな話をしたら「isotopeってのを使ってる人がいたよ」という話を聞いた。

isotope

div タグの下に element というclass属性の要素を作って、
#コード中では AngularJSを使用。

[code lang="html"]
<div id="container" class="isotope">
<div ng-repeat="video in videos" class="element isotope-item " date="" count="" ng-click="select($event)" >
<p>放送日時: </p>
<img src="" vid="" class="videoimg" index="" />
<p> 再生回数: </p>
<p>「」</p>
</div>
</div>
[/code]

js で element class属性に対して isotope メソッドを実行。
getSortData にはソートしたいフィールドを返すようにしておく。

[code lang="js"]
var $container = $('#container');

$container.isotope({
itemSelector: '.element',
getSortData: {
date: function($elem) {
var date = $elem.attr('date');
return date;
},
count: function($elem) {
var count = parseInt($elem.attr('count'), 10);
return count;
}
}
});

[/code]

これだけでソートできたり、フィルタしたりもできるようになる。

だけど要素が100個を超えたりするともっさりしているような。使い方が悪いんだろうか。