Question

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

我正在处理已经在页面上加载了100个轻量级<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>元素的HTML代码，但出于UI目的，我们希望在滚动到div时延迟加载div而不是全部显示它们立刻。基本结构看起来像这样：

$timestamp=$result['Timestamp'];
$TransactionID=$result['Timestamp']['TransactionID'];

如果有人可以建议我实现这个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>

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

1 个答案: