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

Question

我正在尝试学习编写 Tumblr 主题代码（我没钱买 Wordpress），我想弄清楚如何实现帖子的“无限/无尽滚动”（而不是分页）；我宁愿不使用 2 个主要的无限滚动脚本中的任何一个，因为 infinite-scroll-js （由 Paul Irish 编写）有据可查（我能够让它工作），但我希望更多地控制帖子的加载方式，可以这么说，并且 Cody Sherman 的无限滚动代码根本没有记录，我不知道应该如何使用它（广泛不同的指令由几个非编码人员分发，他们对 Javascript 的掌握比我少，那就是说点什么）。

我不了解任何 Ajax，但我愿意根据需要阅读尽可能多的 JS 文档。我可以在突然添加帖子时使用以下顺序，还是我需要像 Paul Irish 那样了解 Ajax？

加载：（主体）

1. 获取所有 .post 元素（带有子元素），将它们从 DOM 中删除，同时将它们添加到基本上只是帖子列表（数组？JS 术语？）的 var 中

2. 加载一些计算出来的帖子数（可能会有一个算法，可能基于帖子高度或其他东西，或者可能在它们出现时动态测量它们）/将它们添加到 Masonry 容器中，动画，当用户滚动到页面、正文或 Masonry 容器的底部（尚未决定哪个）

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

Answer 1

是的，您需要使用 Ajax。以下是我在 Wordpress 上使用 JQuery 和 Masonry 的方法，不过在任何其他网站上应该都差不多。我正在使用 Masonry 功能 Append 来添加新图片。您可以在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 编写。对我来说听起来像一个不同的人！