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 –  
  • 相关阅读:
    java 测试 (junit+ junit 断言 + postman)
    junit 运行(eclipse + IDEA)
    junit 常用注解 + junit 断言详解
    工作周报模板
    spring boot tomcat 部署
    spring boot 集成JSP
    spring boot 集成 Mybatis,JPA
    JPA 常用注解
    员工年终绩效考核表模板
    2013 Noip提高组 Day1
  • 原文地址:https://www.cnblogs.com/ly7454/p/4294508.html
Copyright © 2011-2022 走看看