懒加载和瀑布流

一、简述图片懒加载的实现原理

图片懒加载

• 若一开始，页面上有许多的图片要加载，而如果同时加载这么多图片，会消耗性能。可以通过懒加载的方式，先只加载页面上所看到的图片，等滚动到页面下面时，再加载所需的图片。

• 作用： 可以缓解浏览器的压力，增强用户体验，让用户感觉到你的网站更快一些。将一次的压力，分解成好几段。

图片懒加载实现方式

1. 可以将img标签中的src属性链接成一个“加载”的图片或者不设置src，然后在img内自定义一个属性（如data-src）里面存放所要用到的图片地址。

2. 判断图片是否在视野中，可以通过判断”元素到内容顶部的距离 <= 滚动距离 + 窗口距离    “即如下图：
   

   

   image

   
   来判断是否要显示图片，如果需要就将data-src的值给src。
   demo

二、简述瀑布流布局的实现原理

瀑布流布局

• 宽度一致，而高度不一样的布局就是瀑布流布局

1. 先通过计算一排里面可以容纳多少列元素。

2. 然后再判断哪一列元素的高度最短，就将下一个元素放到该列。

3. 之后再判断放入该元素之后所形成的新的整排元素内，哪一列元素最短，再把下一个元素放置该列，以此类推。

• 关键变量是一个数组，存储的是当前每一列的高度之和。
  demo

三、简述木桶布局的实现原理

木桶布局

• 高度一致，而宽度不一样的布局就是木桶布局

1. 首先设置一个基准的高度，将图片以一定的宽高比压缩至该高度内的第一行。

2. 将图片放满第一行，当空间不够时，将前面的图片作为一个整体，拉伸至其宽度刚好可以充满容器。

3. 之后多余的图片，就放置第二行，重复上述步奏，以此类推。

四、如何判断元素出现在用户视野?

• 判断该元素是否在视野中，可以通过判断”元素到窗口顶部的距离 <= 滚动距离 + 窗口距离     “即如下图：

  
  

  

  image

作者：徐金俊
链接：https://www.jianshu.com/p/260b28eda780