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