[JS]エレメントをグリッド状にランダムに配置したり、Pinterest風に配置するスクリプト - BlocksIt.js

ページ上のさまざまなエレメントをブロックに変換し、グリッドに沿って配置するjQueryのプラグインを紹介します。
ブラウザのサイズを変更するとアニメーションで配置を変更する機能はよく見かけますが、他にもリロードする度にランダムに配置を変更することもできます。

BlocksIt.js

• BlocksIt.jsのデモ
• BlocksIt.jsの使い方

BlocksIt.jsのデモ

デモは2種類あります。
まずは、リロードする度にランダムに配置を変更するのから。

Demo 1

リロードすると、レイアウトは幅7カラム分の制限でランダムに配置を変更します。

続いて、Pinterest風デザインのデモ。

Demo 2

こちらはブラウザのサイズを変更すると、それぞれのマージンを維持しつつ配置を変更します。

BlocksIt.jsの使い方

Step 1: 外部ファイル

「jquery.js」と当スクリプトをhead内に記述します。
※jQueryは1.7.1で開発。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="blocksit.js"></script>

Step 2: HTML

HTMLは対象となる範囲をラッパーで包み、各パネルを同列に配置します。
パネルはデフォルトでdiv要素を対象にしていますが、任意の要素で実装できます。

<div id="container">
	<div>パネル</div>
	<div>パネル</div>
	<div>パネル</div>
	...
	...
</div>

Step 3: JavaScript

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

$(document).ready(function() {
   $('#objectID').BlocksIt();
});

スクリプトのオプション

オプションではレイアウトのルールを設定します。

numOfCol(default: 5)

カラムの数

offsetX(default: 5)

左右のマージン

offsetY(default: 5)

天地のマージン

blockElement(default: ‘div’)

ブロックに変換するエレメント

※デフォルトはdiv要素で、任意のclassをブロックに変換することもできます。

オプションを使用すると、下記のようになります。

$(document).ready(function() {
	$('#container').BlocksIt({
		numOfCol: 4,
		offsetX: 8,
		offsetY: 8,
		blockElement: '.block'
	});
});