Demo：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="anchor" content="who care?" /> <title></title> <style type="text/css"> #main{width:756px;margin:0 auto;} .pin{float:left;padding:15px 0 0 15px;} .box{margin-bottom:15px;padding:5px;border:1px solid #ccc;} .box img{width:162px;} </style> <script type="text/javascript"> window.onload=function(){ var oData = {'aData':[{'src':'http://image142-c.poco.cn/mypoco/myphoto/20130524/11/17362751320130524110321053.jpg'},{'src':'http://image142-c.poco.cn/mypoco/myphoto/20130524/11/17362751320130524110439099.jpg'},{'src':'http://image142-c.poco.cn/mypoco/myphoto/20130524/11/17362751320130524110408061.jpg'},{'src':'http://image142-c.poco.cn/mypoco/myphoto/20130524/11/17362751320130524110426042.jpg'}]}; waterFall(oData.aData); }; function waterFall(arrData){ window.onscroll = function(){ var main = document.getElementById('main'), aPin = getClassObj(main,'pin'), minH = getMinH(aPin), minIndex = getIndex(aPin,minH); if(checkH(aPin[minIndex])){ for (var i = 0; i < arrData.length; i++) { var oBox = document.createElement('div'), oImg = document.createElement('img'); oBox.className = 'box'; oImg.src = arrData[i].src; oBox.appendChild(oImg); aPin[minIndex].appendChild(oBox); } } }; } function getClassObj(parent,className){ var obj = parent.getElementsByTagName('*'), arr = [], i; for (i = 0; i < obj.length; i++) { if(obj[i].className == className){ arr.push(obj[i]); } } return arr; }; function getMinH(pin){ var colH = [], i; for (i = 0; i < 4; i++) { colH[i] = pin[i].scrollHeight; } return Math.min.apply(null,colH); }; function checkH(minPin){ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; return (minPin.scrollHeight-scrollTop < 400)?true:false; } function getIndex(arr,minH){ for(var i in arr){ if(arr[i].scrollHeight == minH)return i; } } </script> </head> <body> <div id="main"> <div class="pin"> <div class="box"> <img src="http://image142-c.poco.cn/mypoco/myphoto/20130524/11/17362751320130524110426042.jpg" alt=""/> </div> </div> <div class="pin"> <div class="box"> <img src="http://image142-c.poco.cn/mypoco/myphoto/20130524/11/17362751320130524110439099.jpg" alt=""/> </div> </div> <div class="pin"> <div class="box"> <img src="http://image142-c.poco.cn/mypoco/myphoto/20130524/11/17362751320130524110408061.jpg" alt=""/> </div> </div> <div class="pin"> <div class="box"> <img src="http://image142-c.poco.cn/mypoco/myphoto/20130524/11/17362751320130524110321053.jpg" alt=""/> </div> </div> </div> </body> </html>