[JS]高さの異なるパネルをレンガ状に配置する機能最小限・実用性重視の超軽量スクリプト -waterfall

div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。

左のサイドバーは適用なし、右だけレンガ状にできます。

waterfall
waterfall -GitHub

そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。

• waterfallのデモ
• waterfallの使い方

waterfallのデモ

スクリプトのページ自体がデモになっています。
まずは、デスクトップサイズでの表示。

デモページ、幅1200pxで表示

並び上・左の順で優先されています。

タブレットサイズに変更してみます。

デモページ、幅780pxで表示

カラムの数はカラムの幅の最小値を設定することで、自動で表示されます。
ページ内の適用範囲も指定できるので、左のサイドバーはそのままの表示です。

waterfallの使い方

使い方は簡単です。
HTMLがあれば、数行加えるだけで完了です。

Step 1: 外部ファイル

waterfallはjquery/zeptoのプラグインで、jquery.jsかzepto.jsと当スクリプトを外部ファイルとして記述します。

<script src="js/zepto.js"></script>
<script src="js/jquery.waterfall.js"></script>

Step 2: HTML

各パネルを包むdiv要素に「.waterfall」を付与するだけです。

<div class="waterfall"> 
	<div>Item 1</div> 
	<div>Item 2</div> 
	… 
	<div>Item N</div> 
</div>

Step 3: JavaScript

あとはスクリプトを実行するだけで完了です。
容器に「.waterfall」を付与した時はデフォルトで設定されているため、指定する必要はありません。「.waterfall」以外を容器に使用する時は「.some-container」のように指定します。

$(function(){
	$(".some-container").waterfall();
})

オプション

colMinWidth (default: 240px)

縦列の数を計算する時のベースとなるカラムの最小幅

defaultContainerWidth (default: $(window).width())

容器の幅

colClass (default: undefined)

それぞれのカラムに付与するclass

autoresize (default: true)

リサイズ時の処理

defaultClass (default: waterfall)

容器のデフォルト時のclass

オプションを使用すると、こんな感じに。

$('.some-container').waterfall({ 
	colMinWidth: 400, 
	defaultContainerWidth: 800, 
	colClass: 'content-column', 
	autoresize: true
})