Waterfall stream Summary

1.所有图片加载完毕后的判断

还是很早之前AK帮忙写的，自定义累加到最后再执行

2.图片排列  我自己知道原理也没有写出来

var c = Math.floor(w / iw);//计算列数var oArr = [];for (var i = 0; i < c; i++) {//把第一行排放好，并将每一列的高度记入数据oArr    li[i].style.top = "0";    li[i].style.left = iw * i + "px";    li[i].style.opacity = "1";    li[i].style["-moz-opacity"] = "1";    li[i].style["filter"] = "alpha(opacity=100)";    oArr.push(lenArr[i]);}for (var i = c; i < liLen; i++) {//将其他数据块定位到最短的一列后面，然后再更新该列的高度    var x = _getMinKey(oArr);//获取最短的一列的索引值    li[i].style.top = oArr[x] + mv + "px";    li[i].style.left = iw * x + "px";    li[i].style.opacity = "1";    li[i].style["-moz-opacity"] = "1";    li[i].style["filter"] = "alpha(opacity=100)";    oArr[x] = lenArr[i] + oArr[x] + mv;//更新该列的高度} 

3.获取数字数组最小值的索引  看清楚是索引

function _getMinKey(arr) {    var a = arr[0];    var b = 0;    for (var k in arr) {        if (arr[k] < a) {            a = arr[k];            b = k;        }    }    return b;} 

 

瀑布流总结