【原创】javascript原生实现图片瀑布流

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>瀑布流</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		#main{
			position: relative;
		}
		.box{
			float: left;
			padding: 15px 0 0 15px;
		}
		.pic{
			padding:10px;
			border: 1px solid #666;
			border-radius: 3px;
			box-shadow: 0 0  3px #777;
		}
		.pic img{
			height: auto;
			width: 150px;
		}

	</style>
</head>
<body>
	<div id="main">
		<div class="box">
			<div class="pic"><img src="img/1.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/2.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/3.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/4.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/5.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/6.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/7.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/8.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/9.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/10.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/11.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/12.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/13.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/14.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/15.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/16.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/17.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/18.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/19.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/20.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/21.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/22.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/23.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/24.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/25.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/26.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/27.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/28.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/30.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/31.jpg" alt=""></div>
		</div>
	</div>
	<script>
		window.onload=function(){
			waterfall('main','box');
		}

		function waterfall(id,clsN){
			var oid=document.getElementById(id);
			var cls=getByClassName(oid,clsN);
			var boxW=cls[0].offsetWidth;
			var num=Math.floor(document.documentElement.clientWidth/boxW);
			oid.style.cssText="width:"+num*boxW+"px ; margin:0 auto;";
			var ar=[];
			for(var i=0; i<cls.length;i++){
				if(i<num){
					ar[i]=cls[i].offsetHeight;
				}else{
					var minH=Math.min.apply(null,ar);
					var minIndex=getminHIndex(ar,minH);
					cls[i].style.position="absolute";
					cls[i].style.top=minH+"px";
					cls[i].style.left=cls[minIndex].offsetLeft+"px";
					ar[minIndex]+=cls[i].offsetHeight;
				}
			}

		}
		function getminHIndex(arr,minH){
    		for(var i in arr){
       			 if(arr[i]==minH){
            		return i;
       			 }
    		}
		}
       function getByClassName(parent,classname){ var arr=new Array(); var oparent=parent.getElementsByTagName('*'); for(var i=0;i<oparent.length;i++){ if(oparent[i].className==classname){ arr.push(oparent[i]); } } return arr; } </script> </body> </html>

  

posted on 2016-05-24 23:30  东渐  阅读(105)  评论(0编辑  收藏  举报

导航