jquery ias插件实现滚动分页（加载更多效果）

网站列表加载更多效果，可以用jquery ias插件实现，这插件主要是把列表页的分页导航，改成加载更多的形式，点击就加载下一页的内容。如下图：

Infinite Ajax Scroll简称ias，从字面来理解是"无限的ajax滚动"，其实就是一款jQuery滚动分页插件(页面滚动到最底部自动异步加载数据)，主要就是用于滑动分页。目前利用这个插件分页网站比较有名的比如36氪。下面把自己综合网上资料整理的插件使用方法给大家介绍一下，方便大家参考也好留下来自己存档。

　　第一步：下载ias插件。下载地址：https://github.com/webcreate/Infinite-Ajax-Scroll。

　　第二步：页面引入jquery和ias插件,当然ias还有自己的样式jquery.ias.css，喜欢可以引用

<script type="text/javascript" src="js/jquery1.7.2.js"></script>  
<script type="text/javascript" src="js/jquery-ias.js"></script>

　　第三步：了解插件的功能和使用方法

　　ias以下面几种方式控制页面：

　　1、监听到达最后一个元素的滚动事件。

　　2、插入加载器图片。

　　3、用ajax加载下一页内容。

　　4、每一个新的元素都插入到最后一个元素的后面。

　　函数：ias参数介绍：(在这只是介绍几个重要的参数)

　　(1)、container：容器，很显然就是信息的HTML元素，可以理解为所有数据的最外层元素(如下图中class为artList的ul)。

　　(2)、item：项，也是HTML标签，确保他们放在container里面，可以理解为每一条数据的最外层元素(下图中class为dataItem的li)。

　　(3)、pagination：分页，做分页的时候，我们都会在页面上显示分页字符串，用的此技术时也应该有此功能，并赋值在页面上。该技术会自动将其隐藏。分页时会用的下一页的页码。可以理解为分页代码最外层元素(下图中class为m_page的section)。

　　(4)、next：下一页，分页代码中的下一页按钮或链接(下图中id为nextPage的li下的a元素)。

　　(5)、loader：加载器，数据在加载过程中提示的内容(可以是文本、图片或图文结合)，比如点击下一页时的“正在加载……”字样，如不设置也会自动加上默认值。

　　(6)、triggerPageThreshold：触发分页的阈值，是数字，当当前页码等于这个值鼠标再滚动时页面就会显示trigger属性设置的值，可以利用这个属性和trigger属性实现上一页、下一页的分页功能，不过可能要改写插件中get_trigger方法。说简单些，这是个数值，一般设置为大于0，比如说我们设置为3.当我们滑动到第一页底部时，会自动加载下一页，直到第三页。

　　(7)、trigger：当当前页码等于triggerPageThreshold属性的值鼠标再滚动时此属性设置的内容将会在页面中显示。

　　(8)、beforePageChange：页码改变前，加载数据之前调用的函数，在这个函数中可以判断是否到了最后一页，如果不希望再加载数据，函数返回false即可。

　　(9)、onPageChange:改变页码的事件发生时触发。

　　两点注意：

　　(1)、插件的使用前提：网站必须实现分页即网页中必须有分页代码，在分页代码中必须包含下一页的按钮或链接。

　　(2)、列表内容必须超过浏览器长度的范围，否则不起作用。

　　示例一：

jQuery(document).ready(function($) {
              var _gaq = _gaq || [];
               jQuery.ias({
                 container : '.list',
                 item: '.blog',
                 pagination: '.pagination',
                 next: '.next_page a',
                loader: '载入更多...',
                trigger: 'next',
                onPageChange: function(pageNum, pageUrl, scrollOffset) {
                path = jQuery('<a/>').attr('href',pageUrl)[0].pathname.replace(/^[^/]/,'/');
                _gaq.push(['_trackPageview', path]);
            }
        });
     });

　　示例二：

jQuery(function($){
    var _gaq = _gaq || [];
    //页码计数器
    var pageCount = 1;
    jQuery.ias({
        container:'.artList',
        item:'.dataItem',
        pagination:'.m_page',
        next:'#nextPage a',
        loader:"<img src='/img/front/loader.gif' /><font size='5'>正在拼命的为您加载</font>",
        trigger:'拼命的为您加载完了所有内容',
        triggerPageThreshold:<%$pages%>,
        beforePageChange:function(curScrOffset, nextPageUrl){
            pageCount++;
            //总页数
            var pages = parseInt('<%$pages%>', 10);
            if(pageCount <= pages) return true;
            jQuery(".artList").css({'padding-bottom':'91px'});
            return false;
        }
    });
});

　　一个完整示例：

<?php  
header("Content-type:text/html;charset=utf-8");  
$str = '这是测试';  
if($_SERVER["HTTP_X_REQUESTED_WITH"]=="XMLHttpRequest"){  
    $page = $_REQUEST['page'];  
    $page++;  
}else{  
    $page = 1;  
}  
$str = $str . $page;  
?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
<script type="text/javascript" src="js/jquery1.7.2.js"></script>  
<script type="text/javascript" src="js/jquery-ias.js"></script>  
</head>  
<body>  
<div class="list">  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
        <div class="ias_loader1" style="display:none"><a href="#">已是最后一页</a></div>  
        <div class="ias_loader"></div>  
    <div class="ias_trigger">  
        <a href="#">next</a>  
    </div>  
    <div class="pagination">  
        <div class="next_page">  
            <a href="/?page=<?php echo $page;?>">next</a>  
        </div>  
    </div>  
</div>  
<script type="text/javascript">  
jQuery(document).ready(function($) {  
    var _gaq = _gaq || [];  
      jQuery.ias({  
        container : '.list',  
        item: '.blog',  
        pagination: '.pagination',  
        next: '.next_page a',  
        loader: '载入更多...',  
        trigger: 'next',  
            beforePageChange:function(scrollOffset, nextPageUrl){  
                if(nextPageUrl.substr(-1,1) == 5){  
                    jQuery(".ias_loader1").show();  
                    return false;  
                }  
           },  
            onPageChange: function(pageNum, pageUrl, scrollOffset) {  
          path = jQuery('<a/>').attr('href',pageUrl)[0].pathname.replace(/^[^/]/,'/');  
          _gaq.push(['_trackPageview', path]);  
        }  
      });  
    });  
</script>  
</body>  
</html>