瀑布流布局：
图片等宽，不定高，按最低高度来顺序排列；实现方法：获取每次获取四行中最低高度对应的一行，将下一张加载的图片放在该位置，每次加载前都获取最低高度；
①请求图片的接口 地址此php文件 参数 cpage=1,2,3,4;
1 <?php 2 header('Content-type:text/html;charset="utf-8"'); 3 4 /* 5 API: 6 getPics.php 7 参数： 8 cpage：获取数据的页数 9 */ 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;
②请求方法 提前封装的ajax
1 function ajax(method,url,data,success) 2 { 3 try{ 4 var xhr=new XMLHttpRequest(); 5 } 6 catch(e) 7 { 8 var xhr=new ActiveXObject('Microsoft.XMLHTTP'); 9 } 10 if(method=='get'&&data) 11 { 12 url+='?'+data; 13 } 14 15 xhr.open(method,url,true); 16 17 if(method=='get') 18 { 19 xhr.send(); 20 } 21 else 22 { 23 xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); 24 xhr.send(data); 25 } 26 xhr.onreadystatechange=function() 27 { 28 if(xhr.readyState==4) 29 { 30 if(xhr.status==200) 31 { 32 success&&success(xhr.responseText); 33 } 34 else 35 { 36 alert("出错了Err:"+xhr.status); 37 } 38 } 39 } 40 }
③请求数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> body{margin:0;} #ul1{ 1080px; margin:100px auto 0; } #ul1 li{ list-style: none; 247px; float:left; margin-right:9px; } #ul1 li div{ border:1px solid #000; padding:10px; margin-bottom: 10px; } img{ 225px; display:block; } </style> <script type="text/javascript" src='ajax.js'></script> <script src="echo.min.js"></script> <script type="text/javascript"> window.onload=function() { var oUl=document.getElementById('ul1'); var aLi=oUl.getElementsByTagName('li'); var iLen=aLi.length; var iPage=1; var b=true; //获取初始化数据 getList(); function getList() { ajax('get','getPIcs.php','cpage='+iPage,function(data) { var data=JSON.parse(data); //后续没有数据了 if(!data.length) { return; } for(var i=0;i<data.length;i++) { var _index=getShortLi(); var oDiv=document.createElement('div'); var oImg=document.createElement('img'); oImg.src='loading.gif'; oImg.setAttribute("data-echo",data[i].preview); // echo .js 会自动将data-echo中数据替换到src 中，当图片在可视化区域内时 oImg.style.width='225px'; oImg.style.height=data[i].height*(225/data[i].width)+'px'; oDiv.appendChild(oImg); var oP=document.createElement('p'); oP.innerHTML=data[i].title; oDiv.appendChild(oP); aLi[_index].appendChild(oDiv); //echo 初始化 echo.init({ offset: 0, throttle: 0 }); } b=true; }); } // 滚动时加载数据 window.onscroll=function() { var _index=getShortLi(); var oLi=aLi[_index]; var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; if(oLi.offsetHeight+getTop(oLi)<document.documentElement.clientHeight+scrollTop) { if(b) { b=false; iPage++; // 参数改变请求的数据改变 getList(); } } } //取最短的li function getShortLi() { var index=0; var ih=aLi[index].offsetHeight; for(var i=1;i<iLen;i++) { if(aLi[i].offsetHeight<ih) { index=i; ih=aLi[i].offsetHeight; } } return index; } function getTop(obj) { var iTop=0; while(obj) { iTop+=obj.offsetTop; obj=obj.offsetParent; } return iTop; } } </script> <title></title> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
④ 因为该demo运用到了ajax，所以需要在服务器环境下执行；
源码地址：https://github.com/shouzixiansheng/pubuliu.git