[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

Trackback

Comments

デザインダイアログ - [JS]高さの異なる要素をレンガ状に隙間なく並べるだけのシンプルなスクリプト -Wookmark | コリス

on 2012年3月28日

[...] て記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wook…[ このサイトへ ] [ ニコニコ風に見る ] [...]

Wookmark JSをつかってみた。 | なら日記

on 2012年3月28日

[...] Wookmark JSをつかってみた。 Posted on March 28, 2012 by tan-yuki (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=371888919510483"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk")); こちらのブログに刺激されてWookmarkを使ってみました。 [...]

ふたばちゃんねると4chanのカタログページを作ってみた(2) - 増田まとめ

on 2012年12月10日

[...]  http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-wookmark.html [...]

top of page

©2014 coliss