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

PHPで動画の撮影日を取得

PHPで動画の撮影日を取得 概要 PHPからffprobeコマンドを実行し、動画の撮影日時を取得します。 コード $posted_at = ...

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 ...
トップへ戻る