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

Question

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

我所有的 div 都有 item 的 class 并且在 .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");
    }
});

你 select 从原始项目中随机选择一个项目，使用克隆创建所述项目的新副本，将克隆附加到文档:)

这里是 fiddle：https://jsfiddle.net/collederfomento/d98a15cu/4/

有几点可以改进：

防止函数触发过于频繁
防止函数连续两次克隆相同的项目

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

Trying to make an infinite scroll with a list of div already in the html

html

javascript

jquery

infinite-scroll