瀑布流--与图片的预加载

所谓瀑布流，就是图片分几列有规律的排列，但是这里的排列是有要求的，普通的浮动布局会使图片与图片之间有很多的空隙，这个是非常烦人的啊，所以我们就可以使用定位布局。

一最简单版的

大致原理就是用几个容器包住我么你的图片，容器之间的距离设置好，的宽度或者高度有一个和容器一样，这样就实现了一个坐标轴的规范化了
另一个方向要求我们始终向当前内容最短的那个里面插入，这时候我们既要不断的计算那个是最短的
可以使用 offsetWidth 和offsetHeight 来计算宽和高
这里需要特殊说明，图片的尺寸是浏览器渲染之后才有的所以就要借用 img.onload 这个事件 在图片加载之后获取我们想要的宽度和高度
如果有图片预加载处理这里可以直接获取
获取到的数值怎么处理呢，怎么能一直的记住呢，就要用到数组了，数组的下标对应所在的列数 最开始让数组里面的值都是零，每次向容器里面插入之后就可以让数组对应下标的值增大，用循环找到数组里面的最小的值，就是我们想要向里面插入东西的那个容器了，这样对应起来非常的方便；
缺点：局限性太大了，不能响应式 层级太多 插入的尾端不是对齐的

二 动态插入（不能响应式）

大致原理 ： 动态创建一个 img 元素 var img = new image（）；
设置 img的路径 然后 向盛放img的容器插入图片

这里不使用容器来限制图片 这是 根据当前窗口能放下几列图片来 计算
我们可以设置一个变量 用来设置 图片与图片之间的距离
然后把每张图片的宽度 理解为 事件宽度加上 这个距离 就会使所有的图片在一个方向上有相同的距离了
这里我们依旧要用一个数组来保存那一列的总高度是最小的，但是这里面这个数组的长度，就决定了有几列
比如向下排布的瀑布流，定位的left 就是 上面所说的总宽度（宽度加上距离）乘以数组的下表就可以了
定位的top：值开始应该用一个循环都设置为零 然后一直累加当前插入元素的高度，在下一次插入之前要比较那一列的总高度是最小的，就像其里面插入

三响应式

插入的原理和上面的第二种方法一样，就是利用一个时间 window.onresize 窗口的尺寸发生改变的时候重新的布局
就可以的

图片的预加载

图片相对于我们的代码渲染来说是很大的，尤其是网速不好的时候，卡的不行啊。这时候我们就可以让所有的图片在程序的执行之前加载好，这样程序的执行就非常的流畅了，用户的体验那就更棒了。

具体的原理呢，就是床建一个数组，把所有我们需要的图片动态的插入到数组里面，又去JavaScript使用的是垃圾回收机制，这就导致了一旦堆区的内存在栈区没有了指向就会被回收，加载的就白扯了
什么算是加载呢，就是图片制定了一个src 图片就开始加载了 什么时候加载好了呢 就可以用 img.onload 来监听
怎么想数组里面插入呢，最简单的就是利用咱们的for循环了 加载多少个图片就执行多少次 ，很方便的

这样我们在使用上面加载好的src的时候就是瞬间的展示出来了，不会有延迟和卡顿的现象