瀑布流

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