oParent.style.cssText = 'width:' + oBoxW*cols +'px;margin:0 auto';在浏览器里没有效果，console.log()也没有输出内容，有人知道这是怎么回事吗？
来源：2-3 JavaScript实现瀑布流布局中图片定位
青霜
2015-10-25 19:14
<!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()也没有输出内容，有哪位知道这是怎么回事吗？
写回答
关注
4回答
-
- ZRhuaer
- 2016-10-31 13:32:00
window.onload=function(){
waterfall('main','box');
}是onload不是load 改下效果就出来了
-
- Young520
- 2016-09-17 14:00:52
你的console.log()没有输出内容，是因为你把这行代码注释了，所以在控制台没有出现你想要的效果。
我的也是在设置main的固定宽度出了问题，不知道是不是兼容性的问题。
-
- moth丁
- 2016-01-28 09:59:08
是ie浏览器吗？ie不支持的吧
-
- proto
- 2015-12-19 12:39:15
你这个发现是什么问题了吗，我的也是这个问题，oparent.style,cssText='width:'+oBoxW*cols+'px'没反应没效果
瀑布流布局
瀑布流布局是网站比较流行的一种布局方式，教你实现三大方式
97759 学习 · 736 问题
相似问题
火狐浏览器是不支持吗怎么都没效果？？？
回答 2