oParent.style.cssText = 'width:' + oBoxW*cols +'px;margin:0 auto';在瀏覽器里沒有效果,console.log()也沒有輸出內容,有人知道這是怎么回事嗎?
<!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<title>2.1HTML?CSS實現瀑布流布局頁面</title> ????<link?rel="stylesheet"?type="text/css"?href="css/style.css"> ????<script?type="text/javascript"> ????window.load?=?function(){ ????????waterfall("main","box"); ????}; ????function?waterfall(parent,box){ ????????//將main下所有class為box的元素取出來 ????????var?oParent?=?document.getElementById(parent); ????????var?oBoxs?=?getByClass(oParent,box); ????????//?console.log(oBoxs.length); ????????//?計算整個頁面顯示的列數(頁面寬/box的寬) ????????var?oBoxW?=?oBoxs[0].offsetWidth; ????????//?console.log(oBoxW); ????????var?cols?=?Math.floor(document.documentElement.clientWidth/oBoxW); ????????//console.log(cols); ????????//設置mian的寬度 ????????oParent.style.cssText?=?'width:'?+?oBoxW*cols?+'px;margin:0?auto'; ????} ????//根據class獲取元素 ????function?getByClass(parent,clsName){ ????????var?boxArr?=?new?Array();//用來存儲獲取到的所有class為box的元素 ????????var?oElements?=?parent.getElementsByTagName('*'); ????????for?(var?i?=?0;?i?<?oElements.length;?i++)?{ ????????????if(oElements[i].className?==?clsName){ ????????????????boxArr.push(oElements[i]); ????????????} ????????} ????????return?boxArr; ????} ????</script> </head> <body> ????<div?id="main"> ????????<div> ????????????<div> ????????????????<img?src="images/P_00.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_01.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_02.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_03.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_04.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_05.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_06.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_07.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_08.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_09.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_010.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_011.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_012.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_013.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_014.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_015.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_016.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_017.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_018.jpg"> ????????????</div> ????????</div> ????????<div> ????????????<div> ????????????????<img?src="images/P_019.jpg"> ????????????</div> ????????</div> ????</div> </body> </html>
我跟著老師寫的代碼里,不會出現固定寬度,即oParent.style.cssText = 'width:' + oBoxW*cols +'px;margin:0 auto';在瀏覽器里沒有效果,另,在控制臺上,console.log()也沒有輸出內容,有哪位知道這是怎么回事嗎?
2016-10-31
window.onload=function(){
? waterfall('main','box');
}
是onload不是load? 改下效果就出來了
2016-09-17
你的console.log()沒有輸出內容,是因為你把這行代碼注釋了,所以在控制臺沒有出現你想要的效果。
我的也是在設置main的固定寬度出了問題,不知道是不是兼容性的問題。
2016-01-28
是ie瀏覽器嗎?ie不支持的吧
2015-12-19
你這個發現是什么問題了嗎,我的也是這個問題,oparent.style,cssText='width:'+oBoxW*cols+'px'沒反應沒效果