<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="智能社 - zhinengshe.com"> <meta name="copyright" content="智能社 - zhinengshe.com"> <title>智能社 - www.zhinengshe.com</title> <style> * { margin:0; padding:0; } div { 966px; margin:10px auto; } ul { float:left; 300px; margin:0 10px; border:1px solid red; } li { background:#ccc; list-style:none; margin-bottom:20px; } </style> <script> window.onload=function (){ var aUl=document.getElementsByTagName('ul'); var aTmpUl=[]; for(var i=0;i<aUl.length;i++) { aTmpUl.push(aUl[i]); } appendLi(); function appendLi() { for(var i=0;i<20;i++) { var oLi=document.createElement('li'); oLi.style.height=rnd(100,300)+'px'; oLi.innerHTML='你吃饭了吗？'; //比较大小获得高度最小的一个 aTmpUl.sort(function(ul1,ul2){ return ul1.offsetHeight-ul2.offsetHeight; }); aTmpUl[0].appendChild(oLi); } }; window.onscroll=function() { var scrollHeigt=document.body.scrollHeight;//获取内容的高度，浏览器不同也有差异 var scrollTop=document.documentElement.scrollTop || document.body.scrollTop; var scrllBottom=scrollTop+document.documentElement.clientHeight; if(scrllBottom>=scrollHeigt) { appendLi(); } }; function rnd(n,m) { return parseInt(Math.random()*(m-n)+n); } }; </script> </head> <body> <div> <ul></ul> <ul></ul> <ul></ul> </div> </body> </html>