js实现图片瀑布流的两种方式（附代码）

我们首先确定排布的列数（假如为4列），那么第一行只能放4张图片，然后将每个图片的高度放入一个数组中（假如为 heightArr = [100,50, 200,30]），当我们在放入下一张图片的时候就要判断这个数组中哪个高度是最小的（这里是30），然后还要知道最小的高度所在高度数组的索引（这里是i = 3），然后我们就可以对这张图片进行定位：

{
    position: absolute;
    left: i*100 + &＃39;px&＃39;;
    top: 30 + &＃39;px&＃39;
}

如此遍历剩下的图片即可。

实现代码

下面是未处理的原始代码，图片之间间隔很多空白，影响美观。

下面是处理后的代码：

2、第二种方式

第二种方式前提是：列是固定的个数，然后图片根据屏幕的宽度进行自适应缩放。

这种方式由于图片是可以缩放的，宽高不好确定，因此不好用定位的方式处理。

我们可以这样处理，既然知道了列，那么每一列做一个容器。然后遍历图片，将图片放入容器高度最小的容器中即可。

这里我们使用js来添加图片，而不是事先写好在html中了。

实现代码

本文来自 js教程 栏目，欢迎学习！

以上就是js实现图片瀑布流的两种方式（附代码）的详细内容，更多请关注 第一PHP社区 其它相关文章！