如何使用masonry启用无限滚动？ [英] How to enable infinite scrolling with masonry?

问题描述

那么，如何添加或集成无限滚动与我的砖石流体布局？我已经google了，但不明白。这是我到目前为止：

So how do I add or integrate infinite scrolling with my masonry fluid layout? I have already googled but don't understand.Here is what I got so far:

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

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

Can someone help? Thank you so much!

推荐答案

如果您查看了 masonry site 您可以看到在初始Masonry安装后执行所有工作的函数。在$ container.imagesLoaded函数之后，添加无限滚动配置，然后在回调函数中触发Masonry。此外，请务必在jquery.masonry.min.js之后加入jquery.infinitescroll.min.js。

If you check out the source code for the infinite scroll example on the masonry site you can see the function that does all the work after the initial Masonry setup. After your $container.imagesLoaded function, add in the Infinite Scroll configs and then trigger Masonry in a callback function. Also, be sure to include jquery.infinitescroll.min.js after jquery.masonry.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 ); 
    });
  }
);

}）;

这篇关于如何使用masonry启用无限滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！