jquery无法使用无限滚动

我是jQuery和web开发的新手，但我会尽我所能给你最好的问题。

我正在使用jQuery插件在只显示图像的网页中执行无限滚动。 这个插件来自Infinite Scrolling虽然是图片 。 我基本上都是copy/paste但由于某些原因它不起作用（对不起，我不能给你更多的细节，但我不太深入网络开发）。

我正在osboxes.org的虚拟机中测试这个演示。 一台linux机器（Ubuntu）。 我现在正在使用firefox altought我尝试使用Opera或Google Chrome来查看浏览器是否存在问题，但事实并非如此。

我尝试了以下问题没有结果： 无限滚动jquery无法正常工作

jQuery滚动到元素

jQuery无限滚动中的砌体回调在Wordpress中不起作用 – 也不是无限滚动插件

这是jQuery部分：

   $(document).ready(function() { $(document).endlessScroll({ inflowPixels: 300, callback: function() { var $img = $('#images li:nth-last-child(5)').clone(); $('#images').append($img); } }); });  

身体：

 
Infinite Scrolling, Demo 3
 
 
    
 
    
 .... some more images (30 more) ..... 

不幸的是，我似乎无法使页面infinite scroll 。

我从w3shool尝试过这个简单的例子，它就像一个魅力：

      $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });    
This is a heading
 
This is a paragraph.
 
This is another paragraph.
 Click me   

Answer 1

你错过了小提琴中的主要functionendlessScroll

所以我更新了你的小提琴并添加了相应的function。 你可以在这个链接下找到新的小提琴

 (function($) { $.fn.endlessScroll = function(options) { var defaults = { bottomPixels: 50, fireOnce: true, fireDelay: 150, loader: "
Loading...
", data: "", insertAfter: "div:last", resetCounter: function() { return false; }, callback: function() { return true; }, ceaseFire: function() { return false; } }; var options = $.extend({}, defaults, options); var firing = true; var fired = false; var fireSequence = 0; if (options.ceaseFire.apply(this) === true) { firing = false; } if (firing === true) { $(this).scroll(function() { if (options.ceaseFire.apply(this) === true) { firing = false; return; // Scroll will still get called, but nothing will happen } if (this == document || this == window) { var is_scrollable = $(document).height() - $(window).height() <= $(window).scrollTop() + options.bottomPixels; } else { // calculates the actual height of the scrolling container var inner_wrap = $(".endless_scroll_inner_wrap", this); if (inner_wrap.length == 0) { inner_wrap = $(this).wrapInner("
").find(".endless_scroll_inner_wrap"); } var is_scrollable = inner_wrap.length > 0 && (inner_wrap.height() - $(this).height() <= $(this).scrollTop() + options.bottomPixels); } if (is_scrollable && (options.fireOnce == false || (options.fireOnce == true && fired != true))) { if (options.resetCounter.apply(this) === true) fireSequence = 0; fired = true; fireSequence++; $(options.insertAfter).after("
" + options.loader + "
"); data = typeof options.data == 'function' ? options.data.apply(this, [fireSequence]) : options.data; if (data !== false) { $(options.insertAfter).after("
" + data + "
"); $("div#endless_scroll_data").hide().fadeIn(); $("div#endless_scroll_data").removeAttr("id"); options.callback.apply(this, [fireSequence]); if (options.fireDelay !== false || options.fireDelay !== 0) { $("body").after("
"); // slight delay for preventing event firing twice $("div#endless_scroll_marker").fadeTo(options.fireDelay, 1, function() { $(this).remove(); fired = false; }); } else { fired = false; } } $("div#endless_scroll_loader").remove(); } }); } }; })(jQuery); $(document).endlessScroll({ inflowPixels: 300, callback: function() { var $img = $('#images li:nth-last-child(5)').clone(); $('#images').append($img); } }); 

 body { margin: 0; background-color: #F0F0F0; font-family: 'Liberation Sans', Arial, sans-serif; } h1 { text-align: center; } #images { margin: 0 auto; padding: 0; width: 640px; list-style-type: none; } 

  
Infinite Scrolling, Demo 3