zoukankan      html  css  js  c++  java
  • 转 js Infinite Scrolling Demo

    原文:http://www.sitepoint.com/jquery-infinite-scrolling-demos/

    Infinite Scrolling Demo 5

    Usage – HTML

    <ul class="items">
       <li>content</li>
       <li>content</li>
       ...
    </ul>
    <div id="lastPostsLoader"></div>

    Usage – jQuery

    <script type="text/javascript">
    $(document).ready(function(){
        function lastAddedLiveFunc()
        {
            $('div#lastPostsLoader').html('<img src="bigLoader.gif"/>');
     
            $.get("loadmore.php", function(data){
                if (data != "") {
                    //console.log('add data..');
                    $(".items").append(data);
                }
                $('div#lastPostsLoader').empty();
            });
        };
     
        //lastAddedLiveFunc();
        $(window).scroll(function(){
     
            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
            var  scrolltrigger = 0.95;
     
            if  ((wintop/(docheight-winheight)) > scrolltrigger) {
             //console.log('scroll bottom');
             lastAddedLiveFunc();
            }
        });
    });
    </script>

    Infinite Scrolling Demo 3

    This demo loads in images on infinite scroll and never reaches the end. It uses the jquery.endless-scroll plugin which can be customised to trigger load for x number of pixels from the bottom of the screen. The demo clones the same images and inserts them at the end of the list and so on. Obviously the script can be customised to load more images from different sources quite easily

    Usage – HTML

    <ul id="images">
      <li><img src="img/grass-blades.jpg" width="580" height="360" alt="Grass Blades" /></li>
      <li><img src="img/stones.jpg" width="580" height="360" alt="Stones" /></li>
      <li><img src="img/sea-mist.jpg" width="580" height="360" alt="Sea Mist" /></li>
      <li><img src="img/pier.jpg" width="580" height="360" alt="Pier" /></li>
      <li><img src="img/lotus.jpg" width="580" height="360" alt="Lotus" /></li>
      <li><img src="img/mojave.jpg" width="580" height="360" alt="Mojave" /></li>
      <li><img src="img/lightning.jpg" width="580" height="360" alt="Lightning" /></li>
    </ul>

    Usage – jQuery

    <script type="text/javascript" src="js/jquery.endless-scroll.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(function() {
        $(document).endlessScroll({
          bottomPixels: 500,
          fireDelay: 10,
          callback: function(i) {
            var last_img = $("ul#images li:last");
            last_img.after(last_img.prev().prev().prev().prev().prev().prev().clone());
          }
        });
      });
    </script>
    var end = $("#BottomThing").offset().top; 
    var viewEnd = $(window).scrollTop() + $(window).height();
    var distance = end - viewEnd;
    if (distance < 300) // do load –  
  • 相关阅读:
    2019CCPC厦门游记
    [codeforces940E]Cashback
    [codeforces#592Div2]C-G题
    Material Design UI素材库【React版】【2】--定制
    Material Design UI素材库【React版】【1】--入门
    resin中配置session相关参数
    quartz定时任务
    Linux内核----make menuconfig时出错
    【Qt学习之路】Qt开发环境搭建
    已学算法与数据结构的习题
  • 原文地址:https://www.cnblogs.com/ly7454/p/4294508.html
Copyright © 2011-2022 走看看