Question

我正在努力学习编写Tumblr主题（我没有Wordpress的钱），我想弄清楚如何实现帖子的“无限/无限滚动”（而不是分页）;我宁愿不使用2个主要的无限滚动脚本中的任何一个，因为infinite-scroll-js（由Paul Irish提供）是相当充分的文档（我能够让它工作）但我想更多地控制帖子的方式加载，可以这么说，Cody Sherman的无限滚动代码根本没有记录，我不知道它应该如何使用（各种各样的指令由几个非编码器分发，他们对Javascript的掌握比我少，那是在说些什么。）

我不知道任何Ajax，但我愿意阅读尽可能多的JS文档。在添加帖子时我是否可以使用以下序列，或者我是否需要像Paul Irish一样理解Ajax？

上传：（身体）

获取所有.post元素（带子节点），将它们从DOM中删除，同时将它们添加到基本上只是列表（数组？JS术语？）的var
加载一些计算出的帖子（会有一个算法，可能是基于帖子高度或其他东西，或者可能是动态测量它们的时候）/将它们添加到Masonry容器中，动画，当用户滚动到页面，正文或砌体容器的底部（还没有决定哪个）

这可能是合理的还是我会浪费我的时间？

Answer 1

是的，您需要使用 Ajax 。以下是我在 Wordpress 上使用 JQuery 和 Masonry 进行操作的方法，但在任何其他网站上应该非常相似。我正在使用 Masonry 功能附加添加新图片。您可以在jorarts.org

上的图库中看到它的实际效果

jQuery.ajax({
    type:"POST",
    url: "/wp-admin/admin-ajax.php",
    data: myData,
    success:function(response){
        jQuery("#LoadingImage").hide();

        if(response){
            var $newPics=jQuery(response).css({ opacity: 0 });;

            $newPics.imagesLoaded(function(){
                jQuery("#galleryPlaceholder").append($newPics).masonry( 'appended', $newPics, true );
                $newPics.animate({ opacity: 1 });
                jQuery("#galleryPlaceholder a").colorbox({rel:currCat, 
                    scalePhotos:true,
                    maxWidth:"90%",
                    maxHeight:"90%"});
            });
        }
    }
});

以下是 JQuery Ajax 文档https://api.jquery.com/jQuery.ajax/

Answer 2

On，jScroll是一个用于无限滚动的jQuery插件，由Philip Klauzinski编写。对我来说听起来像个不同的人！

只使用Masonry.js可以获得“无限滚动”效果吗？

2 个答案: