[JS]Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成するスクリプト -Freewall
Post on:2013年10月15日
sponsors
デスクトップでもタブレットでもスマフォでも、カードを使ったさまざまなパターンのグリッドレイアウトをダイナミックに作成するjQueryのプラグインを紹介します。
Freewallのデモ
スクリプトのページ自体もデモになっており、さまざまなレイアウトを楽しむことができます。
デモページも数多く用意されています。
まずは、ノーマルなグリッド状のレイアウト。
さまざまなサイズの画像を使ったレイアウト。
以下、少しずつ高度なレイアウトになっていきます。
各カードの高さを揃えてレイアウトします。
スライスエンジンを使って、カードをゾーンにフィットさせます。
フレキシブルなレイアウトにも対応。
Pinterest風に高さの異なるカードをダイナミックにレイアウト。
Freewallの使い方
Step 1: 外部ファイル
head内にjquery.jsと当スクリプトを外部ファイルとして記述します。
<head> ... <script type="text/javascript" src="jquery-1.7.min.js"></script> <script type="text/javascript" src="freewall.js"></script> </head>
Step 2: HTML
カードを包むラッパーを用意します。
<div id="freewall" class="free-wall"> </div>
Step 3: JavaScript
デモでは、各カードをスクリプトで生成してレイアウトを作成しています。
<script type="text/javascript">
var temp = "<div class='cell' style='width:{width}px; height: {height}px; background-image: url(i/photo/{index}.jpg)'></div>";
var w = 200, h = 200, html = '', limitItem = 49;
for (var i = 0; i < limitItem; ++i) {
html += temp.replace(/\{height\}/g, h).replace(/\{width\}/g, w).replace("{index}", i + 1);
}
$("#freewall").html(html);
var ewall = new freewall("#freewall");
ewall.reset({
selector: '.cell',
animate: true,
block: {
flex: 1
},
cell: {
width: 200,
height: 200
},
fillGap: true,
onResize: function() {
ewall.fitWidth();
}
});
ewall.fitWidth();
</script>
sponsors
