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

一、CSS样式

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

二、HTML代码

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

三、Javascript代码

 1 <script type="text/javascript">
 2     $(function () {
 3         var $page = $("input[name='PageIndex']"); //页索引
 4 
 5         //初始化
 6         Data.init(10);
 7 
 8         //滚动加载
 9         $(window).scroll(function () {
10             Data.scroll($page.val(), 10);
11         });
12 
13         //手动加载
14         $(".load-more").bind("click", function () {
15             Data.load($page.val(), 10);
16         });
17     })
18 
19     var Data = {
20         init: function (rows) {//初始化，载入第一页数据
21             Data.load(1, rows);
22         },
23         setPage: function () {//数据载入成功，设置下一页索引
24             var $page = $("input[name='PageIndex']");
25             var index = parseInt($page.val()) + 1;
26             $page.val(index);
27         },
28         scroll: function (page, rows) {//滚动到底部加载数据
29             var top = $(window).scrollTop();
30             var win = $(window).height();
31             var doc = $(document).height();
32             if ((top + win) >= doc) {
33                 Data.load(page, rows);
34             }
35         },
36         load: function (page, rows) {//载入数据方法
37             var $msg = $('.load-btn');
38             $msg.removeClass('load-more').text('正在载入数据...');
39             $.post("ajax.php?page=" + page + "&rows=" + rows + "&t=" + (new Date().getTime()), function (data) {
40                 data = $.parseJSON(data);
41                 if (data != null || data.length > 0) {
42                     Data.append(data);
43                     Data.setPage();
44                     $msg.addClass('load-more').text('查看更多');
45                     return true;
46                 }
47                 $msg.removeClass('load-more').text('已加载全部数据！');
48                 return false;
49             });
50             $msg.removeClass('load-more').text('数据加载失败！');
51             window.setTimeout(function () {
52                 $msg.addClass('load-more').text('查看更多');
53             }, 2000);
54             return false;
55         },
56         append: function (json) {//构造html，并填充
57             var $container = $('.container');
58             $.each(json, function (i) {
59                 html += "<div class=\"item\"><a href=\"item.php?id=" + json[i].id + "\" title=" + json[i].title + ">" + json[i].title + "</a></div>";
60             });
61             $container.append(html);
62         }
63     }
64 </script>

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

 

posted @ 2014-03-31 15:31  wyguo  阅读(2592)  评论(1)  编辑  收藏  举报