[JS]変更時のアニメーションが気持ちいい、レスポンシブ対応のかっこいいグリッドを生成するスクリプト -Grid—A—Licious

サイト構築 -JavaScript

Post on:2012年10月19日

Grid—A—Liciousのデモ

まずは、Grid—A—Liciousのベーシックな動作が確認できるデモからご紹介。
アレンジは、下記のGrid—A—Liciousの実装例で。

ページいっぱいに高さの異なるパネルが同じ間隔で配置されています。

デモページ：デスクトップサイズ

ページ上部のアイコンをクリックすると、表示サイズを変更できます。
もちろん、ブラウザのサイズを変更しても可。

デモページ：タブレットサイズ

スムーズなアニメーションでパネルのレイアウトがスピーディに最適化されます。

デモページ：スマフォサイズ

Grid—A—Liciousの使い方

Grid—A—Liciousは2008年にリリースされた当時は単にグリッド状に配置するだけのプラグインでしたが、今回レスポンシブデザイン対応になり生まれ変わりました。
実装は非常に簡単で、オプションも実用的なものが揃っています。

Step 1: 外部ファイル

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

<script src="js/jquery.js"></script>
<script src="js/jquery.grid-a-licious.js"></script>

Step 2: HTML

パネルはdiv要素で実装し、div要素で内包します。

<div id="device">
	<div class="item">パネル</div>
	<div class="item">パネル</div>
	<div class="item">パネル</div>
	<div class="item">パネル</div>
	...
	...
</div>

Step 3: JavaScript

jQueryのセレクタでラッパを指定し、スクリプトを実行します。

$("#device").gridalicious({});

スクリプトのオプション

オプションではレイアウトの微調整やアニメーションの設定ができます。

width (Defult: 225px): レイアウトの全体の幅; デスクトップでもスマフォでもいっぱいに表示する場合は「width: '100%'」
gutter (Default: 20px): パネル間の溝のサイズ
selector (Default: .item): 各パネルのclass名
animate (Default: false): アニメーションの有無
queue (Default: true): アニメーションの待ち行列オブジェクトの有無
speed (Default: 200): アニメーションのスピード
duration (Default: 300): アニメーションの遅延時間
effect (Default: fadeInOnAppear): アニメーションのエフェクト
complete (Default :function()): アニメーションの完了時のコールバック

Grid—A—Liciousの実装例

Example 1

幅をカスタマイズし、デフォルトの溝(20px)を使用した例です。

$("#example1").gridalicious({
	width: 100
});

Example 2

幅だけなく、溝のサイズもカスタマイズした例です。

$("#example2").gridalicious({
	gutter: 1,
	width: 100
});

Example 3

最後はパネルを増やす際のアニメーションを設定します。
上部のボタンをクリックすると、パネルの上部（下部）にフェードのアニメーションでパネルが追加されます。

Example 3：フェードでパネルが追加

スクリプトはオプションの「animate」を「true」にし、設定します。

$("#example3").gridalicious({
	gutter: 1,
	width: 75,
	animate: true,
	animationOptions: {
		speed: 200,
		duration: 300,
		complete: onComplete
	},
});

ボタンは下記のようになります。

$('#prepend').click(function () {
	$("#example3").gridalicious('prepend', makeboxes());
});
$('#append').click(function () {
	$("#example3").gridalicious('append', makeboxes());
});