js原生瀑布流插件制作

本文实例为大家分享了js原生瀑布流插件制作的具体代码，供大家参考，具体内容如下

先看效果

.给图片利用绝对定位来排布图片，计算对应的left和top值，也就是对应的x,y坐标

前三步应该没有问题，来看第四步

想法是这样的

主要思路就是寻找最短的一列来排布下一张图片，现在最短出现在第二列

这个时候图片添加到了之前最短的第二列，现在继续寻找最短的一列，继续添加图片

这样此类推完成瀑布流的排布，来看看具体过程

首先计算出一共有几列图片，创建一个长度为列数的数组，全部填充为0，用来后面存放y坐标

遍历容器内子元素，在循环中求出当前数组中最小值以及最小值所在位置（列数）就是y坐标

这个时候就可以求x坐标了

x = （列数+1）* 间距 + 当前列 * 宽度（传入的实参）

这样就有了位置

要注意每次需要更新一下数组，就是修改添加图片位置的y坐标，以及图片的异步加载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。