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

瀑布流的实现

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

其次 将第一行的每个块的高度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=0items[i].style.left=(itemWidth+gap)*i+pxarr.push(items[i].offsetHeight)}else{//其余行var minHeight =arr[0]var index =0for(var j=0;j<arr.length;i++){if(minHeight>arr[j]){minHeight=arr[j]index=j}}//设置下一行第一个盒子的地位 第一张图片的地位//topitems[i].style.top=arr[index]+gap+'px'//leftitems[i].style.top=items[index].offsetLeft+'px'//扭转最小列的高度arr[index] =arr[index] =items[i].offsteHeight + gap}}}