求大神來幫我解釋一下這段代碼?。。?/h1>
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()會不會無限循環,為什么?
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()會不會無限循環,為什么?
2017-02-17
棒棒的
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:個人理解,還待驗證)