Question

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

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

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

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

}）;

如何使用砌体启用无限滚动？

1 个答案: