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

Posted 2023-05-07

【中文标题】尝试使用 html 中已有的 div 列表进行无限滚动

【英文标题】：Trying to make an infinite scroll with a list of div already in the html

【发布时间】：2019-10-15 06:43:58

【问题描述】：

我正在尝试在 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')
      );
    );
  
);

【参考方案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/

有几点可以改进：

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

【讨论】：

谢谢！！！这似乎是一个不错的方法。但问题是它根本没有反应，当我把它放在我的代码中时......我试图改变'triggerDistance'函数中的'50'值，但什么也没发生。我也调整了视口的大小，更改了 ccs 位置属性。你知道为什么它不起作用吗？与视口大小有关吗？

您能提供给我们您的 HTML 结构吗？我的示例和您的网站之间几乎肯定存在差异（例如，在我的示例中，项目被添加到 html 中，而在您的示例中，它们被添加到具有“内容”类的 div 中）。

这里！我简化了内容但结构相同:)) jsfiddle.net/Macha1011/93mwp4vd/1/

嗨！ :3 您的代码似乎存在一些问题：ID 属性 - 应该是唯一的 - 重复了几次。例如，有两个项目具有“type_diapo”ID。无论如何，这里有一个工作示例：jsfiddle.net/collederfomento/84hbdL5w 我们不选择具有特定 ID 的元素，而是告诉 jQuery 使用 eq 选择器选择具有“item”类的随机项：$(".item:eq("+ randomItem+")")

非常感谢！实际上我昨天解决了我的问题，通过更改 ID 名称，使用数字而不是单词并且它有效；将 type_diapo 更改为 type_1、2,3 等。所以你的第一个解决方案和第二个一样有效！但我想听听你的建议，我应该更喜欢哪一个？是第一个，也许对 jsmachine 要求更多，然后是第二个？你怎么看？