7

我正在制作一个简单的小网站,以将不同的格式样式应用于 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:添加了一些技巧以使其工作,但它现在似乎无休止地循环第二页。唔...

4

3 回答 3

0

我对 jQuery 的“infinitescroll”和 Masonry 也有同样的问题。您可以通过为页面提供更多初始项目来解决此问题,以便插件的滚动检测启动。

在 WordPress 中,这是在“阅读”设置下。默认情况下,WordPress 一次只打开 10 个项目。您可以将该数字增加到 100/页,以更确定窗口最初会被填满。我这里有一些非常糟糕的代码,结果我只需要更长的页面,而不是更多的代码。

因此,如果您没有足够的图像,很难在大型显示器上测试这些插件。也许解决方案是在大型显示器上将图像缩放得更大,这样您就可以更加确定将您的内容放在首屏之下。

如果您认为有人可能会以非常大的显示屏访问您的网站,我不确定答案是什么,除了显示更多项目/页面并可能添加$('#masonry').infinitescroll('retrieve');到您的页脚以加载额外的页面以防万一。

于 2015-01-18T21:01:13.137 回答
0

我认为你的问题实际上是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 :( )");
                    }
于 2012-08-18T14:51:17.970 回答
0

您还需要注意使用的无限滚动版本,因为如果您使用砖石/同位素(版本 2.0b2.110713)附带的版本,则两者都需要一些技巧才能调用该函数而不使用预定义数组:

//old code, to be changed (line 489)
desturl = path.join(opts.state.currPage);
// new code
desturl = (typeof path === 'function') ? path(opts.state.currPage) : path.join(opts.state.currPage);

这已经在新版本的无限滚动中修复

于 2013-01-30T17:58:25.050 回答