问答详情
源自:2-5 onscroll事件实现瀑布流布局的图片加载功能

为啥无法显示瀑布流布局??

window.onunload=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);
    //设置main的宽度
   oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';
   // oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';
    var hArr=[];
    for(var i=0;i<oBoxs.length;i++){
        if(i<cols){
            hArr.push(oBoxs[i].offsetHeight);
        }else{
            var minH=Math.min.apply(null,hArr);
            //console.log(minH)
            var index=getMinhIndex(hArr,minH);
            oBoxs[i].style.position='absolute';
            oBoxs[i].style.top=minH+'px';
            //oBoxs[i].style.left=oBoxW*index+'px';
            oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
            hArr[index]+=oBoxs[i].offsetHeight;
        }
    }
    //console.log(hArr);



}

//根据class获取元素
function getByClass(parent,clsName){
    var boxArr=new Array(),//用来存储获取到的所有class为box的元素
        oElements=parent.getElementsByTagName('*');
    for(var i=0;i<oElements.length;i++){
        if(oElements[i].className==clsName){
            boxArr.push(oElements[i]);
        }
    }
    return boxArr;
}

function getMinhIndex(arr,val){
    for(var i in arr){
        if(arr[i]==val){
            return i;
        }
    }
}

我想问下  为啥我的无法显示像老师这样   从设置margin:0 auto;开始就不行了   我直接照抄代码还是不行 为啥啊?

提问者:Boringlife 2016-07-04 16:58

个回答

  • 星空下的小孩
    2016-07-05 11:19:29

    1、window.onload=function(){}

    2、oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto;';

    你改改,再看看