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 –  
  • 相关阅读:
    324. Wiggle Sort II
    341. Flatten Nested List Iterator
    300. Longest Increasing Subsequence
    72. Edit Distance
    63. Unique Paths II
    221.Maximal Square
    House Robbers. 198 & 213
    [C++] 与比较有关的事情
    218.The Skyline Problem
    41. First Missing Positive
  • 原文地址:https://www.cnblogs.com/ly7454/p/4294508.html
Copyright © 2011-2022 走看看