瀑布流式布局

参考地址：浅析瀑布流布局及其原理

原博主是使用jquery实现的，因为不想用jquery就稍微改了一下，并且结合自己的需求改动了一些

推荐另外的博客可以去看看，写的都是响应式瀑布流的

原生JS实现瀑布流布局

javascript实现自适应宽度的瀑布流

js实现响应式瀑布流

瀑布流布局的实现原理：

1、每一列元素等宽，根据外框的宽度 / 列宽，得到列数。

2、使用数组存起每一列当前的高度，将后面的元素插入当前列高最小的那一列

3、监听滚动时，重复步骤二插入

先看一下效果图：

html代码：

	<div class="waterfall-box" id="waterfallBox">
		<div class="waterfall-grid" id="waterfallGrid">
			<div class="waterfall-item">
				<img src="../images/a1.jpg" alt="">
				<p class="text-box">高端简约黑白大气商务活动会议会展邀请函</p>
			</div>
			<div class="waterfall-item">
				<img src="../images/a2.jpg" alt="">
				<p class="text-box">高端简约黑白大气商务活动会议会展邀请函</p>
			</div>
			<div class="waterfall-item">
				<img src="../images/a3.jpg" alt="">
				<p class="text-box">高端简约黑白大气商务活动会议会展邀请函</p>
			</div>
			&l