                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /瀑布流布局

求大神来帮我解释一下这段代码！！！

var _al = [];
function waterfall(){
     // 计算及定位数据块显示分散效果
     var _pin = $("#main").find(".pin");
     var _pw = _pin.eq(0).outerWidth();
     var _wh = $(window).height()/2;
     var _ww = $(window).width();
        
    var _co = Math.floor(_ww/_pw);
    var _pi = _pin.length;
    // 初始化数组
    for(var i in _pin){
        if(i<_co){
            _al.push(0);
        }
        _pin.eq(i).css({
            top:_wh,
            left:'50%',
            'margin-top':-(_pin.height()/2)+((Math.floor(Math.random()*10)<5?-1:1)*Math.floor(Math.random()*200)),
            'margin-left':-(_pin.width()/2)+((Math.floor(Math.random()*10)<5?-1:1)*Math.floor(Math.random()*200))
        });
    }
    animateWater(_pin,0,_pw);
}
function animateWater(_pin,_i,_pw){
        var _t = getMin(_al);
        _pin.eq(_i).animate({
            left:_t*_pw,
            'margin':0,
            top:_al[_t]
        },300,function(){
            _al[_t]+=_pin.eq(_i).outerHeight();
            _i++;
            animateWater(_pin,_i,_pw);
        })
}

function getMin(_al){
    var _minT = Math.min.apply(null,_al);
    for(var i in _al){
        if(_al[i]==_minT){
            return i;
        }
    }
}

'margin-top':-(_pin.height()/2)+((Math.floor(Math.random()*10)<5?-1:1)*Math.floor(Math.random()*200)),
'margin-left':-(_pin.width()/2)+((Math.floor(Math.random()*10)<5?-1:1)*Math.floor(Math.random()*200))
对于这两行十分不解，
animateWater()会不会无限循环，为什么？

我要吃冰激凌

2016-04-08

源自：瀑布流布局 5-2

关注问题我要回答

945

操作

收起

2 回答

qq_我叫红领巾_2
2017-02-17

棒棒的

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

收起回答

icefiva
2016-04-10

试答我的理解，纯当交流：

分别生成随机的margin-top和margin-left值，通过Math.random()方法组合生成随机数值，如：
Math.random()*10)<5?-1:1--->生成10以内的随机数，如小于5，则返回-1；如大于5，则返回1；
Math.random()*200--->生成200以内的随机数
结合起来((Math.floor(Math.random()*10)<5?-1:1)*Math.floor(Math.random()*200))，就是生成正负200以内的随机数，其他的数值，前边代码都固定值了，对应加上就是。
不会无限循环，验证过了，至于为什么，我的理解是：
_pin.eq(_i).animate（）其中.eq(_i)传入的_i最终会超出_pin对象的索引范围，此时应该是构造了一个空对象，空对象不能执行.animate()方法吧（PS：个人理解，还待验证）