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

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

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

サイトのキャプチャ

Wookmark
Wookmark -GitHub

Wookmarkのデモ

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

サイトのキャプチャ

デモ:幅1200pxで表示

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

サイトのキャプチャ

デモ:幅800pxで表示

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>

top of page

©2016 coliss