js自适应瀑布流

自己找一些宽度一样的图片插入就可以看到效果了
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				position: relative;
			}
			#wrap div{
				position: absolute;
				border: 1px solid #cdcdcd;
			}
			img{
				display: block;
				border: 0;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div><img src="img2/1.jpg"/></div>
			<div><img src="img2/2.jpg"/></div>
			<div><img src="img2/3.jpg"/></div>
			<div><img src="img2/4.jpg"/></div>
			<div><img src="img2/5.jpg"/></div>
			<div><img src="img2/6.jpg"/></div>
			<div><img src="img2/7.jpg"/></div>
			<div><img src="img2/8.jpg"/></div>
			<div><img src="img2/9.jpg"/></div>
			<div><img src="img2/3.jpg"/></div>
			<div><img src="img2/2.jpg"/></div>
			<div><img src="img2/6.jpg"/></div>
		</div>
		<script type="text/javascript">
			var data = ["img2/1.jpg","img2/5.jpg","img2/9.jpg"];
			window.onload = window.onresize = function(){
				var oWrap = document.getElementById("wrap");
				//整个画面宽度
				var oAllWidth = oWrap.offsetWidth;
				var oDiv = oWrap.children;
				//每张图片宽度
				var oPerWidth = oDiv[0].offsetWidth;
				//图片的margin-top和margin-left值
				var mt = ml = 10;
				//求第一行所能容纳的列数
				var cols = Math.floor(oAllWidth/(oPerWidth+ml));
				//第一行排列
				var arr = [];
				for(var i=0;i<cols;i++){
					oDiv[i].style.top = 0;
					oDiv[i].style.left = i*(oPerWidth+ml)+"px";
					//将第一行每列的高度值存到数组中
					arr.push(oDiv[i].offsetHeight);
				}
				//排剩下的图片
				comPos(cols);
				
				//剩下填充的图片定位高度是最短的那一列的高度+margintop值
				//定位left值是最短那一列的left值
				function comPos(startWay){
					for(var i=startWay;i<oDiv.length;i++){
						oDiv[i].style.top = arr[minIndex(arr)]+mt+"px";
						oDiv[i].style.left = oDiv[minIndex(arr)].style.left;
						//更新数组中各列高度
						arr[minIndex(arr)] += oDiv[i].offsetHeight + mt;
					}
				}
				
				//找最小高度索引
				function minIndex(arr){
					var minValue = Math.min.apply(null,arr);
					var minIndex = arr.indexOf(minValue);
					return minIndex;
				}
				
				//滚动条滚动，不停地插入图片到最短的那一列下方
				var ch = document.documentElement.clientHeight;
				window.onscroll = function(){
					var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
					if(arr[minIndex(arr)]<ch+scrollTop){
						var str = "";
						for(var i=0;i<data.length;i++){
							str+="<div><img src="+ data[i] +"></div>";
						}
						oWrap.innerHTML +=str;
						//从div最末尾添加图片
						comPos(oDiv.length-data.length);
					}
				}
			}	
		</script>
	</body>
</html>
猜你喜欢
