可変グリッドレイアウトjQuery - jQuery.vgrid.jsをRailsに組み込んでみた

Eye Catch Image

超有名ブログ「彼女からは、おいちゃんと呼ばれています」の最先端テック記事「Rails3、Twitter Bootstrap、Bootswatch を使ったレスポンシブなエロサイト「babyshark」をリリースしました」に載っていた可変グリッドレイアウト用のjQuery「jquery.vgrid.js」をRailsに導入手順を作ってみました。

デモサイト


🐞 jQuery.vgrid.js/jquery.easingのダウンロード

🎳 JavaScriptの読み込み設定

app/assets/javascripts/application.jsに次の記述があることを確認。ない場合は追加。(通常デフォルトで設定済)

// jQueryの読み込みに関する設定
//= require jQuery
//= require jquery_ujs
// javascripts配下にあるjsファイルを読み込む設定
//= require_tree .

Gemfileに次のコードがあることを確認(通常デフォルトで設定済)

gem 'jquery-rails'

🎉 JavaScript側のコード追加

JavaScriptの場合は次のコードを追加。

$(function(){
// #container配下のdivがグリットレイアウトで並びます
$("#container").vgrid({
easing: "easeOutQuint",
time: 500,
delay: 20,
fadeIn: {
time: 300,
delay: 50
}
});
});

Coffeescriptの場合は以下のコードを追加

#container配下のdivがグリットレイアウトで並びます
vg = $("#grid-content").vgrid
easing: "easeOutQuint"
useLoadImageEvent: true
useFontSizeListener: true
time: 500
delay: 20
fadeIn:
time: 300
delay: 50

🍄 View側のコード追加

ERBの場合は次のコードを追加。

<div id="grid-content">
<div id="grid-a">
<h3>AAA</h3>
<p><img src="http://dummyimage.com/150x120" alt="dummy" /></p>
</div>
<div id="grid-b">
<h3>BBB</h3>
<p><img src="http://dummyimage.com/150x60" alt="dummy" /></p>
</div>
</div>

hamlの場合は次のコードを追加。

#grid-content
#grid-a
%h3 AAA
%p
%img{src: "http://dummyimage.com/150x120"}/
#grid-b
%h3 BBB
%p
%img{src: "http://dummyimage.com/150x60"}/

😀 CSSのコード追加

CSS側のコードを追加します。ここは自由なのでサイトデザインに合わせて調整して下さい。

#grid-content div {
width: 150px;
height: auto;
border: 1px solid #bbb;
background-color: #eee;
margin: 5px;
padding: 3px;
}

🐰 動作確認

ブラウザで確認すると以下のようになっていると思います。(divは複数にしています)

fpu_tmp_1354628118.4887_b59e09

もしjQuery.vgrid.jsの詳しい機能を知りたい、カスタマイズしたい場合は、jQueryで美しいグリッドレイアウトを実現できる「jquery.vgrid.js」がわかりやすくてオススメです!

🚌 参考リンク

可変グリッドレイアウトのjQueryプラグイン書いたよ

📚 おすすめの書籍