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

瀑布流的实现

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

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

}

}

}