Masonry風のグリッドレイアウト採用時に、ぜひ導入したいJavaScriptのライブラリ［Macy.js］を紹介します。

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

Macy.js : 動作サンプル

ウィンドウサイズの変えると、その横幅に応じてカラム数が増減します。

jQyeryなどの外部ファイルは一切不要で、単体で動作するスグレモノ。
実装方法は以下より。

プラグイン［Macy.js］の使い方

早速ですが、まずは公式サイトから、必要なファイルをダウンロードしてきます。

Macy.js : 公式サイト

最低限必要なファイルは「macy.js」または１つだけ。あらかじめ圧縮されているのでダウンロードしたものをそのまま使いましょう。
htmlファイルの適当な個所で読み込んでおきます。

<body>
<script src="macy.js"></script>
</body>

続いて［Macy.js］で動かす各要素を構築します。
ここでは仮に、id="macy" と名付けた親要素の中にリストを配置しています。

<ul id="macy">
	<li>...</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
	...
</ul>

スタイルシート（CSS）も適当に記述しておきましょう。

#macy {width:100%; list-style:none;}
#macy li {display:block;}

最後に［Macy.js］を動かすためのJavaScriptの設定を記述します。
以下は一例で、サンプルサイトで使っているもの。

<script>
var masonry = new Macy({
	container: '#macy',
	trueOrder: false,
	waitForImages: false,
	useOwnImageLoader: false,
	margin: {
		x: 4,
		y: 4
	},
	columns: 6,
	breakAt: {
		1200: {columns: 5},
		940: {columns: 4},
		740: {columns: 3}
	}
});
</script>

以上で、基本的な設定は完了。これだけでMasonry風のグリッドレイアウトを実装できます。

グリッドレイアウトのサイトを構築する際、［Masonry］の代替として、選択肢の１つに加えてみることをお勧めします。

公式サイト：http://macyjs.com