使用 jQuery 无限滚动固定数量的 li 元素

Question

我见过很多无限滚动，但它基本上是对下一页进行 ajax 调用，并在窗口到达某个断点时显示。

我正在处理的 HTML 代码已经在页面上加载了 100 个轻量级 li 元素，但出于 UI 目的，我们希望在滚动到 div 时延迟加载它们，而不是一次显示它们.基本结构如下所示：

<ul class="container">
  <li class="element">one</li>
  <li class="element">two</li>
  <li class="element">three</li>
  <li class="element">four</li>
  <li class="element">five</li>
  <li class="element">six</li>
  <li class="element">seven</li>
        .... 100 times
</ul>

如果有人可以建议我实现此 jQuery 功能的最简单方法。

Answer 1

好的，终于如JSFIDDLE所示工作了

//initialize
winHeight = $(window).height();
liHeight = $('li.element').height();
next = Math.ceil(winHeight / liHeight);
ulLength = $('li.element').length;
$('html, body').animate({ scrollTop: 0}, 0);

//hide elements not in the view as the page load for the first time
$('li.element').each(function () {
    if ($(this).offset().top > winHeight) {
        $(this).fadeOut(0);
    }
});

//show elements on scroll
$(window).scroll(function (event) {
    scrollPos = $(window).scrollTop();
    if (scrollPos + winHeight == $(document).height()) {
        $('#li' + next).fadeIn();
        next++;
    }
});

* {
    padding:0;
    margin:0;
}
.container {
    padding:0;
    list-style-type:none;
}
li.element {
    height:100px;
    background-color:#BBB;
    border-bottom:1px dotted gray;
    font-size:3em;
    padding-top:10px;
    text-align:center;
    color:#444;
    text-shadow:#222 0 1px 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="container">
    <li id="li1" class="element">1</li>
    <li id="li2" class="element">2</li>
    <li id="li3" class="element">3</li>
    <li id="li4" class="element" style="height:300px;">4</li>
    <li id="li5" class="element">5</li>
    <li id="li6" class="element">6</li>
    <li id="li7" class="element">7</li>
    <li id="li8" class="element">8</li>
    <li id="li9" class="element">9</li>
    <li id="li10" class="element">10</li>
    <li id="li11" class="element">11</li>
    <li id="li12" class="element">12</li>
    <li id="li13" class="element">13</li>
    <li id="li14" class="element">14</li>
    <li id="li15" class="element">15</li>
    <li id="li16" class="element">16</li>
    <li id="li17" class="element">17</li>
    <li id="li18" class="element" style="height:600px;">18</li>
    <li id="li19" class="element">19</li>
    <li id="li20" class="element">20</li>
    <li id="li21" class="element">21</li>
    <li id="li22" class="element"> and so on till 100 </li>
</ul>