【Javascript】凄まじくレスポンシブなjQuery masonryプラグインを使って凄まじくインタラクティブなWebサイトを簡単につくる | Wood-Roots:blog

2012
10/18

凄まじくレスポンシブなjQuery masonryプラグインを使って凄まじくインタラクティブなWebサイトを簡単につくる

NHKスタジオパークの凄まじいレスポンシブっぷりで注目を集めているjQuery Masonryプラグインですが、このプラグインを使用してものすごく簡単に凄まじくレスポンシブでインタラクティブなサイトを作る方法を紹介します。

DEMO

「要素の追加」や「一つ目を削除」というボタンをクリックすると要素の増減が凄まじくインタラクティブなのが分かると思います。
WebサービスではAjaxを使って要素の増減を遷移なしで行うケースが増えていますので、その際に活用できるのではないかと思います。

ADs

Javascriptの実装

jQuery Masonryは要素を増減した際でも、すべての要素をabsoluteで配置しています。ですので単純に要素を足したり引いたりしても、追加された要素が正しく配置されません。
しかしそのような状況も想定されており、包括する要素に対して処理完了後にmasonry(‘reload’)というメソッドを実行するだけで要素を再配置してくれます。

以下のように処理（ここではappendやremoveを使っている）を行ったあとにmasonry(‘reload’)を実行すれば、要素が再配置されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script src="https://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.7");</script>
<script src="jquery.masonry.min.js"></script>
<script>
(function($){
$(function(){
$('#main').masonry({
isAnimated: true,
duration: 400,
itemSelector: '.item',
isFitWidth: true
});
//要素を足す処理
$('#add').on('click',function(){
//実際にWebアプリケーションなどで使用する場合は、以下のaddItemの内容をAjaxなどで動的に取得することになります
var addItem = $('<div></div>').addClass('item').html('後から足された要素');
$('#main').prepend(addItem).masonry('reload'); //ここで再配置
});
 
//要素を消す処理（1個目を消している）
$('#remove').on('click',function(){
//実際には見た目上removeするだけでなくて、削除する命令をPOSTするなどの処理をあわせて行わなければなりません
$('#main .item:first').remove();
$('#main').masonry('reload'); //ここで再配置
});
});
})(jQuery);
</script>

HTMLはたった１行で完成？凄まじくレスポンシブデザインなサイトの作り方という記事が分かりやすかったです。HTMLはきわめてシンプルに構成できるので、単純なWebサイトからWebアプリケーションまで応用できるのではないかと思います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<div id="head">
<input type="button" value="要素の追加" id="add" />
<input type="button" value="一つ目を削除" id="remove" />
</div>
 
<!-- #mainの中が実際にjQuery.masonryを使用したレイアウトの部分です -->
<div id="main">
<div class="item">
もともとある要素
</div>
<div class="item">
もともとある要素もともとある要素もともとある要素
</div>
<div class="item">
もともとある要素もともとある要素
</div>
<div class="item">
もともとある要素もともとある要素
</div>
<div class="item">
もともとある要素
</div>
<div class="item">
もともとある要素
</div>
<div class="item">
もともとある要素もともとある要素
</div>
<div class="item">
もともとある要素
</div>
<div class="item">
もともとある要素もともとある要素
</div>
<div class="item">
もともとある要素もともとある要素もともとある要素もともとある要素もともとある要素もともとある要素
</div>
<div class="item">
もともとある要素もともとある要素もともとある要素
</div>
<div class="item">
もともとある要素
</div>
<div class="item">
もともとある要素もともとある要素もともとある要素
</div>
<div class="item">
もともとある要素もともとある要素
</div>
</div>

でももっといいのがありますよ

jQuery.vgrid.jsというプラグインならIE6でも安定して動いてくれます（僕の見る限り）。

今回の仕組みを使ってWebサービスを運営しています

Web制作者の（苦笑）というインタラクティブでレスポンシブなWebサービスを運営しています。投稿するとインタラクティブっぷりが分かると思うので投稿お待ちしていますm(_ _)m（これが言いたかった）

思うことはいろいろあります

初見でのインパクトは強いですが・・・。
こういう可変グリッドの草分け的存在（だと思う）のmarunouchi.comがこの可変グリッドをやめた理由を知りたいところです。

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

すごく解りやすいです！
ありがとうございます！

ただ、DEMOを拝見して、気になったのが
「後から足された要素」は何故フワっと現れるのでしょう？

どうしても再現できないのですが…

  • frog
  • 2012年11月16日 12:54 AM

frog様
コメントありがとうございます。
改めて見るとChromeやSafariの場合左上から出てきますね。気付いてませんでした（;´Д｀）

正直原因は分からないのですが、DEMOのHTMLは大枠のdiv#mainに10pxのpaddingを指定し、子要素である.itemに10pxのmarginを指定しています。
追加した要素は10px上と左にずれているように見えますので、親要素のpaddingか子要素のmarginの取得タイミングが間に合っていないように見えます。
masonryのバグというよりも、jQueryのwidth()やheight()メソッドのバグ（仕様？）かもしれません。

原因が分かりましたらブログの記事にしたいと思います。

Category

Archive

Search

Social