关于前端:瀑布流的代码实现

瀑布流的实现

思路：首先确定视口宽度 再确定第一行的每个块的宽度 通过两者来晓得第一行有多少个块

其次 将第一行的每个块的高度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

}

}

}