從其他地方看來的，最簡化版瀑布流。
大致思路就是：固定幾列div，浮動排布。監聽滾動條事件，每當滾動條滾動到底部就給div加子項，div高度自動撐高一部分。
**如下：
/*陰影*/
.boxshadow
/*圓角*/
.round
style>
head>
class="box_pannel">
id="box1"
class="pic_box">
div>
id="box2"
class="pic_box">
div>
id="box3"
class="pic_box">
div>
id="box4"
class="pic_box">
div>
div>
id="waitpart"
class="wait_div">
src=""/>
div>
id="backto"
class="back_to_top">返回頂部div>
var nowmax=0;//記錄目前最後一張編號
var restart=0;//標記是否正處於載入資料階段 如果是則不再觸發載入資料 防止在載入資料時連續滾動滾動條造成多次載入資料
var imgarray=;//庫
imgarray[0] = "";
imgarray[1] = "";
imgarray[2] = "";
imgarray[3] = "";
imgarray[4] = "";
imgarray[5] = "";
imgarray[6] = "";
imgarray[7] = "";
imgarray[8] = "";
imgarray[9] = "";
imgarray[10] = "";
imgarray[11] = "";
imgarray[12] = "";
imgarray[13] = "";
imgarray[14] = "";
for(var i=0;i<8;i++)
//為div增加一張框
function
addpic
(e) //增加一行
function
addonelayer
() //初始化先載入5行
for(var i=0;i<5;i++)
//為滾動條滾動加上監聽事件
window.onscroll=function
(),1000);}}
//返回頂部
document.getelementbyid("backto").onclick=function
()else
},300);
}script>
body>
html>有個比較明顯的缺陷，就是完全按陣列儲存的順序來排列的。有可能會出現部分列特別長部分列特別短的情況。我的想法就是在每次增加一行的時候，將這幾個div物件按長度從小到大排列，然後取出要加的幾個按的高度從大到小排列，這樣相對的插入就會好一些。
中間遇到一些問題：
1.例如未載入完無法獲取的寬度和高度，所以通過img的onload函式來解決。我是在每個載入完呼叫onload函式時再遞迴呼叫此函式，直到這一行載入完。
2.直接用的height屬性是不對的，因為獲取到的是的實際高度，而載入到頁面上的是等比例縮小的，所以需要(pic.height)*(190/pic.width)這樣，等比縮小一下。
3.ie8以下需要把onload函式寫在src=」「前面。
不過還要說的是，這個只算解決了一半吧，因為在ie8測試出現了問題，而且在其他瀏覽器雖然正常執行但是的排列順序卻是每次都不一樣，這個有些想不明白，下面是**，以後再解決吧。
function
getpic
(picarray,order)
var pic=document.createelement("img");
pic.onload=function
());
order++;
if(order==4));
var boxs=document.getelementbyid("boxparent").children;
var unsortboxs=;
for(var i=0;ivar sortboxs=unsortboxs.sort(function
(a,b))
for(var k=0;kvar box=document.createelement("div");
box.classname="inner_box boxshadow round";
}}else
};pic.src=imgarray[nowmax];
pic.style.width="190px";
nowmax++;
}用此段**替換掉增加一行的**就可以了。
瀑布流簡單實現
使用scrollview簡單實現瀑布流 實現 waterflowview.h import typedefenumwaterfiowviewmargintype class waterflowviewcell,waterfiowview 資料來源方法 protocol waterflowviewda...
簡單瀑布流實現
瀑布流通常2種形式 1.固定n列 固定寬度 列中高度不等，如 花瓣網 列數可根據瀏覽器視覺化視窗大小改變 也可固定 當最低的那列到達可視區的底部，再次載入資料 當前列的offsetheight offsettop scrolltop clientheight 瀑布流 title 6 style 7 ...
js瀑布流，簡單封裝
乙個很簡單的瀑布流載入，當滾動條滾動到底部時自動載入，先 敬上 lang en charset utf 8 demotitle head li pinterest wrap pinterest wrap ul pinterest wrap ulli style class pinterest wra...