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

ページの画像(1)

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

DEMO

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

AD

Javascriptの実装

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

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

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

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

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

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

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

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

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

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

frog さんより
すごく解りやすいです!
ありがとうございます!

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

どうしても再現できないのですが…
管理人 さんより
frog様
コメントありがとうございます。
改めて見るとChromeやSafariの場合左上から出てきますね。気付いてませんでした(;´Д`)

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

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