瀑布流代码实现

瀑布流实现思路：先确定viewport的宽度，再确定第一行每个block的宽度。通过两者可以知道第一行有多少块，然后在第一行设置每个块的高度，将块的高度推到arr数组中，存储第一行块左边的距离排。最后，第二行的块放在第一行高度最短的块下面。获取第一行高度最短的块的offsetLeft作为自己的。offsetLeft剩余的block的填充方式和上一行高度最短的block一样（注意：第二行block的高度会加上原来第一行最短block的高度）functionwaterFall(){//视口的宽度varpageWidth=getClient().width//视口的宽度varitemWidth=items[0].offsetWidth//每个块的宽度//column=pageWidth%itemWidthvarcolumns=parseInt(pageWidth/(itemWidth+gap))//gap是指列之间的间隔vararr=[]//height的值放在里面for(vari=0;iarr[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+间隙}}}