1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>简易瀑布流</title> 6 <style type="text/css"> 7 *{margin: 0;padding: 0;list-style: none;} 8 #list{width: 1110px;margin: 0 auto;} 9 #list li{width: 212px;float: left;padding: 5px;} 10 .div{border: 1px solid #333;padding: 5px;margin-bottom: 10px;} 11 .img{width: 200px;display: block;} 12 </style> 13 14 <script type="text/javascript"> 15 window.onload=function (){ 16 17 /*实现：5个li分成5列，通过判断当前哪一个li高度最小，然后把div插入到那个li里面*/ 18 19 var oList=document.getElementById('list'); 20 var aLi=oList.getElementsByTagName('li'); 21 var flag=true; 22 var json={ 23 'data':[ 24 {'src':'img/1.jpg'},{'src':'img/2.jpg'},{'src':'img/3.jpg'}, 25 {'src':'img/4.jpg'},{'src':'img/5.jpg'},{'src':'img/6.jpg'}, 26 {'src':'img/7.jpg'},{'src':'img/8.jpg'},{'src':'img/9.jpg'}, 27 {'src':'img/10.jpg'},{'src':'img/11.jpg'},{'src':'img/12.jpg'} 28 ], 29 'imgH':[ 30 {'height':'232px'},{'height':'264px'},{'height':'300px'}, 31 {'height':'289px'},{'height':'267px'},{'height':'278px'}, 32 {'height':'300px'},{'height':'234px'},{'height':'271px'}, 33 {'height':'251px'},{'height':'363px'},{'height':'333px'} 34 ] 35 } 36 getLoad(); 37 function getLoad(){ 38 for (var i=0;i<json.data.length;i++) { 39 var min=myMin(); 40 var oDiv=document.createElement('div'); 41 oDiv.className='div'; 42 var oImg=document.createElement('img'); 43 oImg.className='img'; 44 oImg.src=json.data[i].src; 45 /*这里必须要设置高度，测试中发现js会把每一个节点、属性 46 创建好，然后再加载入图片，不设置一开始就不能比较li的高度*/ 47 oImg.style.height=json.imgH[i].height; 48 oDiv.appendChild(oImg); 49 //高度最小的li插入div 50 aLi[min].appendChild(oDiv); 51 } 52 flag=true; 53 } 54 //获取到当前li高度最小的索引 55 function myMin(){ 56 var index=0; 57 var min=aLi[index].offsetHeight; 58 for (var i=1;i<aLi.length;i++) { 59 if(aLi[i].offsetHeight<min){ 60 index=i; 61 min=aLi[index].offsetHeight; 62 } 63 } 64 return index; 65 } 66 window.onscroll=function (){ 67 var scroT=document.documentElement.scrollTop||document.body.scrollTop; 68 var clieH=document.documentElement.clientHeight||document.body.clientHeight; 69 var minN=myMin(); 70 //这里判断加载是刚出现空白就加载，也就是滚动到了高度最小那一列完了 71 if((aLi[minN].offsetTop+aLi[minN].offsetHeight)<(scroT+clieH)){ 72 if(flag){ 73 flag=false; 74 getLoad(); 75 } 76 } 77 }; 78 }; 79 </script> 80 </head> 81 <body> 82 <ul id="list"> 83 <li></li> 84 <li></li> 85 <li></li> 86 <li></li> 87 <li></li> 88 </ul> 89 </body> 90 </html>