window.onload=function{
waterfall('main','box');
}
function waterfall(parent,box){
//姜main下的所有的class为box的元素取出来
var oParent=document.getElementById(parent);
var oBoxs=getByClass(oParent,box);
//计算整个页面显示的列数(页面宽度/box的宽度)
var oBoxW=oBoxs[0].offsetWidth;
var cols=Math.floor(document.documentElement.clienWidth/oBoxW);
//设置main的宽度
oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto;';
}
function getByClass(parent,clsName){
var boxArr=new Array(),//用来存储获取到的所有class元素
oElements=parent.getElementsByTagName("*");
for(var i=0;i<oElements.length;i++){
if(oElements[i].className==clsName){
boxArr.push(oElements[i]);
}
}
return boxArr;
}
我也觉得没区别,效果实现不了,按理说不应该定住列数不变的,列数在变,所以main的宽度也在变
我把你的代码复制过去可以用的,就是第一行function()后面少了一个括号
我知道老师的视频下面有源码下载,你可以对比。