图片的瀑布流布局显示

step1: 计算可容纳的列数：

var  col  = Math.floor(window.innerWidth/img.offsetWidth)

step2:剩余的宽度用来分配给水平间距

var  hgap = window.innerWidth%img.offsetWidth/(col+ 1)　

推导过程：

第一列：  left  = hgap * 1 + img.offsetWidth * 0

第二列：  left  = hgap * 2 + img.offsetWidth * 1

第三列：  left  = hgap * 3 + img.offsetWidth * 2

.................

第col列： left  =  hgap * col + img.offsetWidth *( col -1)

则left的计算公式为：

left = hgap *(index+1) + 图片宽度 *index

step3: 初始化，定义一个垂直的间距vgap

step4: 创建一个数组，记录第一行左上角坐标

        left： hgap *(index+1) + 图片宽度 *index

        top： vgap

step5: 排列图片，查找最小的top值，并把当前图片定位到对应的left、top。每排列一张图片后，就更新对应的值。

转载于:https://www.cnblogs.com/fanlina/p/8473765.html