jquery masonry无法获得多列

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; 
    } 
    }); 
});