[JS]高さの異なる要素をレンガ状に隙間なく並べるだけのシンプルなスクリプト -Wookmark

高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。

同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。

Wookmark
Wookmark -GitHub

[ad#ad-2]

• Wookmarkのデモ
• Wookmarkの使い方

Wookmarkのデモ

デモではランダムな高さのパネルをレンガ状に隙間なく並べています。

デモ:幅1200pxで表示

表示サイズを変更すると、それに合わせて配置も変更されます。

デモ:幅800pxで表示

[ad#ad-2]

Wookmarkの使い方

実装はいたってシンプルです。

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.wookmark.js"></script>

HTML

デモを例にHTMLはリスト要素など、並列に配置します。

<div class="myElements">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>

JavaScript

内包している要素をjQueryのセレクタで指定するだけです。

<script type="text/javascript">
$('.myElements li').wookmark();
</script>

スクリプトのオプション

スクリプトのオプションもシンプルで、カラム間の隙間やグリッドの幅を設定できます。

container

カラムの数を設定するためのエレメント

offset

カラム間の垂直・水平方向の隙間

itemWidth

一つのグリッドの幅

オプションを使用すると、下記のようになります。

<script type="text/javascript">
$('.myElements').wookmark({
  container: $('#myContent'),
  offset: 5,
  itemWidth: 200,
  autoResize: true
});
</script>