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()会不会无限循环,为什么?
棒棒的
试答我的理解,纯当交流:
分别生成随机的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:个人理解,还待验证)