首页 > 代码库 > 瀑布流思路布局
瀑布流思路布局
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 }11 ul{12 width:300px;13 margin:0 15px;14 border:1px solid #ccc;15 float:left; 16 }17 li{18 list-style:none;19 margin:10px 0; 20 }21 </style>22 <script>23 function toRandom(n,m){24 return parseInt(Math.random()*(m-n)+n);25 }26 function getLi(obj){27 var oLi=document.createElement(‘li‘);28 29 oLi.style.height=toRandom(100,400)+‘px‘;30 oLi.style.background=‘rgb(‘+toRandom(0,256)+‘,‘+toRandom(0,256)+‘,‘+toRandom(0,256)+‘)‘;31 32 return oLi;33 }34 window.onload=function(){35 var aUl=document.getElementsByTagName(‘ul‘);36 var arr=[];37 38 function getLi20(){39 40 for(var i=0;i<20;i++){41 var oLi=getLi();42 for(j=0;j<aUl.length;j++){43 arr.push(aUl[i]);44 }45 46 arr.sort(function(aUl1,aUl2){47 return aUl1.offsetHeight-aUl2.offsetHeight;48 });49 50 arr[0].appendChild(oLi);51 }52 }53 54 getLi20();55 56 window.onscroll=function(){57 var oS=document.documentElement.scrollTop || document.body.scrollTop;58 var oC=document.documentElement.clientHeight;59 60 if(oS+oC>=document.documentElement.offsetHeight){61 getLi20();62 }63 };64 };65 </script>66 </head>67 68 <body>69 <ul></ul>70 <ul></ul>71 <ul></ul>72 <ul></ul>73 </body>74 </html>
瀑布流思路布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。