求大神来帮我解释一下这段代码！！！
来源：5-2 编程挑战
我要吃冰激凌
2016-04-08 15:20
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()会不会无限循环，为什么？
写回答
关注
2回答
-
- qq_我叫红领巾_2
- 2017-02-17 04:12:14
棒棒的
-
- icefiva
- 2016-04-10 21:14:33
试答我的理解，纯当交流：
分别生成随机的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：个人理解，还待验证）
瀑布流布局
瀑布流布局是网站比较流行的一种布局方式，教你实现三大方式
97747 学习 · 758 问题
相似问题