JS实现瀑布流，想让图片自适应浏览器窗口，结果窗口缩小可以实现，扩大窗口不行，求助！！！

GudongM 2018-04-15 06:42:55

想要实现图片自适应浏览器窗口，结果窗口缩小可以实现，扩大窗口不行，求助大神帮忙看下哪里出了问题，谢谢！
HTML文件大致结构如下：



<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>瀑布流</title>

		<link rel="stylesheet" type="text/css" href="css/1.css"/>

		<script src="js/1.js"></script>

	</head>

	<body>

		<div id="container">

			<div class="box">

				<div class="box_img">

					<img src="img/0.jpg"/>

				</div>

			</div>

			<div class="box">

				<div class="box_img">

					<img src="img/1.jpg"/>

				</div>

			</div>

	        </div>

	</body>

</html>

css文件:



*{

	margin: :0px;

	padding: 0px;

}

#container{

	position: relative;

}

.box{

	padding:5px;

	float: left;

}

.box_img{

	padding: 5px;

	border: 1px solid #cccccc;

	box-shadow: 0 0 5px #ccc;

	border-radius: 5px;

}

.box_img img{

	width: 150px;

	height: auto;

}

js文件:



window.onload=function(){

	imgLocation("container","box");	

}

	var timer;

	window.onresize = function() {

        clearTimeout(re);

        timer = setTimeout(function() {imgLocation("container","box");}, 200);

    }

function imgLocation(parent,content){   

	var cparent = document.getElementById(parent);

	var ccontent = getBox(cparent,content); 

	var imgWidth = ccontent[0].offsetWidth;  			//得到图片的宽度

	var num=Math.floor(document.documentElement.clientWidth/imgWidth); //每一行所能展示图片的个数

	cparent.style.cssText="width:"+imgWidth*num+"px;margin:0 auto;";

	var BoxHeigtArr=[];  		

	for (var i=0;i<ccontent.length;i++) {

		if(i<num){

			BoxHeigtArr[i]=ccontent[i].offsetHeight;

		}else{

			var minHeight = Math.min.apply(null,BoxHeigtArr);  			

			var minIndex=getMinHeightImg(BoxHeigtArr,minHeight);		

			ccontent[i].style.position="absolute";

			ccontent[i].style.top=minHeight+"px";

			ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";

			BoxHeigtArr[minIndex]=BoxHeigtArr[minIndex]+ccontent[i].offsetHeight;

		}

	}

}

function getMinHeightImg(BoxHeightArr,minHeight){    

	for (var i in BoxHeightArr) {

		if(BoxHeightArr[i]==minHeight){

			return i;

		}

	}

}

function getBox(parent,content){                                 

	var contentArr = [];

	var allcontent = parent.getElementsByTagName("*"); 

	for (var i=0;i<allcontent.length;i++) {

		if(allcontent[i].className==content){

			contentArr.push(allcontent[i]);

		}

	}

	return contentArr;

}