在”同学代码“中运行，浏览器的clientWidth获取不到
开始写的是：
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://img1.sycdn.imooc.com//53edadad0001efe202000070.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.com//53edad8c000175cb00300029.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.com//53edad3e0001afad10000318.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.com//53edad2c0001b61310000314.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.com//53edad1600019ae910000310.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.com//53edad54000119fb03300130.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.com//53edad690001260a03300130.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.com//53edad7a0001cde803300130.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.com//53edacdd0001b8e804820302.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.com//53edadad0001efe202000070.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.com//53edad8c000175cb00300029.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.com//53edad2c0001b61310000314.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.com//53edad1600019ae910000310.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.com//53edad54000119fb03300130.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.com//53edad690001260a03300130.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.com//53edad7a0001cde803300130.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.com//53edacdd0001b8e804820302.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.com//53edadad0001efe202000070.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://img1.sycdn.imooc.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){}-->
