如何使用砖石启用无限滚动？答案

【问题标题】：How to enable infinite scrolling with masonry?如何使用砖石启用无限滚动？
【发布时间】：2012-11-24 02:07:27
【问题描述】：

那么如何在我的砌体流体布局中添加或集成无限滚动？我已经用谷歌搜索但不明白。这是我到目前为止得到的：

/**
 * Base js functions
 */

$(document).ready(function(){
    var $container = $('.container');

    var gutter = 20;
    var min_width = 270;
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.box',
            gutterWidth: gutter,
            isAnimated: true,
              columnWidth: function( containerWidth ) {
                var box_width = (((containerWidth - 2*gutter)/3) | 0) ;

                if (box_width < min_width) {
                    box_width = (((containerWidth - gutter)/2) | 0);
                }

                if (box_width < min_width) {
                    box_width = containerWidth;
                }

                $('.box').width(box_width);

                return box_width;
              }
        });
    });
});

有人可以帮忙吗？非常感谢！

【问题讨论】：

标签： jquery css jquery-masonry infinite-scroll fluid-layout

【解决方案1】：

如果您查看masonry site 上无限滚动示例的源代码，您可以看到在初始 Masonry 设置后完成所有工作的函数。在 $container.imagesLoaded 函数之后，添加 Infinite Scroll 配置，然后在回调函数中触发 Masonry。另外，请务必在 jquery.masonry.min.js 之后包含 jquery.infinitescroll.min.js。

这是该页面的 JS：

$(function(){

var $container = $('#container');

$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector: '.box',
    columnWidth: 100
  });
});

// Infinite Scroll
$container.infinitescroll({
  navSelector  : '#page-nav',    // selector for the paged navigation 
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // 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 ); 
    });
  }
);

});

【讨论】：