複数の列を取得する際にJqueryの石積みに問題が発生する

Question

Jqueryのmasonryプラグインを使用して、2つの列を持つようにページを構成しています。

プラグインが動作しているかどうかわかりません... 1列しか表示されず、Jqueryコードの列幅を変更しても何も起こりません。

コードは以下のとおりです - アドバイスをいただきありがとうございます！

おかげで、

ファイサル

script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="/assets/jquery.js"></script> 
<script src="/assets/jquery.masonry.min.js"></script> 

<style> 
.item { 
width: 480px; 
..... 
} 

</style> 
<div id="container"> 
<div class="item"> 
...... 
</div> 
</div> 

<script> 
$(function(){ 
    var $container = $('#container'); 
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector : '.tile', 
     columnWidth : 100 
     }); 
    }); 

$container.infinitescroll({ 
     navSelector : '.flickr_pagination', // selector for the paged navigation 
     nextSelector : 'a.next_page', // selector for the NEXT link (to page 2) 
     itemSelector : '.tile',  // selector for all items you'll retrieve 
     loading: { 
      finishedMsg: 'No more pages to load.', 
      img: 'http://i.imgur.com/6RMhx.gif' 
     } 
     }, 
     // trigger Masonry as a callback 
     function(newElements) { 
     // hide new items while they are loading 
     var $newElems = $(newElements).css({ opacity: 0 }); 
     // ensure that images load before adding to masonry layout 
     $newElems.imagesLoaded(function(){ 
      // show elems now they're ready 
      $newElems.animate({ opacity: 1 }); 
      $container.masonry('appended', $newElems, true); 
     }); 
     } 
    ); 
}); 
</script> 
</div> 
</div> 

Answer 1

がうまくいけば、今ではそれを解決しているだろう。その場合は、次のように列幅を変更してください。

$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector : '.tile', 
    columnWidth: function(containerWidth) 
    { 
    return containerWidth/2; 
    } 
    }); 
});