为了账号安全,请及时绑定邮箱和手机立即绑定

关于waterfall参数的问题

Jquery里面的waterfall为什么就不需要这2个参数?

正在回答

1 回答

js里面的waterfall其实也可以不用放参数,你可以试一下。个人觉得放参数的目的是为了将这个函数传入不同的参数以便多次应用。但是本课中不放参数也没什么影响的地方。

function waterfall(){
    var oParent = document.getElementById('container');
    var oBoxs = oParent.getElementsByClassName('box');
    //获取一行能放几张图片
    var boxWidth = oBoxs[0].offsetWidth;
    var cols = Math.floor(window.innerWidth/boxWidth);
    var oContainer = document.getElementById('container');
    oContainer.style.width=cols*boxWidth+'px';
    var oBoxH =[];
    for(var i=0;i<oBoxs.length;i++){
        if(i<cols){
            //定义一个数组用来保存每一行的高度
            oBoxH[i]= oBoxs[i].offsetHeight;
        }else{
            //找到oBoxH中高度最小的元素
            var minH = Math.min.apply(null,oBoxH);
            var index = getminHIndex(oBoxH,minH);
            oBoxs[i].style.position='absolute';
            oBoxs[i].style.left=index*boxWidth+'px';
            oBoxs[i].style.top = minH + oBoxs[index].offsetTop+'px';
            oBoxH[index]+=oBoxs[i].offsetHeight;
        }
    }
}

这个是jQuery的。

function waterfall(){
    var $boxs = $('.box');
    var w = $boxs.eq(0).outerWidth();
    var cols = Math.floor($(window).width()/w);
    $('#container').css('width',cols*w);
    var hArr =[];
    $boxs.each(function(index,value){
        if(index<cols){
            hArr[index]=$boxs.eq(index).outerHeight();

        }else{
            var minH = Math.min.apply(null,hArr);
            var minHIndex = $.inArray(minH,hArr);
            $(value).css({
                'position':'absolute',
                'top':minH+'px',
                'left':minHIndex*w+'px'
            });
            hArr[minHIndex]+=$(value).outerHeight();
        }

    })
}

刚学完瀑布流,新人勿喷。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
瀑布流布局
  • 参与学习       97759    人
  • 解答问题       736    个

瀑布流布局是网站比较流行的一种布局方式,教你实现三大方式

进入课程

关于waterfall参数的问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信