「懒加载」的瀑布流组件你可知晓？

羽田蓝天

前言瀑布流布局算是一种比较流行的布局，参差不齐的多列结构，不仅能节省空间，还能在视觉展示上错落有致不拘一格。在一次业务需求中，找了几个开源的瀑布流组件，在使用的过程中总会有点小问题，便开发了此组件。在开始之前你可能需要先了解一下IntersectionObserver[1]，核心是这个API监听指定的卡片是否在可视区域展示，当一个被监听卡片出现在可视区域，就会触发回调，执行列于列之间对比逻辑，并在高度较小的列添加数据。基本使用这款组件已经上传npm[2]了，有兴趣的小伙伴可以下载使用一下。1、安装npm i waterfall-vue22、使用方式import { Waterfall } from "waterfall-vue2";Vue.use(Waterfall);            3、基本参数和事件API参数说明类型默认值版本columnCount列数Number2-pageData当前pageIndex请求的数据（非多页累加数据）Array[]-resetSign重置数据（清空每列数据）Booleanfalse-immediateCheck立即检查Booleantrue-offset触发加载的距离阈值，单位为pxString｜Number300-colStyle每列的样式Object{}-querySign内容标识（querySelectorAll选择器）String必须项-Event事件名说明参数wfLoad滚动条与底部距离小于offset时触发-ObserveDataTotal未渲染的数据总数lengthSlot名称说明default插槽内容columnIndex当前内容所在的列item单条数据index当前数据所在列的下标技术实现难点图片大多数会使用懒加载实现，一般情况下节点内容已加载完成，图片未出现在可视区域内未加载。在图片高度不确定的情况下，怎么确保列表中列于列的落差小于一个卡片内容高度呢？原理利用IntersectionObserver监听固定的节点信息，每当监听节点出现在可视区域中，就会触发IntersectionObserver回调，在回调中执行数据插入，对比每列的内容的高度，在监听数据池中取出一个数据放在最小列高度的数据列表中。每一个数据卡片的展示，就会触发新数据卡片的加载，这就是「懒加载」瀑布流组件的核心思想。如下图，当卡片7刚刚展示在可视区域的时候，就会触发IntersectionObserver回调，再回调逻辑中执行插入函数，插入函数中进行列于列之间的对比，此时对比发现B列高度较小，然后在监听数据池中取出一个数据，放入B列的数据列表中，渲染出卡片8。设计规划1、一般瀑布流排列方式主要可以分为两种，一是分栏布局，一是绝对定位布局。不管那种思想难点都在于解决图片动态高度的问题。本次采用分栏布局方式，这样能够减少因图片加载而进行大面积卡片位置的计算。2、创建一个数据监听池，作用一是将所有未渲染的数据保存在其中。作用二是当数据池的数据取完之后可以减少很多不必要的执行操作。3、参数规划// 列数    columnCount: {      type: Number,      default: 2,    },    // 每页数据    pageData: {      type: Array,      default: () => [],    },    // 重置    resetSign: {      type: Boolean,      default: false,    },    // 立即检查    immediateCheck: {      type: Boolean,      default: true,    },    // 偏移    offset: {      type: [Number, String],      default: 300,    },    // 样式    colStyle: {      type: Object,      default: () => ({}),    },    // 查询标识    querySign: {      type: String,      require: true,    },3、函数规划getMinColSign返回最小列的标识checkObserveDom检查当前dom是否有未监听，将未监听的节点放入监听范围内insetData执行取数据并插入列数据中getScrollParentNode获取祖先滚动元素，并绑定滚动事件check滚动检查是否触发加载阀值4、流程图设计实践pageData实现传入数据，放入监视数据池如重置标识为true，清空监视数据、列数据，每次新数据都会触发数据插入如果不兼容IntersectionObserver，每列均分当前的数据   pageData(value = []) {      if (!value.length) return      if (IntersectionObserver) {        // 判断当前是否需要重置        if (this.resetSign) {          // 重置断开当前全部监控数据          this.intersectionObserve.disconnect()          Object.keys(this.colListData).forEach((key) => {            this.colListData[key] = []          })          this.observeData = [...value]          this.$nextTick(() => {            this.insetData()          })        } else {          this.observeData = [...this.observeData, ...value]          // 插入数据          this.insetData()        }      } else {        // 当 IntersectionObserver 不支持，每列数据均匀分配        const val = (this.observeData = value)        while (Array.isArray(val) & val.length) {          let keys = null          // 尽量减小数据分配不均匀          if (this.averageSign) {            keys = Object.keys(this.colListData)          } else {            keys = Object.keys(this.colListData).reverse()          }          keys.forEach((key) => {            const item = val.shift()            item & this.colListData[key].push(item)          })          this.averageSign = !this.averageSign        }      }    }insetData实现数据插入函数，确保控制数据的入口只有一个，避免同一批处理周期内执行多次。// 插入数据    insetData() {      const sign = this.getMinColSign()      const divData = this.observeData & this.observeData.shift()      if (!divData || !sign) {        return null      }      this.colListData[sign].push(divData)      this.checkObserveDom()    },getMinColSign实现获取当前所有列中高度最小的列，并返回其标识// 获取最小高度最小的标识    getMinColSign() {      let minHeight = -1      let sign = null      Object.keys(this.colListData).forEach((key) => {        const div = this.$refs[key][0]        if (div) {          const height = div.offsetHeight          if (minHeight === -1 || minHeight > height) {            minHeight = height            sign = key          }        }      })      return sign    },checkObserveDom实现将未加入监视的节点，加入监视// 检查dom是否全部被监控    checkObserveDom() {      const divs = document.querySelectorAll(this.querySign)      if (!divs || divs.length === 0) {        // 防止数据插入dom未渲染，监听函数无数据        setTimeout(() => {          // 每次新数据的首个数据无法监控，需要延迟触发          this.insetData()        }, 100)      }      divs.forEach((div) => {        if (!div.getAttribute('data-intersectionobserve')) {          // 避免重复监听          this.intersectionObserve.observe(div)          div.setAttribute('data-intersectionobserve', true)        }      })    }observeData实现每次数据池数据去空修改触底标识，只要是防止滚动持续触底，当前数据未渲染完首次数据取空查找祖先滚动元素每次数据变化，发布事件，告知当前数据池剩余数据  observeData(val) {      if(!val) return      if (val.length === 0) {        if (this.onceSign) {          // 监视数组数据分发完了，在进行首次的祖先滚动元素的查找          this.onceSign = false          this.scrollTarget = this.getScrollParentNode(this.$el)          this.scrollTarget.addEventListener('scroll', this.check)        }        // 数据更新，修改触发触底标识        this.emitSign = true      }      this.$emit('ObserveDataTotal', val.length)    }getScrollParentNode实现在内容未加载的时候，无法准确的通过overflow属性查找到滚动祖先元素，为了能够更准确的获取祖先滚动元素，在首次内容全部加载之后才进行祖先滚动元素的查找// 获取滚动的父级元素    getScrollParentNode(el) {      let node = el      while (node.nodeName !== 'HTML' & node.nodeName !== 'BODY' & node.nodeType === 1) {        const parentNode = node.parentNode        const { overflowY } = window.getComputedStyle(parentNode)        if (          (overflowY === 'scroll' || overflowY === 'auto') &          parentNode.clientHeight != parentNode.scrollHeight        ) {          return parentNode        }        node = parentNode      }      return window    },check实现检查是否触发load// 滚动检查    check() {      this.intersectionObserve & this.checkObserveDom()      // 触底标识为false直接跳过      if (!this.emitSign) {        return      }      const { scrollTarget } = this      let bounding = {        top: 0,        bottom: scrollTarget.innerHeight || 0,      }      if (this.$refs.bottom.getBoundingClientRect) {        bounding = this.$refs.bottom.getBoundingClientRect()      }      // 元素所在视口容器的高度      let height = bounding.bottom - bounding.top      if (!height) {        return      }      const container = scrollTarget.innerHeight || scrollTarget.clientHeight      const distance = bounding.bottom - container - this._offset      if (distance