尝试使用 html 中已有的 div 列表进行无限滚动

Question

我正在尝试在 jQuery 中编写一个函数，该函数可以使用我页面中已有的 div 创建一个无限滚动。当您到达原始内容的末尾时，我想让它们随机出现并加载。问题是我刚刚开始使用 jQuery，我真的不知道该由谁来做！

我所有的 div 都有一个 item 类，并且在 .content div 中。目前我有 11 个。

我尝试.append(specific div) 并且它有效，但我不知道如何使用 div 列表来做到这一点。

有人知道我应该怎么做吗？

    $(document).ready(function() {
      var collection = $("div.content .item").get();
      collection.sort(function() {
        return Math.random() * 10 > 5 ? 1 : -1;
      }); 

      $.each(collection, function(i, el) {
        $(el).appendTo($(el).parent());
      });
    });

    $(window).scroll(function() {
      if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        $(".content").append('Here is where I dont know what I should write')
      });
    });
  }
});

Answer 1

嗨：3 jquery clone() 函数可能对您有所帮助：

let triggerDistance = $(document).height() - $(window).height() - 50;
let OriginalItems = $(".item").length;

$(window).scroll(function() {
    let scrolledDistance = $(window).scrollTop();
    if ( scrolledDistance > triggerDistance) {
        var randomItem = Math.floor(Math.random() * OriginalItems);
        var clonedItem = $("#item_"+randomItem).clone();
        clonedItem.removeAttr('id');
        clonedItem.appendTo("html");
    }
});

您从原始项目中选择一个随机项目，使用克隆创建该项目的新副本，然后将克隆附加到文档中:)

这是一个小提琴：https://jsfiddle.net/collederfomento/d98a15cu/4/

有几点可以改进：

• 防止函数过于频繁地触发
• 防止函数连续两次克隆同一项目