JQuery：在预加载的数据上无限（有限）滚动答案

【问题标题】：JQuery: Infinite (finite) scrolling on pre-loaded dataJQuery：在预加载的数据上无限（有限）滚动
【发布时间】：2016-09-20 08:56:32
【问题描述】：

我有数据，我有一个 4 列的 Div Grid。

我希望在预加载的数据上进行无限（有限）滚动。

我想在向下滚动并到达主 div 的底部后显示下一个 Grid 数据。

我不想用 Ajax 调用来做，我已经有数据并形成了 Div Grid。

有什么想法可以用 Waypoint Infinite Scroll 来实现吗？

已更新：-

$(document).ready(function() {
  var infinite = new Waypoint.Infinite({
    element: $('.infinite-container')[0]
  });
});

function MyFunction() {
  alert("HI");
  for (var i = 0; i < 5; ++i) {
    var div = "<div class='infinite-item'> <div class='square-box'> <div class='square-content'> test </div> </div> <div class='square-box'> <div class='square-content'> test test </div>";

  }
  return false;
}

.square-box {
  position: relative;
  width: 200px;
  overflow: hidden;
  background: #4679BD;
  display: inline-block;
}
.square-box:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.square-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: white;
  text-align: center;
}

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
  <!DOCTYPE html >
  <html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Tutorials</title>
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jquery.waypoints.min.js"></script>
    <script type="text/javascript" src="infinite.js"></script>

  </head>

  <body>
    <div class="infinite-container">
      <div class="infinite-item">
        <div class='square-box'>
          <div class='square-content'>
            test 1
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 2
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 3
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 4
          </div>
        </div>
      </div>

      <div class="infinite-item">
        <div class='square-box'>
          <div class='square-content'>
            test 11
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 12
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 13
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 14
          </div>
        </div>
      </div>

      <div class="infinite-item">
        <div class='square-box'>
          <div class='square-content'>
            test 111
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 112
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 113
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 114
          </div>
        </div>
      </div>

      <div class="infinite-item">
        <div class='square-box'>
          <div class='square-content'>
            test 1111
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 2222
          </div>
        </div>
        <div class=' square-box'>
          <div class='square-content'>
            test 3333
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 4444
          </div>
        </div>
      </div>
    </div>
    <a class="infinite-more-link" href="">More</a> 
    <!-- javascript:MyFunction(); return false; -->
  </body>
  <style type="text/css">
  </style>

  </html>

谢谢。

【问题讨论】：

还有...到目前为止，您尝试过什么？（在 cmets 旁边应该有一个按钮来添加这个文本）。接下来，搜索 SO，这将是重复的。
stackoverflow.com/questions/11146298/onclick-show-next-divs
不要使用点击事件，想要在 div 底部滚动到达...
在不知道到目前为止您已经尝试过什么的情况下，无法判断您是否卡在显示下 x 条记录或检测该区域何时被滚动。如果这是问题（点击或滚动），那么如何触发显示下一个 x 记录是无关紧要的。
我已经通过以下链接解决了我的问题，首先隐藏了 Divs，除了第一个 Grid Divs，滚动显示下一个 Grid 之后......仍然会接受任何帮助......stackoverflow.com/a/20042643/3425489

标签： jquery infinite-scroll jquery-waypoints

【解决方案1】：

给你。还要粘贴this code 并放入不同的文件中（不要忘记包含在其中）。我还建议将所有样式也放在单独的文件中。你还需要有 test2.php（或者你想要的，但在这种情况下你需要更新代码底部的 jQuery 脚本）。它有效，因为我测试过：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Tutorials</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" data-semver="2.2.0" data-require="jquery@*"></script>
<style type="text/css">
.square-box {
    position: relative;
    width: 200px;
    overflow: hidden;
    background: #4679BD;
    display: inline-block;
}
.square-box:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
    text-align: center;
}
</style>
</head>

<body>
<div class="infinite-container">
  <div class="infinite-item">
    <div class='square-box'>
      <div class='square-content'>
        test 1
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 2
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 3
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 4
      </div>
    </div>
  </div>

  <div class="infinite-item">
    <div class='square-box'>
      <div class='square-content'>
        test 11
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 12
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 13
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 14
      </div>
    </div>
  </div>

  <div class="infinite-item">
    <div class='square-box'>
      <div class='square-content'>
        test 111
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 112
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 113
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 114
      </div>
    </div>
  </div>

  <div class="infinite-item">
    <div class='square-box'>
      <div class='square-content'>
        test 1111
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 2222
      </div>
    </div>
    <div class=' square-box'>
      <div class='square-content'>
        test 3333
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 4444
      </div>
    </div>
  </div>
</div>
<nav id="pagination">
    <p><a class="infinite-more-link" href="test2.php">More</a></p>
</nav>

 <script>
$(document).ready(function()
{
    var win = $(window);

    // Each time the user scrolls
    win.scroll(function()
    {
        if ($(document).height() - win.height() == win.scrollTop()) {

            $.ajax({
                url: 'test2.php',
                dataType: 'html',
                success: function(html) {
                    $('.infinite-container').append(html);
                }
            });
        }
    });
});
</script>

</html>

【讨论】：

例如，您当前在网站（HTML 一）中负责显示信息/表格的代码。你知道，表格、div、段落等。至少我会想象如何更准确地显示 jQuery。
我已经用完整的代码更新了我的答案。如果有帮助，请不要忘记投票/标记为已解决！ :)
ty 回复，但我已经在我的 jsp 中加载了数据，并且我已经形成了该数据的网格，我不想再次使用 ajax 调用来加载数据......不能投票你的解决方案。仅 14 声望
嗯，你没有提到这个以及你想避免使用什么。：/ 编辑：我相信您仍然可以将答案标记为已接受？无论如何，我目前无法提供任何其他选择，因为我在这里的时间有限。