Masonryプラグインですが、このプラグインを使用してものすごく簡単に凄まじくレスポンシブでインタラクティブなサイトを作る方法を紹介します。DEMO「要素の追加」や「一つ目を削除」というボタンをクリックすると要素の増減が凄まじくインタラクティブなのが分かると思います。WebサービスではAjaxを使って要素の増減を遷移なしで行うケースが増えていますので、その際に活用できるのではないかと思います。Masonryは要素を増減した際でも、すべての要素をabsoluteで配置しています。単純に要素を足したり引いたりしても、追加された要素が正しく配置されません。そのような状況も想定されており、包括する要素に対して処理完了後にmasonry(‘reload’)というメソッドを実行するだけで要素を再配置してくれます。以下のように処理(ここではappendやremoveを使っている)を行ったあとにmasonry(‘reload’)を実行すれば、要素が再配置されます。//ここで再配置});});})(jQuery);</script>HTMLはたった1行で完成?凄まじくレスポンシブデザインなサイトの作り方という記事が分かりやすかったです。HTMLはきわめてシンプルに構成できるので、単純なWebサイトからWebアプリケーションまで応用できるのではないかと思います。class="item">もともとある要素もともとある要素</div></div>でももっといいのがありますよjQuery.vgrid.jsというプラグインならIE6でも安定して動いてくれます(僕の見る限り)。今回の仕組みを使ってWebサービスを運営していますWeb制作者の(苦笑)というインタラクティブでレスポンシブなWebサービスを運営しています。_)m(これが言いたかった)思うことはいろいろあります初見でのインパクトは強いですが・・・。いう可変グリッドの草分け的存在(だと思う)のmarunouchi.comがこの可変グリッドをやめた理由を知りたいところです。コメントをキャンセルメールアドレスが公開されることはありません。AMfrog様コメントありがとうございます。見るとChromeやSafariの場合左上から出てきますね。́Д`)正直原因は分からないのですが、DEMOのHTMLは大枠のdiv#mainに10pxのpaddingを指定し、子要素である.itemに10pxのmarginを指定しています。追加した要素は10px上と左にずれているように見えますので、親要素のpaddingか子要素のmarginの取得タイミングが間に合っていないように見えます。masonryのバグというよりも、jQueryのwidth()やheight()メソッドのバグ(仕様?)かもしれません。原因が分かりましたらブログの記事にしたいと思います。2Archive2020年92019年182018年102017年172016年202015年212014年312013年552012年50SearchSocialAboutWeb制作会社ではたらく社畜のアウトプットです。Web制作技術のほか、雑記など。当ブログと運営者についてもっと詳しく見るプライバシーポリシーContactお問い合わせは下記フォームをご利用ください。お時間がございましたらお問い合わせの前にこちらをご一読いただけますと幸いです。Wood-Roots:blog。