亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

關于waterfall參數的問題

Jquery里面的waterfall為什么就不需要這2個參數?

正在回答

1 回答

js里面的waterfall其實也可以不用放參數,你可以試一下。個人覺得放參數的目的是為了將這個函數傳入不同的參數以便多次應用。但是本課中不放參數也沒什么影響的地方。

function?waterfall(){
????var?oParent?=?document.getElementById('container');
????var?oBoxs?=?oParent.getElementsByClassName('box');
????//獲取一行能放幾張圖片
????var?boxWidth?=?oBoxs[0].offsetWidth;
????var?cols?=?Math.floor(window.innerWidth/boxWidth);
????var?oContainer?=?document.getElementById('container');
????oContainer.style.width=cols*boxWidth+'px';
????var?oBoxH?=[];
????for(var?i=0;i<oBoxs.length;i++){
????????if(i<cols){
????????????//定義一個數組用來保存每一行的高度
????????????oBoxH[i]=?oBoxs[i].offsetHeight;
????????}else{
????????????//找到oBoxH中高度最小的元素
????????????var?minH?=?Math.min.apply(null,oBoxH);
????????????var?index?=?getminHIndex(oBoxH,minH);
????????????oBoxs[i].style.position='absolute';
????????????oBoxs[i].style.left=index*boxWidth+'px';
????????????oBoxs[i].style.top?=?minH?+?oBoxs[index].offsetTop+'px';
????????????oBoxH[index]+=oBoxs[i].offsetHeight;
????????}
????}
}

這個是jQuery的。

function?waterfall(){
????var?$boxs?=?$('.box');
????var?w?=?$boxs.eq(0).outerWidth();
????var?cols?=?Math.floor($(window).width()/w);
????$('#container').css('width',cols*w);
????var?hArr?=[];
????$boxs.each(function(index,value){
????????if(index<cols){
????????????hArr[index]=$boxs.eq(index).outerHeight();

????????}else{
????????????var?minH?=?Math.min.apply(null,hArr);
????????????var?minHIndex?=?$.inArray(minH,hArr);
????????????$(value).css({
????????????????'position':'absolute',
????????????????'top':minH+'px',
????????????????'left':minHIndex*w+'px'
????????????});
????????????hArr[minHIndex]+=$(value).outerHeight();
????????}

????})
}

剛學完瀑布流,新人勿噴。

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

舉報

0/150
提交
取消
瀑布流布局
  • 參與學習       97751    人
  • 解答問題       758    個

瀑布流布局是網站比較流行的一種布局方式,教你實現三大方式

進入課程

關于waterfall參數的問題

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號