瀑布流与懒加载

什么是图片的滚动加载

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一个1*1大小的图片路径，这样做页面只需要请求一次，只有当图片出现在浏览器的可视区域内，让图片显示出来，这就是图片懒加载。

图片懒加载主要是缓解浏览器的压力，增强用户体验。

戳我

实现原理

• img标签是通过src属性来获取图片，我们可以自定义一个属性，用来存放img获取图片的路径。

• 然后通过js，检查当前图片，判断图片是否出现在用户视野中，如果出现在用户视野中，就用真实的图片地址，来替代默认的图片地址

瀑布流布局实现原理

瀑布流，又称瀑布流式布局。目前比较流行的一种布局方式，视觉效果表现为参差不齐的多栏布局，随着页面向下滚动，这种布局还会不断加载数据，并附加至当前尾部。

image

1. 首先瀑布流布局，所有的图片宽度保持一致，高度由内容决定。

2. 通过绝对定位的方法来动态的设置它的top和left的值，就可以实现瀑布流。

3. 通过获取到(父容器的宽度/小盒子的宽度） 获得列数

4. 定义一个记录每列高度的数组，列数就是数组的长度。初始值为0.

5. 遍历数组，查找数组中的最小元素(列高最小值)以及他的索引，将下一个元素放到对应的位置，父容器的top = 列高最低的高度，距离父容器的left = 每列的宽度 * 最小列高值的索引。

6. 摆放好元素，更新位置高度，重新遍历数组，重复上一步操作，直至元素排列完成。

瀑布流:1
瀑布流:2