最近テラスハウスにはまっていて、特に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 {{video.date}}" date="{{video.date}}" count="{{video.count}}" ng-click="select($event)" >
<p>放送日時: {{video.date}}</p>
<img src="{{video.thumbnail}}" vid="{{video.vid}}" class="videoimg" index="{{video.index}}" />
<p>{{video.artist}} 再生回数: {{video.count}}</p>
<p>「{{video.title}}」</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個を超えたりするともっさりしているような。使い方が悪いんだろうか。