问答详情
源自:5-2 编程挑战

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

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;
        }
    }
}
  1. '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))

    对于这两行十分不解,

  2. animateWater()会不会无限循环,为什么?


提问者:我要吃冰激凌 2016-04-08 15:20

个回答

  • qq_我叫红领巾_2
    2017-02-17 04:12:14

    棒棒的

  • icefiva
    2016-04-10 21:14:33

    试答我的理解,纯当交流:

    1. 分别生成随机的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以内的随机数,其他的数值,前边代码都固定值了,对应加上就是。

    2. 不会无限循环,验证过了,至于为什么,我的理解是:

      _pin.eq(_i).animate()其中.eq(_i)传入的_i最终会超出_pin对象的索引范围,此时应该是构造了一个空对象,空对象不能执行.animate()方法吧(PS:个人理解,还待验证)