[JS]Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成するスクリプト -Freewall

デスクトップでもタブレットでもスマフォでも、カードを使ったさまざまなパターンのグリッドレイアウトをダイナミックに作成するjQueryのプラグインを紹介します。

サイトのキャプチャ

Freewall
Freewall -GitHub

Freewallのデモ

スクリプトのページ自体もデモになっており、さまざまなレイアウトを楽しむことができます。

デモのキャプチャ

Freewall

デモページも数多く用意されています。

デモのキャプチャ

Demo: Nomal Grid

まずは、ノーマルなグリッド状のレイアウト。

デモのキャプチャ

Demo: Image Layout

さまざまなサイズの画像を使ったレイアウト。

以下、少しずつ高度なレイアウトになっていきます。

デモのキャプチャ

Demo: Fit Height

各カードの高さを揃えてレイアウトします。

デモのキャプチャ

Demo: Fit Zone

スライスエンジンを使って、カードをゾーンにフィットさせます。

デモのキャプチャ

Demo: Flexible Layout

フレキシブルなレイアウトにも対応。

デモのキャプチャ

Demo :Piterest Layout

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>

top of page

©2017 coliss