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

Jquery砌体无法获得多列

1 个答案: