直播源碼開發中，瀑布流式界面的實作

思路

首先确定直播源碼視口寬度，再确定第一行的每個塊的寬度，通過兩者來知道第一行有多少個塊

其次 将直播源碼第一行的每個塊的高度push到arr數組中存放 擷取第一行塊的距離左邊的距離

最後 将直播源碼第二行的塊放在第一行的高度最短的塊下面 擷取第一行高度最短的塊的offsetLeft當成自己的offsetLeft

剩下的塊以此類推 依次找上一行高度最短的塊的下面補齊（注：第二行的塊的高度會加到原來第一行最短塊的高度上）

function waterFall(){

//視口的寬度

var pageWidth = getClient().width        //視口的寬度

var itemWidth = items[0].offsetWidth   //每個塊的寬度

// column = pageWidth % itemWidth   

var columns =parseInt( pageWidth/(itemWidth + gap) )

//gap指的是columns之間的間隔



var arr=[]  //裡面放的是高度的值

for(var i=0;i<items.length;i++){

if(i<columns){

//确定第一行

items[i].style.top=0

items[i].style.left=(itemWidth+gap)*i+px

arr.push(items[i].offsetHeight)

}else{

//其他行

var minHeight =arr[0]

var index =0

for(var j=0;j<arr.length;i++){

if(minHeight>arr[j]){

minHeight=arr[j]

index=j

}

}



//設定下一行第一個盒子的位置 第一張圖檔的位置

//top

items[i].style.top=arr[index]+gap+'px'

//left

items[i].style.top=items[index].offsetLeft+'px'



//改變最小列的高度

arr[index] =arr[index] =items[i].offsteHeight + gap

}

}

}
           

圖示：

瀑布流式界面能讓使用者在使用直播源碼時更流暢，以上就是“直播源碼開發中，瀑布流式界面的實作”的全部内容，希望對大家有幫助。