Jquery在获取多个列时遇到问题

我正在使用Jquery砌体插件来构造一个页面，使其具有两列

我不确定插件是否正常工作……它只显示了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>

script src=“//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js”>
.项目{
宽度：480px；
.....
}
......
$（函数（）{
var$container=$（“#container”）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.tile”，
列宽：100
});
});
$container.infinites卷({
导航选择器：'.flickr_分页'，//分页导航的选择器
nextSelector:'a.next_page'，//下一个链接（到第2页）的选择器
itemSelector:'.tile'，//将检索的所有项目的选择器
装载：{
FinishedMg:“没有更多页面要加载。”，
img:'http://i.imgur.com/6RMhx.gif'
}
},
//触发器作为回调
函数（新元素）{
//在加载新项目时隐藏它们
var$newElems=$（newElements）.css（{opacity:0}）；
//确保在添加到砌体布局之前加载图像
$newElems.imagesLoaded（函数（）{
//显示元素现在他们准备好了
$newElems.animate（{opacity:1}）；
$container.mashing（'added'，$newElems，true）；
});
}
);
});

希望您现在已经解决了这个问题。以防万一如果没有，则使用以下内容更改列宽：

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