js纯原生手写瀑布流

html

<div id="main">
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/500x500-2.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/500x500-3.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/500x500-5.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/500x500-2.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/500x500-4.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/500x500-1.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/500x500-3.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/500x500-5.png" alt="">
        </div>
    </div>
</div>

css

 * {
	margin:0;
	padding:0;
}
#main {
	position:relative;
	height:auto;
	margin:0 auto;
}
.box {
	padding:10px 0 0 10px;
	float:left;
	/*height:auto;
	*/
}
.pic {
	padding:10px;
	border-radius:5px;
	border:1px solid #ccc;
	box-shadow:0 0 3px #ccc;
	/*height:auto;
	*/
}
.pic img {
	width:200px;
	height:auto;
}

js

window.onload = function() {
	water();
}

function water() {
	//获取大盒子
	var main = document.getElementById('main');
	//获取所有小盒子
	var boxs = getByClass(main, 'box');
	//获取屏幕宽
	var clientW = document.body.clientWidth || document.documentElement.clientWidth;
	//获取每个小盒子的宽，因为宽度都一样，所以获取第一个就行
	var boxW = boxs[0].offsetWidth;
	//计算需要几列
	var cols = Math.floor(clientW / boxW);
	//给大盒子设置宽度
	main.style.width = cols * boxW + 'px';

	//新建一个数组，存放第一行的小盒子的高度
	var hArr = [];
	for(var i = 0; i<boxs.length; i++) {
		if(i<cols) {
			hArr.push(boxs[i].offsetHeight);
		} else {
			//因为下一排的第一个要放在第一排最短的下面，所以要获取第一排的最小高度
			var minH = Main.min.apply(null, hArr);
			//获取这个最小高度属于第一排中的第几个
			var minIndex = getIndex(minH, hArr);
			//设置位置
			boxs[i].style.position = 'absolute';
			box[i].style.top = minH + 'px';
			box[i].style.left = boxW * minIndex + 'px';
			//因为下面一个和前面是一样的，所以要把高度更新一下
			hArr[minIndex] += boxs[i].offsetHeight;
		}
	}
}

function getByClass(parent, className) {
	var arr = [];
	var eles = parent.getElementsByTagName('*');
	for(var i = 0; i<eles.length; i++) {
		if(eles[i].className == className) {
			arr.push(eles[i]);
		}
	}
	return arr;
}

function getIndex(val, arr) {
	for(var i = 0; i<arr.length; i++) {
		if(arr[i] == val) return i;
	}
}