「Masonry(Cascading grid layout library)」はタイル状に自動で並べ替えてくれるJavaScript。

Pinterestみたいなウィンドウの幅を変更するとタイル状に並べたboxもウィンドウに収まるようにソートしなおされる感じのデザインを簡単に作ることができるのでわりと感動的。

最近作ったWordPressテーマに使わさせていただいたのでメモとか。

この丸の部分のソートに使ってるかんじ。

まずjsファイルの情報から。

/*!
* Masonry PACKAGED v3.3.2
* Cascading grid layout library
* http://masonry.desandro.com
* MIT License
* by David DeSandro
*/

ライセンスは「MIT License」なので、同梱してテンプレートを再配布するのはok。

導入方法は他のサイトでもっと詳しく説明してくれているけれど、とりあえず自分の場合のメモ。

導入方法もすごく簡単。

まずjsファイルを適宜up。

書くのは、「head」の中に記入するこれが1カ所目。

<script src="masonry.pkgd.min.js"></script> 

でもって、実際にタイル上に並べるものをとりかこむdivを作ってそこにclassを指定する部分が2カ所目。

<div class="js-masonry"'>
（並べるもの）
（並べるもの）……
</div>

これだけでちゃんと並び替えてくれたり。

今回作ったテーマでは、カテゴリ部分に関しては並び順をランダム（ついでに色も）にできるようにしたり。

ソースはこんな。

<?php  
//★表示させるカテゴリスラッグを指定 
    $ar = array( 
    "diary", 
    "game", 
    "sangokushi", 
    "book", 
    "memo", 
    "history", 
    "web", 
    ); 
    shuffle($ar); 
    for( $i = 0; $i<= count($ar)-1; $i++ ){ 
        echo "<span class='home_box home_box_co".$i."'><a href="."'category/".$ar[$i]."/'"." >[".$ar[$i]."]</a></span>"; 
    } 
?>

このテーマでは「span」を「Masonry」で並び替えてもらってるんだけど。

「home_box_co0」から「home_box_co20」くらいをCSSで背景色をランダムに設定しているので色もランダム（shuffleなので20くらいまでは重複しない）。

phpをややこしくしないために（できないともいう）カテゴリのスラッグ名を表示にも使ってるからその辺が不自由といえば不自由ではあったり。

あと、カテゴリ以外をランダムソートに混ぜられないというのもあれ。

混ぜないというのと混ぜられないというのは別だしその点は不満は残っているけれど、実用的には別にいいかなとも。

---

とりあえずこのJavaScript、今回作ったテーマではこんな使い方をしたけれど、もう少しいろいろ遊べそうな可能性は感じていたり。

なにか思いつくといいな。

おわり。