Javascript jQuery无限滚动设置

我知道有几个问题是关于，检查了所有，但就是不能让它工作，因为我不知道如何开始

我有基本的砖石结构：

现在，我如何设置一开始显示多少个元素，以及如何触发开始加载带有无限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 ) }); }
);      

});

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

这里有一个

使用javascript外部资源更正和修复代码以及一些infinitescroll代码。您将需要创建一个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 );
}
);      
});

$（文档）.ready（函数（）{
var$container=$（“#content”）；
$container.imagesLoaded（函数（）{
//初始化砌体
$container.com({
列宽：320，
itemSelector:“.item”，
是的，
我说：！现代化
});
});
$container.infinites卷({
navSelector:'a#next'，//分页导航的选择器
下一个选择器：“a#next'，//下一个链接的选择器（到第2页）
itemSelector:'.box'，//将检索的所有项目的选择器
装载：{
FinishedMg:“没有更多页面要加载。”，
img:'http://i.imgur.com/6RMhx.gif',
msgText：“正在加载下一组帖子…”
},
errorCallback:function（）{$（'#infsr load'）。动画（{opacity:0.8}，2000）。淡出（'normal'）；}
},
//调用砌体作为回调
函数（新元素）{
var$newElems=$（新元素）；
$container.mashing（'added'，$newElems）；
}
);      
});

您的JSFIDLE无法工作，因为您指向javascripts的链接指向的是网页，而不是脚本。你从来没有加载过imagesloaded.js，而且你的imagesloaded函数也不正确。这里是一个修正的小提琴，看看它实际工作（还没有添加无限滚动），这是非常有意义的。。当我向下滚动时，仍然没有发生任何事情。。控制台中没有错误：/你有没有我可以看一看的砖石无限卷轴的工作示例？开始工作了。。需要换一个接一个的。。。不管什么原因