在”同学代码“中运行，浏览器的clientWidth获取不到-慕课网

在”同学代码“中运行，浏览器的clientWidth获取不到

来源：2-7 编程练习

举个栗子233

2015-10-28 20:47

开始写的是：

 var broW = document.documentElement.clientWidth ;

取不到值。

后来改成：

 var broW = document.documentElement.clientWidth ||document.body.clientWidth;

还是取不到值，刷新也不行，注意是在”同学代码“中看自己的代码，点运行，取不到

我写的源码如下

<!Doctype>
<html>
 <head>
   <title>瀑布流布局</title>
   <meta charset="utf-8" />
   <style>
       *{padding: 0;margin:0;}
    #main{
        position: relative
    }
    .box{
        padding: 15px 0 0 15px;
        float:left;
    }
    .pic{
        padding: 10px;
        border:1px solid #ccc;
        box-shadow: 0 0 6px #ccc;
        border-radius: 5px;
    }
    .pic img{
        width:162px;
        height:auto;
    }
       
   </style>
 </head>
 <body>
     <div id="main">
 		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edadad0001efe202000070.jpg" />
 			</div>
 		</div>
 		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edad8c000175cb00300029.jpg" />
 			</div>
 		</div>
 		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edad3e0001afad10000318.jpg" />
 			</div>
 		</div>
 		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edad2c0001b61310000314.jpg" />
 			</div>
 		</div>
  		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edad1600019ae910000310.jpg" />
 			</div>
 		</div>
  		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edad54000119fb03300130.jpg" />
 			</div>
 		</div>
  		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edad690001260a03300130.jpg" />
 			</div>
 		</div>
 		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edad7a0001cde803300130.jpg" />
 			</div>
 		</div>
 		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edacdd0001b8e804820302.jpg" />
 			</div>
 		</div>
 		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edadad0001efe202000070.jpg" />
 			</div>
 		</div>
  		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edad8c000175cb00300029.jpg" />
 			</div>
 		</div>
         <div class="box">
     		<div class="pic">
 				<img src="http://img.mukewang.com/53edad2c0001b61310000314.jpg" />
 			</div>
 		</div>
  		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edad1600019ae910000310.jpg" />
 			</div>
 		</div>
  		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edad54000119fb03300130.jpg" />
 			</div>
 		</div>
  		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edad690001260a03300130.jpg" />
 			</div>
 		</div>
 		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edad7a0001cde803300130.jpg" />
 			</div>
 		</div>
 		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edacdd0001b8e804820302.jpg" />
 			</div>
 		</div>
 		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edadad0001efe202000070.jpg" />
 			</div>
 		</div>
  		<div class="box">
 			<div class="pic">
 				<img src="http://img.mukewang.com/53edad8c000175cb00300029.jpg" />
 			</div>
 		</div>
	</div>
    <script type="text/javascript">
 window.onload=function(){
     // 调用瀑布流函数,传入两个参数，main块和每张图片所在的box块
    wallFall("main","box");
	var dataInt = {
		'data':[
			{'src':'0.jpg'},
			{'src':'1.jpg'},
			{'src':'2.jpg'}
		]
	
	};
	//	判断是否可以加载数据
	window.onscroll = function(){
		if(checkPic()){
			for(var i=0;i<dataInt.data.length;i++)
			{
				var oParent = document.getElementById('main');
				//	创建父层div，box、pic
				var box = document.createElement("div");
				box.className = "box";
				oParent.appendChild(box);
				var pic = document.createElement("div");
				pic.className = "pic";
				box.appendChild(pic);
				var im = document.createElement("img");
				im.src = "images/"+dataInt.data[i].src;
				pic.appendChild(im);
			}
			wallFall("main","box");
		}
	}

}
//    瀑布流函数
function wallFall(parent,box){
	var oParent = document.getElementById(parent);
	var boxArr = getByClass(oParent,"box");
	//	获取浏览器一行可以容纳的图片个数
	var picW = boxArr[0].offsetWidth;
    var broW = document.documentElement.clientWidth ||document.body.clientWidth;
	var num = Math.floor(broW/picW);
    alert(broW);
	//alert(num);
	//	固定main（oParent）的宽度，居中显示
	oParent.style.cssText = "width:"+(picW*num)+"px;margin:0 auto;";
	//	存储第一行6张图片高度，找出最小的那个
	var oH = new Array();
	for(var i=0;i<boxArr.length;i++){
		if(i<num){
			oH[i] = boxArr[i].offsetHeight;
		}else{
			//	找到num个高度中最小的一个，将下一张图片插到下方，更新oH数组中的值
			var oMin = Math.min.apply(null,oH);
			var ind = getIndex(oH,oMin);
			boxArr[i].style.position = "absolute";
			boxArr[i].style.top = oMin+"px";
			//console.log("oH[ind].offsetLeft"+oH[ind].offsetLeft);
			boxArr[i].style.left = picW*ind+"px";
			oH[ind] += boxArr[i].offsetHeight;
		}
	}

}

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

//获取数组中值为value的下标
function getIndex(arr,value){
    for(var i=0;i<arr.length;i++)
	{
		if(arr[i] == value)
			return i;
	}
	return -1;
}

function checkPic(){
    var oMain = document.getElementById("main");
	var oBoxs = getByClass(oMain,"box");
	//console.log(oBoxs.length);
	//	获取页面滚动的高度+页面高度
	//	document.body/documentElement.scrollHeight表示浏览器所有内容的高度
	//	document.body/documentElement.scrollTop  浏览器滚动部分高度
	var broScrH = document.body.scrollTop || document.documentElement.scrollTop;
	//	clientHeight浏览器可视区高度
	var broH = document.body.clientHeight || document.documentElement.clientHeight;
	var bro = broScrH+broH;
	
	var lastPic_broH = oBoxs[oBoxs.length - 1].offsetTop;
	var lastPicH = oBoxs[oBoxs.length - 1].offsetHeight;
	var pic = lastPic_broH+(lastPicH/2);
	
	return bro>=pic?true:false;
}

</script>
 </body>
</html>


<!-- 求值在数组中的索引,arr接收的是数组，val接收的是判断的值-->
<!--function getMinhIndex(arr,val){}-->

写回答关注