1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>2.ajax瀑布流</title> 8 <meta name="author" content="Administrator" /> 9 <!-- Date: 2014-12-20 --> 10 <script src="ajax.js"></script> 11 <script src="json2.js"></script> 12 <style> 13 *{margin:0;padding:0;font-size:13px;font-family: microsoft yahei} 14 li{list-style:none;float:left;margin:0 9px; 252px;} 15 ul{1080px;margin:0 auto} 16 ul li div{margin-bottom:10px;border:1px solid black;padding: 10px;} 17 </style> 18 <script> 19 window.onload=function(){ 20 var aLi=document.getElementsByTagName('li'); 21 var iLen=aLi.length; 22 var iPage=1; 23 var b=true; 24 25 getList(); 26 function getList(){ 27 ajax('get','getPics.php','cpage='+iPage,function(data){ 28 var data=JSON.parse(data); 29 30 if(!data) return; //如果发现data中没有值了,立马返回出去,后续代码不再执行 31 32 var oImage=new Image(); 33 var iNow=0; 34 35 xunlei(); 36 function xunlei(){ 37 38 //初始化,先给div加到li中,并设置内容为加载中图片 39 var oDiv=document.createElement('div'); 40 oDiv.innerHTML='<img src="img/loading.jpg"/>'; 41 var _index=getShort(); 42 if( aLi[_index].innerHTML.indexOf('加载中')!=-1 ){ 43 aLi[_index].innerHTML='' 44 } 45 aLi[_index].appendChild( oDiv ); 46 47 //第一张图片加载完 48 oImage.src=data[iNow].preview; 49 50 oImage.onload=function(){ 51 iNow++; 52 if(iNow<data.length){ 53 oDiv.innerHTML='<a href="'+data[iNow].url+'"><img src="'+oImage.src+'"/></a><p>'+data[iNow].title+'</p>'; 54 xunlei(); 55 } 56 } 57 58 } 59 /**事情做完了 b为true**/ 60 b=true; 61 62 }) 63 } 64 65 /**滚动滚动条,当page1最小一列的li 加载完 进入可视区时 加载第二页**/ 66 window.onscroll=function(){ 67 var _index=getShort(); 68 var scrolltop = document.documentElement.scrollTop || document.body.scrollTop; 69 if( getPos(aLi[_index]) +aLi[_index].offsetHeight < scrolltop + document.documentElement.clientHeight ){ 70 71 /**当b为true的时候,第一页加载完了 开始第二页的加载**/ 72 if(b){ 73 b=false; 74 iPage++; 75 getList(); 76 } 77 } 78 } 79 80 81 function getPos(obj){ 82 var iTop=0; 83 while(obj){ 84 iTop+=obj.offsetTop; 85 obj=obj.offsetParent 86 } 87 return iTop; 88 } 89 90 function getShort(){ 91 var index=0; 92 var iH=aLi[index].offsetHeight; 93 for(var i=1;i<iLen;i++){ 94 if( aLi[i].offsetHeight < iH ){ 95 index=i 96 } 97 } 98 return index 99 } 100 101 } 102 103 </script> 104 </head> 105 <body> 106 <ul> 107 <li>加载中...</li> 108 <li>加载中...</li> 109 <li>加载中...</li> 110 <li>加载中...</li> 111 </ul> 112 </body> 113 </html>
ajax.js
1 function ajax(method, url, data, success) { 2 var xhr = null; 3 try { 4 xhr = new XMLHttpRequest(); 5 } catch (e) { 6 xhr = new ActiveXObject('Microsoft.XMLHTTP'); 7 } 8 9 if (method == 'get' && data) { 10 url += '?' + data; 11 } 12 13 xhr.open(method,url,true); 14 if (method == 'get') { 15 xhr.send(); 16 } else { 17 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); 18 xhr.send(data); 19 } 20 21 xhr.onreadystatechange = function() { 22 23 if ( xhr.readyState == 4 ) { 24 if ( xhr.status == 200 ) { 25 success && success(xhr.responseText); 26 } else { 27 alert('出错了,Err：' + xhr.status); 28 } 29 } 30 31 } 32 }
getPics.php
1 <?php 2 header('Content-type:text/html; charset="utf-8"'); 3 4 /* 5 API: 6 getPics.php 7 8 参数 9 cpage : 获取数据的页数 10 */ 11 $cpage = isset($_GET['cpage']) ? $_GET['cpage'] : 1; 12 13 $url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage; 14 15 $content = file_get_contents($url); 16 $content = iconv('gbk', 'utf-8', $content); 17 18 echo $content; 19 20 ?>