jQuery砌体无限滚动设置

Question

我知道有几个关于 is 的问题，都检查了，但由于我不明白如何开始，所以无法让它工作......

我有基本的砌体设置：

http://jsfiddle.net/Lj0q8fe6/

现在如何设置首先显示多少个元素以及如何触发以无限 scoll 开始加载下一个元素？请帮忙

我发现了很多这样的：

 jQuery(window).load(function(){

jQuery('.hfeed').masonry({
    singleMode: true, 
    itemSelector: '.box'
});

jQuery('.hfeed').infinitescroll({
  navSelector  : '.pagination',  // selector for the paged navigation 
  nextSelector : '.pagination .next',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loadingImg : '/wp-content/themes/sprppl/images/loader.gif',
  loadingText  : "Loading...",
  donetext  : 'No more pages to load.',
  debug: false,
  errorCallback: function() { jQuery('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   }
  },
  // call masonry as a callback
  function( newElements ) { jQuery(this).masonry({ appendedContent: jQuery( newElements ) }); }
);      

});

但是当我插入它时，什么也没有发生。如何从这里开始？

Answer 1

这是一个

jsFiddle

使用您的 javascript 外部资源更正和固定的代码以及一些无限滚动代码。您需要使用要加载的项目创建一个 index2.html 页面以对其进行测试，因为我无法将其放在小提琴中。最简单的测试方法是复制一个页面并将其命名为 index2.html。

$(document).ready(function() {
var $container = $('#content');
$container.imagesLoaded(function() {
// Initialize Masonry
$container.masonry({
    columnWidth: 320,
    itemSelector: '.item',
    isFitWidth: true,
    isAnimated: !Modernizr.csstransitions
});

});
$container.infinitescroll({
  navSelector  : 'a#next',  // selector for the paged navigation 
  nextSelector : 'a#next',  // 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',
      msgText: "<em>Loading the next set of posts...</em>"
    },
errorCallback: function() { $('#infscr-loading').animate({opacity: 0.8},2000).fadeOut('normal');      }
 },
// call masonry as a callback
  function( newElements ) {
var $newElems = $( newElements );
$container.masonry( 'appended', $newElems );
}
);      
});