【jQuery】jQuery Masonry
この度jQueryで壁にぶつかり、質問させて頂きます。
現在開発中のWEBサービスにて、jQuery Masonryとアコーディオン機能を組み合わせたページを構築する流れとなっております。
画面イメージとしては・・
Pinterestにアコーディオン機能が付いており、各帯をクリックする毎に内容が表示される機能です。
【Point】横幅は制限がありますが、縦幅には制限が無く、アコーディオンが開閉する毎にグリッド部分の再構築（ムーブアクション）を行いたいのですが、それが上手くいきません。
参考サイト：http://goo.gl/QLQI7
実際のソース（抜粋）：
<script>
jQuery(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
jQuery('#container').masonry({
itemSelector: '.item',
isAnimated:true
});
});
});
</script>
<script>
jQuery(function () {
jQuery("dd").css("display","none");
jQuery("dl dt").click(function(){
var cont = jQuery(this).next();
if(jQuery(cont).css("display")=="none"){
jQuery("dd").slideUp("slow");
jQuery(cont).slideDown("fast");
jQuery("dt").removeClass("select");
jQuery(this).addClass("select");
}
}).hover(
function(){jQuery(this).addClass("over");}
),(
function(){jQuery(this).removeClass("over");}
);
});
</script>
<div id="container">
～ここから～
<div class="item">
<dl>
<dt>タイトル1</dt>
<dd>本文1</dd>
<dt>タイトル2</dt>
<dd>本文2</dd>
<dt>タイトル3</dt>
<dd>本文3</dd>
</dl>
</div>
</div>
～ここまでがLoopで複数のデータが表示される～
なお、jQuery初心者でして具体的な構文までをサポート頂けますと幸いです。
よろしくお願い致します。
