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

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

サイトのキャプチャ

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'
	});
});

top of page

©2017 coliss