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'沒反應沒效果