グリッドに沿って要素をタイル状に並べる jQueryプラグインとして、これまでにも［Masonry］や［Isotope］を紹介してきました。
今日紹介する［Freetile.js］も、前者２つと同じような機能を備えたプラグインです。

まずはサンプルをご覧ください。

Freetile.js：サンプル

導入方法や使い方も［Masonry］や［Isotope］とまったく同じ。
まずは公式サイトからプラグイン本体をダウンロードしてきましょう。

Freetile.js

また、忘れずに［jQuery.js］もダウンロードしてきてください。

手に入れた２つのファイル、［jQuery.js］と［Freetile.js］は、html の<head>〜</head>内で読み込みます。

<script src="../js/jquery.js"></script>
<script src="../js/freetile.js"></script>

仮に、タイル状に並べたい要素群を包括する親要素が［#conteiner］で、その子要素が［.item］であると仮定します。

<div id="container">
	<div class="item">サンプル</div>
	<div class="item">サンプル</div>
	<div class="item">サンプル</div>
	<div class="item">サンプル</div>
	<div class="item">サンプル</div>
</div>

この場合、［Freetile.js］を起動させるスイッチは以下のような記述になります。

<script>
$(function() {
	$('#container').freetile({
	selector: '.item'
	});
});
</script>

最後に、細かいデザインの装飾をCSSで設定すれば完成です。

Freetile.js：サンプル

ご覧頂いたとおり、幅も高さもバラバラな、かなり複雑な要素の組み合わせでも綺麗に配置してくれます。
大きさの異なる要素を並べたいときは［Masonry］や［Isotope］よりもコチラの［Freetile.js］を使う方が便利です。

デメリットとしては、配置の処理をすべてプラグイン側に任せてしまうのでカスタマイズが難しいという点。しかし逆に初心者の方にはこのほうが優しいかもしれません。