360SDN.COM

Infinite Scroll Js介绍(无限加载)

来源:  2017-08-29 15:04:02    评论:0点击:

Infinite Scroll Js官网:https://infinite-scroll.com
Infinite Scroll is a JavaScript plugin that automatically adds the next page, saving users from a full page load. You’ve likely seen it in use all over the web.

Download

CDN

Link directly to Infinite Scroll files on unpkg.

<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script>

示例html:


<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>

    <meta charset="utf-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <title>Infinite Scroll Testing</title>
    <meta name="description" content="">
    <meta name="author" content="">


    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div id="debug">
        <a href="#" id="debug-trigger">+</a>
        <h3>Debug bar</h3>
        <nav id="debug-nav">
            <a href="#" rel="destroy">Destroy</a>
            <a href="#" rel="pause">Pause</a>
            <a href="#" rel="resume">Resume</a>
            <a href="#" rel="toggle">Toggle</a>
            <a href="#" rel="scroll">Scroll</a>
            <a href="#" rel="unbind">Unbind</span></a>
            <a href="#" rel="bind">Bind</span></a>
            <a href="#" rel="retrieve">Retrieve</a>
            <a href="#" rel="cthullu">Invalid command</a>
            <a href="#" rel="pause" data-arg="the-apocalypse">Invalid argument</a>
        </nav>
    </div>
    
    <div id="content">
    
        <h1>Infinite Scroll Testing</h1>
        
        <p>One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, it's a pretty story. Sharing everything with fun, that's the way to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. If you've got a problem chum, think how it could be.</p>

        <p>Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. Birds taught me to sing, when they took me to their king, first I had to fly, in the sky so high so high, so high so high so high, so - if you want to sing this way, think of what you'd like to say, add a tune and you will see, just how easy it can be. Treacle pudding, fish and chips, fizzy drinks and liquorice, flowers, rivers, sand and sea, snowflakes and the stars are free. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name.</p>

        <p>There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.</p>

        <p>Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.</p>

        <p>Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>

        <p>Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. Birds taught me to sing, when they took me to their king, first I had to fly, in the sky so high so high, so high so high so high, so - if you want to sing this way, think of what you'd like to say, add a tune and you will see, just how easy it can be. Treacle pudding, fish and chips, fizzy drinks and liquorice, flowers, rivers, sand and sea, snowflakes and the stars are free. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name.</p>

        <p>There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.</p>

        <p>Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.</p>

        <p>Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
        
    </div>
    
    <a id="next" href="index2.html">next page?</a>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
    <script>window.jQuery || document.write("<script src='jquery-1.6.1.js'>\x3C/script>")</script>
    
    <!--<script src="debug.js"></script>-->
    <script src="../jquery.infinitescroll.js"></script>
    <script src="../behaviors/manual-trigger.js"></script>
    
    <script>
    
    
    $('#content').infinitescroll({
        navSelector      : "#next:last",
        nextSelector     : "a#next:last",
        itemSelector     : "#content p",
        debug             : false,
        dataType         : 'html',
        maxPage         : 3,
//        prefill            : true,
//        path: ["http://nuvique/infinite-scroll/test/index", ".html"]
        path: function(index) {
            return "index" + index + ".html";
        }
        // behavior        : 'twitter',
        // appendCallback    : false, // USE FOR PREPENDING
        // pathParse         : function( pathStr, nextPage ){ return pathStr.replace('2', nextPage ); }
    }, function(newElements, data, url){
        //USE FOR PREPENDING
        // $(newElements).css('background-color','#ffef00');
        // $(this).prepend(newElements);
        //
        //END OF PREPENDING

//        window.console && console.log('context: ',this);
//        window.console && console.log('returned: ', newElements);
        
    });
    </script>


</body>
</html>



Getting started

Include the Infinite Scroll .js file in your site.

<script src="/path/to/infinite-scroll.pkgd.min.js"></script>

Infinite Scroll works on a container element with item elements.

<div class="container"> <article class="post">...</article> <article class="post">...</article> <article class="post">...</article> ... </div>
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权