jQuery无限滚动不触发

Question

我正在制作一个简单的小网站,为Reddit帖子应用不同的格式化风格,我正在尝试添加无限滚动jQuery插件,但它没有做任何事情.我尝试按照无限滚动页面上的(非常简单的)指令,当它没有做任何事情时,我认为我必须输入错误的东西,但后来我只是复制/粘贴了Masonry/Infinite-Scroll 示例中的代码,它仍然无法正常工作.砌体工作完美(最后)但我无法弄清楚无限滚动有什么问题.我理解jQuery和JavaScript的基础知识,但显然没有大多数人那么多,所以请你帮帮我,让我知道什么是错的？我的网站是在reddit.ymindustries.com上发布的.

谢谢你们,到目前为止你们很少让我失望.

YM

编辑:如果没有足够的图像填满主页上的页面,请访问reddit.ymindustries.com/r/aww获取更多图像.

编辑2:我相信我找到了问题,它在这里描述:https://github.com/paulirish/infinite-scroll/issues/5 现在找出一个修复...

编辑3:添加了一点点黑客,使它有点工作,但它似乎现在无休止地循环第二页.嗯...

Answer 1

我认为你的问题实际上是CSS。使页面的长度超过客户区域的高度。将更多图像添加到 $container

要点是， $container 的底部边缘需要通过窗口底部，因此滚动事件会触发，因此无限滚动可以对此事件做出反应并计算天气或未到达边缘

顺便说一句，在相同的情况下，例如，当我缩小窗口时，您设置的示例正在工作。

===更新===

我找到了一些时间来玩无限滚动，这是最终的工作脚本，只需在脚本中设置 pathParse 方法

$(function () {

        var $container = $('#itemContainer');

        $container.imagesLoaded(function () {
            $container.masonry({
                itemSelector:'.item'
            });
        });
        $container.infinitescroll({
                    navSelector:'.navigation', // selector for the paged navigation
                    nextSelector:'.navigation #next', // selector for the NEXT link (to page 2)
                    itemSelector:'.item', // selector for all items you'll retrieve
                    bufferPx:40,
                    debug:true,
                    columnWidth:function (containerWidth) {
                        return containerWidth / 5;
                    },
                    loading:{
                        finishedMsg:'No more pages to load.',
                        img:'http://i.imgur.com/6RMhx.gif'
                    },
                    pathParse: function(path,page){
                        return $(this.nextSelector).attr("href");
                    }
                },
                // 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);
                    });
                    //console.log("test (never fired :( )");
                }
        );

    });

现在，由于您的下一个链接不会自行更新（http://reddit.ymindustries.com/?after=t3_yh4av），您需要更改回调以从ajax响应中提取最后一个元素并更改下一个链接...可能是这样的

function (newElements) {
                        // hide new items while they are loading
                        var $newElems = $(newElements).css({ opacity:0 });
                        // ensure that images load before adding to masonry layout

                        // ======> if query parameter after=... is caring filename then do this
                        var lastImageUrl= $newElements[$newElements.length-1].attr("src");
                        var lastFileName= lastImageUrl.substring(lastImageUrl.lastIndexOf("/") +1, lastImageUrl.lastIndexOf("."));
                        $("#next").attr("href", "http://reddit.ymindustries.com/?after="+lastFileName);

                        $newElems.imagesLoaded(function () {
                            // show elems now they're ready
                            $newElems.animate({ opacity:1 });
                            $container.masonry('appended', $newElems, true);
                        });
                        //console.log("test (never fired :( )");
                    }