javascript瀑布流（照片墙）

一个小白的开始~

html代码：

//.......这里有很多个.box

css代码：

*{
margin:0;
padding:0;
}
#center{
position: relative;
}
.box{
float:left;
padding:15px 0 0 15px;
}
.pic{
border:1px solid #ccc;
padding:10px;
border-radius: 5px;
}
.pic img{
width: 160px;
height:auto;

}

js代码：

window.onload = function(){
    waterFull('center','box');
}

function waterFull(parent,children){
    var oParent = document.getElementById(parent);
    var oBoxs = getByClass(oParent,children);
    var oBoxW = oBoxs[0].offsetWidth;
    var cols = Math.floor(document.documentElement.clientWidth/oBoxW);

    oParent.style.cssText = 'width:'+oBoxW * cols +'px; margin: 0 auto';

    //cssText 的本质就是设置 HTML 元素的 style 属性值

    var iHeight = [];
//定义一个数组，用来存放图片高度

    for(var i = 0; i< oBoxs.length ; i++){
        if(i < cols){

            iHeight.push(oBoxs[i].offsetHeight);

//第一排的照片直接排列开来

        }

        else{

//从第二排开始，找高度最小的位置

            var minH = Math.min.apply(null,iHeight);

            var minIndex = getMinIndex(iHeight,minH);
            oBoxs[i].style.position = 'absolute';
            oBoxs[i].style.top= minH + 'px';
            oBoxs[i].style.left = minIndex * oBoxW + 'px'; 
            iHeight[minIndex] += oBoxs[i].offsetHeight; 
        }
    }
}
function getByClass(parent,className){

    var boxArr = new Array();

//用来获取所有class为box的元素

    oElement = parent.getElementsByTagName('*');
    for (var i = 0; i         if(oElement[i].className == className){
            boxArr.push(oElement[i]);
        }
    };
    return boxArr;
}
function getMinIndex(array,min){
    for(var i in array){
        if(array[i] == min)
            return i;
    }

}

最后效果图：