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

2013/08/06

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

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

サンプル

  • このエントリーをはてなブックマークに追加
Related

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...

Rails devise で複数モデルの認証機能を実装

Rails devise で複数モデルを管理 概要 rails のログイン認証 Gem「devise」のインストール・設定方法を紹介します。 よく「d...
トップへ戻る