首页 > 代码库 > 瀑布流
瀑布流
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=http://www.mamicode.com/"ajax.js"></script> 11 <script src=http://www.mamicode.com/"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;width: 252px;} 15 ul{width: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=http://www.mamicode.com/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="http://www.mamicode.com/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=http://www.mamicode.com/data[iNow].preview; 49 50 oImage.onload=function(){ 51 iNow++; 52 if(iNow<data.length){ 53 oDiv.innerHTML=‘<a href="http://www.mamicode.com/‘+data[iNow].url+‘"><img src="http://www.mamicode.com/‘+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 ?>
瀑布流
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。