前端知识 | 浅谈懒加载，瀑布流和木桶布局

懒加载

大家可以想想，如果有一个图片分享类的网站，里面的图片成千上万，要是用户一打开页面时，这些图片都同时加载的话，不仅浪费很多很多的流量，毕竟不是所有图片都是用户想看的，而且还会有很长的等待时间，这样的用户体验是极其糟糕的。

所以我们需要去判断这些图片是否出现在用户的可视范围内，如果出现了就去加载，如果没有出现就不加载，这种方法就叫做懒加载。

懒加载的思路

1、我们需要给图片标签的 src 属性置空，这样就没有图片在页面打开的时候加载。

2、我们需要获取整个可视窗口的高度和滚动的距离以及标签的所在位置。如果标签的位置小于窗口的高度加上滚动的距离，说明该标签在用户的可视范围内了。

3、检查图片是否加载过，如果没有的话就手动添加一个自定义属性来给与资源地址，加载该图片。

瀑布流布局

瀑布流布局是 Pinterest 网站首创，效果如图所示：

图一

——————————截图取自花瓣网

瀑布流布局原理

多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。

瀑布流布局实现

在我的 demo 里，其实瀑布流的实现主要是图片的等宽不等高，那么我们就可以强制每张图片的宽度，然后进一步去计算第一行能排列多少张图片并将第一行填满。接下来就需要根据每张图片的已知高度去计算各列中高度最小的那一列，接下来的图片，就会依次放到高度最小的那一列上（当最小的那列填补上图片后，最小高度列则换成其他列），如此循环下去，直至所有元素均能够按要求排列为止。

当然，实现的方法有多重多样，这里就不一一举例，主要的还是靠大家自己去创造。

其中：

1、计算显示的列数：页面宽度/元素宽度 取整 （页面宽度的话我们用 clientWidth 去获取）

2、计算最小高度所在列：这里我们采用的是用数组去存取最开始每列一张图时每列的高度，从而获取最小高度所在列，然后添加元素到该列并将添加的元素的高度累加到数组对应列上，这样的话，我们就可以在每次添加元素的时候获取到最小高度所在列来添加元素了

3、需要注意的是，由于我们是自定义每张图片出现在哪一列，那么我们会用定位来做这个事情，那么每当插入一张新图片的时候 top 和 left 设置为多少呢？其实很简单，top 的话设置为步骤2中获取到的最小高度即可。而 left 的话，因为我们每列宽度是固定的，那么在我们获取到最小高度所在列时顺便获取到他的数组索引的话，那么我们的 left 就可以用索引值*列宽来获得了，如图所示：

图二

木桶布局

查资料才了解，实际上木桶布局是百度前端部门自己起的一个名字。这种布局主要是将所有图片在保持原本的宽高比的情况下，保证每一行的的所有图片有相同的高度，相邻行之间高度不同。如图所示：

图三

木桶布局实现思路

1、首先获取图片原本的宽高（设为 Iw,Ih），自己定一个大概的高度（设为 Xh）。

2、通过宽高比和预设的高度，可以计算出一个预设的宽度（设为 Xw）:Xw=(Iw*Xh)/Ih

3、知道了一个预设的宽度以后，我们就需要去计算每行能放下多少张图片，一般是不可能正好放下整数张图片的，当第一行放不下时，就放在第二行，第一行便会有一些空间剩余。我们再通过计算该行所有图片宽度和（设为 XwA）/预设高度=总宽度/X 就能算出该行的高度了。公式为：Ch(该行高度)=(Cw(该行宽度)*Xh)/XwA。

代码的话因为自己也是刚实现，且实现方法较多还没有一一尝试，代码有点乱，所以就不展示了，如果大家有更多更好的实现方法，欢迎分享。

【海说软件接受各种技术咨询及开发业务】

END