jQuery+Ajax滚屏异步加载数据实现（附源码）

一、CSS样式

        body { font:12px/1.0em Microsoft Yahei; line-height:1.6em; background:#fff; line-height:1.2em; padding:0 10px; }
        html,body,div { margin:0;}
        
        .container { height:900px;}
        .load-btn { display:block; text-align:center; padding:5px 10px; border:1px #eee solid; background:#f5f5f5;}

二、HTML代码

<div class="container"></div>
<a href="javascript:void(0)" class="load-btn load-more">查看更多</a>
<input type="hidden" name="PageIndex" value="1" />

三、Javascript代码

<script type="text/javascript">
    $(function () {
        var $page = $("input[name='PageIndex']"); //页索引

        //初始化
        Data.init(10);

        //滚动加载
        $(window).scroll(function () {
            Data.scroll($page.val(), 10);
        });

        //手动加载
        $(".load-more").bind("click", function () {
            Data.load($page.val(), 10);
        });
    })

    var Data = {
        init: function (rows) {//初始化，载入第一页数据
            Data.load(1, rows);
        },
        setPage: function () {//数据载入成功，设置下一页索引
            var $page = $("input[name='PageIndex']");
            var index = parseInt($page.val()) + 1;
            $page.val(index);
        },
        scroll: function (page, rows) {//滚动到底部加载数据
            var top = $(window).scrollTop();
            var win = $(window).height();
            var doc = $(document).height();
            if ((top + win) >= doc) {
                Data.load(page, rows);
            }
        },
        load: function (page, rows) {//载入数据方法
            var $msg = $('.load-btn');
            $msg.removeClass('load-more').text('正在载入数据...');
            $.post("ajax.php?page=" + page + "&rows=" + rows + "&t=" + (new Date().getTime()), function (data) {
                data = $.parseJSON(data);
                if (data != null || data.length > 0) {
                    Data.append(data);
                    Data.setPage();
                    $msg.addClass('load-more').text('查看更多');
                    return true;
                }
                $msg.removeClass('load-more').text('已加载全部数据！');
                return false;
            });
            $msg.removeClass('load-more').text('数据加载失败！');
            window.setTimeout(function () {
                $msg.addClass('load-more').text('查看更多');
            }, 2000);
            return false;
        },
        append: function (json) {//构造html，并填充
            var $container = $('.container');
            $.each(json, function (i) {
                html += "<div class="item"><a href="item.php?id=" + json[i].id + "" title=" + json[i].title + ">" + json[i].title + "</a></div>";
            });
            $container.append(html);
        }
    }
</script>

 下载地址：https://files.cnblogs.com/wyguo/jquery_ajax_scroll_to_load_data.zip