js里面的waterfall其實(shí)也可以不用放參數(shù)，你可以試一下。個(gè)人覺(jué)得放參數(shù)的目的是為了將這個(gè)函數(shù)傳入不同的參數(shù)以便多次應(yīng)用。但是本課中不放參數(shù)也沒(méi)什么影響的地方。

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){
????????????//定義一個(gè)數(shù)組用來(lái)保存每一行的高度
????????????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;
????????}
????}
}

這個(gè)是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é)完瀑布流，新人勿噴。