[JS]パネルを新聞のように隙間なく自動で配置するスクリプト -Masonry

div要素で実装したパネルを新聞や雑誌のように隙間なく自動で配置するスクリプトを紹介します。

デモのキャプチャ

Masonry

レイアウトの指定は簡単で、上記のようなレイアウトを作成するには各カラムの幅を指定します。

カラムごとに異なる幅を指定することも可能です。

デモのキャプチャ

demo (Tumblelog)

また、ユーザーのスクロール操作に合わせてコンテンツを表示する「Infinite Scroll」にも対応しています。

デモのキャプチャ

demo (Infinite Scroll)

ブラウザのサイズ変更にも柔軟に対応しています。

デモのキャプチャ

ブラウザのサイズを変更

MasonryはjQueryのプラグインのため、実装にはjquery.jsが必要です。

ライセンスはGPLMITで、個人・商用ともに無料で利用できるとのことです。

sponsors

top of page

©2024 coliss