最近のWEBレイアウトで紙面に近いような多段な組み方をした、WEBレイアウトが出てきていますが、今回紹介するのは多数のボックスをウィンドウ幅に合わせて、隙間無く段組みしてくれるJQuery「Masonry」です。

特に違和感無く動作し、動作も速く安定していしています。JQueryを読み込ませて簡単なコードを付加してあげるだけで動作します。

詳しくは以下

並び替えだけではなく、絡む毎に幅を指定したり、コンテンツをボタンで追加したり、幅を揃えて、きれいに並べる事もできるみたいで、様々な使い道がありそう。ワンサイトで様々な切り口のコンテンツをもったサイトには非常相性がいいのではないでしょうか？

詳しい設置方法は「David DeSandro: jQuery Masonry」をご覧ください。またデモは「jQuery Masonry › Basic Examples」からご覧になる事ができます。

プログラムの利用ライセンスはGPLとMITで定められており、その範囲内であれば無料で利用可能です。ちなみにコチラを開発しているDAVIDDESANDROは、その他にも様々なリソースを公開しています。興味のある方は公式サイトも是非どうぞ。

David DeSandro: jQuery Masonry