課程
/前端開發(fā)
/JavaScript
/瀑布流布局
Jquery里面的waterfall為什么就不需要這2個參數(shù)?
2017-08-18
源自:瀑布流布局 2-3
正在回答
js里面的waterfall其實(shí)也可以不用放參數(shù),你可以試一下。個人覺得放參數(shù)的目的是為了將這個函數(shù)傳入不同的參數(shù)以便多次應(yīng)用。但是本課中不放參數(shù)也沒什么影響的地方。
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){ ????????????//定義一個數(shù)組用來保存每一行的高度 ????????????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(); ????????} ????}) }
剛學(xué)完瀑布流,新人勿噴。
舉報
瀑布流布局是網(wǎng)站比較流行的一種布局方式,教你實(shí)現(xiàn)三大方式
1 回答關(guān)于參數(shù)的問題
1 回答請問waterfall里面的兩個參數(shù)的意義何在?
1 回答waterfall()
1 回答請教一個關(guān)于列數(shù)的問題
1 回答關(guān)于parent的問題
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2017-08-24
js里面的waterfall其實(shí)也可以不用放參數(shù),你可以試一下。個人覺得放參數(shù)的目的是為了將這個函數(shù)傳入不同的參數(shù)以便多次應(yīng)用。但是本課中不放參數(shù)也沒什么影響的地方。
這個是jQuery的。
剛學(xué)完瀑布流,新人勿噴。