瀑布流图片布局

自pinterest网站爆红以来，国内一度掀起“仿PIN”狂潮，诸如花瓣、蘑菇街等等。正是如此，“瀑布流”式布局受到广大网民的青睐。众多知名JS库，也相继出现“瀑布流”布局插件，譬如jQuery的Masonry插件、KISSY的waterfall插件等。今天闲来无聊，我也自己动手弄了段原生JS代码，实现了简单的“瀑布流”布局效果，并且图片可以无线加载，当然肯定不能和以上那些优秀插件相提并论，有兴趣的朋友，可以去看看，希望能带给你或多或少的收获。

代码片段(1)[全屏查看所有代码]

1. [代码][JavaScript]代码

（1）html代码

( 2 )css代码

*{
	margin: 0;
	padding: 0;
}

#main{
	position: relative;
}

.box{
	padding: 15px 0 0 15px;
	float: left;
}

.pic{
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0 0 5px #ccc;
}
.pic img{
	width: 165px;
	height: auto;
}

（3）js原生代码

window.onload = function() {
	waterfall('main', 'box');
	var dataInt = {
		"data": [{
			"src": '0.jpg'
		}, {
			"src": '5.jpg'
		}, {
			"src": '3.jpg'
		}, {
			"src": '8.jpg'
		}]
	}
	window.onscroll = function() {
		if(checkScrollSlide) {

			var pHali = document.getElementById('main');
			for(var i = 0; i < dataInt.data.length; i++) {
				var obox = document.createElement('div');
				obox.className = 'box';
				pHali.appendChild(obox);
				var opic = document.createElement('div');
				opic.className = 'pic';
				obox.appendChild(opic);
				var oimg = document.createElement('img');
				oimg.src = "images/" + dataInt.data[i].src;
				opic.appendChild(oimg);
			}
			waterfall('main', 'box');
		}
	}
}

function waterfall(hali, box) {
	var pHali = document.getElementById(hali);
	var oboxs = getByClass(pHali, box);

	var oboxW = oboxs[0].offsetWidth;
	var cols = Math.floor(document.documentElement.clientWidth / oboxW);

	pHali.style.cssText = 'width:' + oboxW * cols + 'px;margin:0 auto';

	var hArr = [];
	for(var i = 0; i < oboxs.length; i++) {
		if(i < cols) {
			hArr.push(oboxs[i].offsetHeight);
		} else {
			var minH = Math.min.apply(null, hArr);
			var index = getMinhIndex(hArr, minH);
			oboxs[i].style.position = 'absolute';
			oboxs[i].style.top = minH + 'px';
			oboxs[i].style.left = oboxs[index].offsetLeft + 'px';
			hArr[index] += oboxs[i].offsetHeight;
		}
	}
}

function getByClass(hali, clsName) {
	var boxArr = new Array(),
		oElements = hali.getElementsByTagName('*');
	for(var i = 0; i < oElements.length; i++) {
		if(oElements[i].className == clsName) {
			boxArr.push(oElements[i]);
		}
	}
	return boxArr;
}

function getMinhIndex(arr, val) {
	for(var i in arr) {
		if(arr[i] == val) {
			return i;
		}
	}
}

function checkScrollSlide() {
	var pHali = document.getElementById('main');
	var oboxs = getByClass(pHali, 'box');
	var lastboxH = oboxs[oboxs.length - 1].offsetTop + Math.floor(oboxs[oboxs.length - 1].offsetHeight / 2);
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	var height = document.body.clientHeight || document.documentElement.clientHeight;
	return(lastboxH < scrollTop + height) ? true : false;
}

2.效果图