Masonryのプラグインを使うことで、簡単に可変グリッドのWebサイトを制作することができます。
また、今回ではスライダーで各コンテンツのサイズを調整できるようにしてみました。
まずは、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
});
今回はこちらの方法でしています。