无限滚动使用jQuery的固定数量的li元素 [英] Infinite scrolling for fixed number of li elements using jQuery

问题描述

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

我正在处理HTML代码，它有100个轻量级 li 元素已经加载到页面上，但是用户界面的目的，我们想延迟加载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次
< / ul> 
  

如果任何人都可以为我提供实现此jQuery功能的最简单方法。

$ b $好的，最后它的工作方式如下所示：

> JSFIDDLE

  // initializewinHeight = $（window）.height（）; liHeight = $ （'li.element'）。height（）; next = Math.ceil（winHeight / liHeight）; ulLength = $（'li.element'）。length; $（'html，body'）。animate（{scrollTop： 0}，0）; //首次加载页面时隐藏不在视图中的元素$（'li.element'）。each（function（）{if（$（this）.offset（）。top> ; winHeight）{$（this）.fadeOut（0）;}}）; //显示滚动元素$（window）.scroll（function（event）{scrollPos = $（window）.scrollTop（）; if（scrollPos + winHeight == $（document）.height（） ）{$（'＃li'+ next）.fadeIn（）;下++; }}）;  

* {padding：0; margin：0;}。container {padding：0; list-style-type：none;} li.element {height：100px;背景色：#BBB; border-bottom：1px点缀灰色;字体大小：3EM;填充顶：10px的;文本对齐：中心;颜色：＃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 =li1class =element> 1< / li> < li id =li2class =element> 2< / li> < li id =li3class =element> 3< / li> < li id =li4class =elementstyle =height：300px;> 4< / li> < li id =li5class =element> 5< / li> < li id =li6class =element> 6< / li> < li id =li7class =element> 7< / li> < li id =li8class =element> 8< / li> < li id =li9class =element> 9< / li> < li id =li10class =element> 10< / li> < li id =li11class =element> 11< / li> < li id =li12class =element> 12< / li> < li id =li13class =element> 13< / li> < li id =li14class =element> 14< / li> < li id =li15class =element> 15< / li> < li id =li16class =element> 16< / li> < li id =li17class =element> 17< / li> < li id =li18class =elementstyle =height：600px;> 18< / li> < li id =li19class =element> 19< / li> < li id =li20class =element> 20< / li> < li id =li21class =element> 21< / li> < li id =li22class =element>等等直到100< / li>< / ul>

I've seen lot of infinite scroll but it basically makes an ajax call to the next page and displays that when the window reaches a certain breaking point.

I'm dealing with HTML code that has 100 light-weight li elements already loaded on the page but for UI purposes, we want to lazy-load the divs as they are scrolled to instead of showing them all at once. The basic structure looks something like this :

<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>

If anyone could suggest me the simplest way to achieve this jQuery functionality.

解决方案

Ok, finally it works as shown in this 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元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！