实现瀑布流加载图片

实现瀑布流加载图片

什么是瀑布流布局呢？

是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是Pinterest。页面容器内的多个高度不固定的div之间按照一定的间隔参差不齐的无序浮动，鼠标滚动时不断在容器内的尾部加载数据，且自动加载到空缺位置，不断循环。
现在我们常用的电商网站、网图网站多数会都采用了这种技术。具体效果如下图所示：

本文中总结三种瀑布流的写法，如下：

一、利用js实现瀑布流布局

注意：1.瀑布流布局的特点是等宽不等高。
2.为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。
3.父元素设置为相对定位，图片所在元素设置为绝对定位。然后通过设置 top 值和 left 值定位每个元素。
代码实现：
HTML部分：

<div class="out"><div class="in"><img src="img/img1.jpg" alt="" width="280px"></div><div class="in"><img src="img/img2.jpg" alt="" width="280px"></div><div class="in"><img src="img/img3.jpg" alt="" width="280px"></div><div class="in"><img src="img/img4.jpg" alt="" width="280px"></div>
</div>

css部分：

* {margin: 0;padding: 0;
}.out {margin: 0 auto;width: 1200px;border: 1px solid #ab15fd;display: flex;flex-wrap: wrap;justify-content: space-evenly;align-items: flex-start;
}.in {width: 280px;text-align: center;line-height: 100px;font-size: 30px;color: #ab15fd;box-sizing: border-box;
}img {width: 280px;
}

js部分：

// 获取4个放置图片的容器
var ins = ElementsByClassName("in");
// 定义数组，存放4个容器的高度
var arrHeight = [];
// 数组中的最小的高度
var