源自:2-4 JavaScript实现瀑布流布局中图片排序
我是将css,js和html都写在一起的,请大神帮我看看为什么实现不了功能呢?
瀑布流布局*{ margin:0;
padding:0;}
#main{ position:relative;}
.box{ padding:15px 0 0 15px;
}
.pic{ padding:10px;
border:1px solid #CCC;
border-radius:5px;
box-shadow:0 0 5px #CCC;
float:left;
}
.pic img{ width:165px;
height:auto}
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.clientWidth/oBoxW);
//设置main的宽带
oParent.style.cssText = 'width:'+oBoxW*cols+'px;margin:0 auto';
var hArr=[];
for(var i=0;i
{if(i
hArr.push(oBoxs[i].offsetHeight);
} else{var minH=Math.min.apply(null,hArr);
var index=getMinhIndex(hArr,minH);
oBoxs[i].style.position='absolute';
oBoxs[i].style.top=minH+'px';
oBoxa[i].style.left=oBoxs[index].offsetLedt+'px';
hArr[index]+=oBoxs[i].offsetHeight;
}
}
}
//根据classs获取元素
function getByClass(parent,clsname){
var boxArr = new Array();//用来存储获取到的所有class为box的元素
oElements = parent.getaElementsByTagName('*');
for(var i=0;i
{if(oElements[i].className==clsName){
boxArr.push(oElements[i]);
}
}
return boxArr;
}
提问者:qq_YOYO_153384916
2016-10-11 12:54