超簡単! jQuery Nestedによる動的グリッドレイアウト

/sample1.html
/sample2.html
/sample3.html
/mondrian.html
/js/jquery-1.10.2.min.js
/js/jquery.nested.js

<div id="content" style="width:320px; background-color:#fff">
	<div class="box size11" style="border:dashed 1px;">1x1</div>
	<div class="box size21" style="border:dashed 1px;">2x1</div>
	<div class="box size31" style="border:dashed 1px;">3x1</div>
	...
</div>

$("#content").nested();

settings = {
	selector: '.box', // セレクタはboxクラス
	minWidth: 100, // ボックスの幅の単位は100px
	minColumns: 10, // 最低10単位(100px x 10単位 = 1000px)の幅のボックスをレイアウトする
	gutter: 10, // ボックス間の間隔は10px
	resizeToFit: true, // 空白より大きなボックスを空白に合うまでリサイズする
	resizeToFitOptions: {
			resizeAny: true // 空白より大きいまたは小さなボックスを空白に合うまでリサイズする
	},
	animate: true, // ボックスのレイアウトにアニメーションを使用
	animationOptions: {
			speed: 200, // 各オブジェクトのレンダリング速度は200ms
			duration: 300, // アニメーション実行間隔は300msごと
			queue: true, // オブジェクトを1つずつ順番にアニメーションさせる
			complete: function () { alert("Animation Completed."); } // アニメーション完了後にアラートを表示する
	}
};
$("#content").nested(settings);

// 要素を末尾に追加して再描画する
function append(){
	$("#content").append(create_element());
	$("#content").nested(settings);
}

// 要素を先頭に追加して再描画する
function prepend(){
	$("#content").prepend(create_element());
	$("#content").nested(settings);
}

// 要素の生成
function create_element(){
	var w = Math.floor(Math.random() * 3) + 1;
	var h = Math.floor(Math.random() * 3) + 1;
	return '<div class="box size' + w + h + '" style="border:dashed 1px;">' + w + 'x' + h + '</div>'
}