滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧,小菜总结记录之用,高手勿喷。
当然本例子采用的是jquery库,后期会做成原生js。
本例的数据调用的是锋利的jquery一书提供的一段json。
首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height();
再给window绑定scroll事件。所以整个页面demo可以这样做:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <style type="text/css">
7 * { margin:0; padding:0;}
8 body { font-size:12px;}
9 p{ margin: 5px;}
10 .box{ padding: 10px;}
11 </style>
12 <!-- 引入jQuery -->
13 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
14 <script type="text/javascript">
15 $(function(){
16 $(window).bind('scroll',function(){show()});
17
18 function show()
19 {
20
21 if($(window).scrollTop()+$(window).height()>=$(document).height())
22 {
23 ajaxRead();
24 }
25 }
26
27 function ajaxRead()
28 {
29
30 var html="";
31 $.ajax({
32 type:'get',
33 dataType:'jsonp',
34 url:'http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?',
35 beforeSend:function(){console.log('loading...')},
36 success:function(data){
37 $.each(data.items,function(i,item){
38
39 html+='<div class="box">';
40 html+='<h1>'+item.title+'</h1>';
41 html+='<a hreft="'+item.link+'"><img src="'+item.media.m+'"/></a>'
42 html+='<div>'+item.tags+'</div>';
43 html+='</div>';
44
45 });
46 $("#resText").append($(html));
47 },
48 complete:function(){console.log('mission acomplete.')}
49
50 });
51 }
52 })
53 </script>
54 </head>
55 <body>
56 <p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p>
57 <div id="resText" >
58
59 </div>
60
61 </body>
62 </html>
拉到底部就是实现异步数据加载了,当然了,实际项目还要加上如果没数据了要怎么显示,怎么操作。这些加判断就行了。