PbTimes 情報誌

jQueryで可変グリッド・Masonryプラグイン

2013/08/06

• Plugin
• jQuery

jQuery 可変グリッドの実装方法

概要

Masonryのプラグインを使うことで、簡単に可変グリッドのWebサイトを制作することができます。
また、今回ではスライダーで各コンテンツのサイズを調整できるようにしてみました。

Masonryプラグインの設定例

まずは、Masonryから「masonry.pkgd.js」を取得します。

今回は、シンプルで簡単な方法を紹介しています。
この他にもいろいろな機能があるので試してみてください。

プラグインとjQueryを読込む

<script src="jquery-1.10.2.min.js"></script>
<script src="masonry.pkgd.js"></script>

jQueryを記述

$('article').masonry({
        isAnimated: true,
        itemSelector: 'section',
        isFitWidth: true
});

HTMLを記述

<article>
    <section class="alignleft box100"></section>
    <section class="alignleft box200"></section>
    <section class="alignleft box300"></section>
    <section class="alignleft box200"></section>
    <section class="alignleft box300"></section>
    <section class="alignleft box100"></section>
    <section class="alignleft box100"></section>
    <section class="alignleft box200"></section>
    <section class="alignleft box300"></section>
    <section class="alignleft box100"></section>
</article>

たったこれだけで、可変グリッドを実装することができます。

スライダーをつけてみる

次は可変グリッドの各コンテンツのサイズを、スライダーで調整できるようにします。
今まで行った設定に以下の設定を追加します。

CSSを読込む

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

jQueryを記述

$('#slider').slider({
	min:60,
	max:180,
	value:120,
	slide : function( event, ui ){
		$('section').css( 'width', ui.value + 'px');
		$('article').masonry({
		        isAnimated: true,
		        itemSelector: 'section',
		        isFitWidth: true
		});
	}
});

HTMLを記述

<div id="slider"></div>

以上で設定が完了しました。

参考までに

今回のようにスライダーでサイズ変更した時などにグリッドを再編成したい場合は、以下の2つの方法があります。

reloadを実行する

$(selecter).masonry('reload');

再定義する

$('article').masonry({
        isAnimated: true,
        itemSelector: 'section',
        isFitWidth: true
});

今回はこちらの方法でしています。

サンプル