軽量・簡単なMasonry風レイアウト用JavaScriptライブラリ Macy.js

Masonry風レイアウトと言ってもイマイチピンとこない場合もあるかと思いますが、いわゆるピンタレスト風と言いますか。
高さの違う要素をタイルのように敷き詰めるアレです。

CSSだけでできるのかなと簡単に考えていたけど、意外とできないんですよね。

●floatやinline-block
→各要素の高さが異なっても、行ごとに頭がそろってしまう。（高さが低い要素の下が開いてしまう）

●column
→「cssだけでできる」と紹介しているサイトはだいたいcolumnを使っていると思いますが、並び順がおかしい。
　左上が最新で、そこから順番的には右に行って、入りきらなくなったら下に回るというのがピンタレスト風（Masonry風）。
　columnを使った場合は、左上から左下に、縦に並んで、そのあと一つ右の列に行く。
　これでは同じレイアウトと言えない。


そんなわけで結局JavaScriptを使わなくてはいけないんだなと決意した（笑）のですが、なかなかいいのが見つからなくて。
シンプル過ぎてオプションが少なく希望のレイアウトにしづらかったり、高機能すぎてめんどくさかったり。

そんな中で見つけたのが「Macy.js」。
これ、決定版なんじゃないでしょうか！？

●Macy.js公式サイト
http://macyjs.com/

■Macy.jsの良いところ

他のスクリプトに依存しない。（jQueryなしで動く。もちろんあっても競合しない）
軽い。
必要十分なオプション。

■Macy.jsのいまいちなところ

IE対応がいまいち。
IE11で動かすにはPromiseのPollyFill（Promiseという機能がIE11で使えるようにするための追加プラグインのようなもの）が必要と書かれています。
ただ、これは僕の環境では何もやらなくても動いたんですけど。。。

IE10はdatasetのPollyFillが必要とのことですが、IE10はもうサポートしなくていいかなぁという気持ちになっているので、場合によってはIE10はfloatでお茶を濁すくらいに考えてます。

■まとめ

非常に手軽で必要十分な機能を持っているMacy.js。
なんか、今後もピンタレスト風レイアウトを多用したくなってしまいそうです。