在”同學代碼“中運行，瀏覽器的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){}-->
2016-01-01
我試了下，沒問題啊，可以取值啊，