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:;}

         .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>

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