<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ list-style: none; } .clearfix:after{ content: ""; display: block; clear: both; } .list{ width: 1000px; margin: 30px auto; } .list ul{ float: left; width: 320px; } .list .c{ margin: 0 20px; } .list li{ margin-bottom: 10px; font-size: 20px; } </style> </head> <body> <div class="list clearfix" id="list"> <ul></ul> <ul class="c"></ul> <ul></ul> </div> <script type="text/javascript"> var oList=document.getElementById('list'); var aUl=oList.getElementsByTagName('ul'); var now=1; var arr=[]; function creatEle(){ var oLi=document.createElement('li'); oLi.style.height=parseInt(Math.random()*250+70)+'px'; var r=parseInt(Math.random()*255), g=parseInt(Math.random()*255), b=parseInt(Math.random()*255); oLi.style.backgroundColor='rgb('+r+','+g+','+b+')'; oLi.innerHTML=now+'是件大事看几点睡的深刻的解释道'; now++ for(var i=0; i<aUl.length; i++){ arr[i]=aUl[i]; } arr.sort(function(a,b){ return a.offsetHeight-b.offsetHeight; }) arr[0].appendChild(oLi); } for(var i=0;i<10;i++){ creatEle(); } window.onscroll=function(){ var st=document.documentElement.scrollTop||document.body.scrollTop; var ch=document.documentElement.clientHeight; if(arr[0].offsetHeight <st+ch+200){ for(var i=0;i<10;i++){ creatEle(); } } } </script> </body> </html>