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

前言

瀑布流布局算是一种比较流行的布局,参差不齐的多列结构,不仅能节省空间,还能在视觉展示上错落有致不拘一格。在一次业务需求中,找了几个开源的瀑布流组件,在使用的过程中总会有点小问题,便开发了此组件。

在开始之前你可能需要先了解一下IntersectionObserver[1],核心是这个API监听指定的卡片是否在可视区域展示,当一个被监听卡片出现在可视区域,就会触发回调,执行列于列之间对比逻辑,并在高度较小的列添加数据。

基本使用

这款组件已经上传npm[2]了,有兴趣的小伙伴可以下载使用一下。

1、安装

npm i waterfall-vue2

2、使用方式

import { Waterfall } from "waterfall-vue2";
Vue.use(Waterfall);


  
    
    
  

3、基本参数和事件

API

参数 说明 类型 默认值 版本
columnCount 列数 Number 2 -
pageData 当前 pageIndex 请求的数据(非多页累加数据) Array [] -
resetSign 重置数据(清空每列数据) Boolean false -
immediateCheck 立即检查 Boolean true -
offset 触发加载的距离阈值,单位为px String|Number 300 -
colStyle 每列的样式 Object {} -
querySign 内容标识(querySelectorAll选择器) String 必须项 -

Event

事件名 说明 参数
wfLoad 滚动条与底部距离小于 offset 时触发 -
ObserveDataTotal 未渲染的数据总数 length

Slot

名称 说明
default 插槽内容
columnIndex 当前内容所在的列
item 单条数据
index 当前数据所在列的下标

技术实现

难点

图片大多数会使用懒加载实现,一般情况下节点内容已加载完成,图片未出现在可视区域内未加载。在图片高度不确定的情况下,怎么确保列表中列于列的落差小于一个卡片内容高度呢?

原理

利用IntersectionObserver监听固定的节点信息,每当监听节点出现在可视区域中,就会触发IntersectionObserver回调,在回调中执行数据插入,对比每列的内容的高度,在监听数据池中取出一个数据放在最小列高度的数据列表中。每一个数据卡片的展示,就会触发新数据卡片的加载,这就是「懒加载」瀑布流组件的核心思想。

如下图,当卡片7刚刚展示在可视区域的时候,就会触发IntersectionObserver回调,再回调逻辑中执行插入函数,插入函数中进行列于列之间的对比,此时对比发现B列高度较小,然后在监听数据池中取出一个数据,放入B列的数据列表中,渲染出卡片8。

「懒加载」的瀑布流组件你可知晓?_第1张图片

设计规划

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、流程图设计

「懒加载」的瀑布流组件你可知晓?_第2张图片

实践

pageData实现

  1. 传入数据,放入监视数据池

  2. 如重置标识为true,清空监视数据、列数据,

  3. 每次新数据都会触发数据插入

  4. 如果不兼容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实现

  1. 每次数据池数据去空修改触底标识,只要是防止滚动持续触底,当前数据未渲染完

  2. 首次数据取空查找祖先滚动元素

  3. 每次数据变化,发布事件,告知当前数据池剩余数据

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 < 0) {
        // 发布事件
        this.$emit('wfLoad')
        // 发布事件触发修改触底标识
        this.emitSign = false
      }
    },

最后

上面便是整个「懒加载」瀑布流组件的产生过程,感兴趣的小伙伴可以下载使用,体验一下。或者您有更好的想法,相互探讨,共同进步。

源码地址

github:https://github.com/zengxiangfu/vue2-waterfall

参考资料

[1]

IntersectionObserver: https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver

[2]

npm: https://www.npmjs.com/package/waterfall-vue2

你可能感兴趣的:(javascript,java,js,vue,react)