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

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

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

}

}

}

瀑布流的实现