vue中原生语法实现瀑布流及懒加载(无限加载)(利用IntersectionObserver)

vue中原生语法实现瀑布流及懒加载(利用IntersectionObserver)

如果要实现懒加载, 第一反应不过是计算可视高度即滚动条之间的距离来进行对比

都2021年了, 如果面试官让手写一个懒加载, 毫无亮点了已经

下面介绍一种实现懒加载的方式, 并结合瀑布流

首先先写出瀑布流

dom结构以及样式

<template>
<!-- 结构很简单, 就一个容器, 里面放一个列表, 列表循环遍历 -->
  <div class="waterfall wf-wrap" ref="waterfall">
    <ul>
      <transition-group name="list" tag="li">
        <li
          v-for="(item, index) in waterfallList"
          :key="index"
          class="wf-item"
          <!-- 这里样式找data中的数据拿, 而不是直接用js操作, 至于为什么下面方法中会解释 -->
          :style="{
            top: item.top + 'px',
            left: item.left + 'px',
            width: item.width + 'px',
            height: item.height + 'px',
          }"
        >
          <img :src="item.src" />
        </li>
      </transition-group>
    </ul>
  </div>
</template>

/* 样式也非常简单, 就只是开启定位和一个加载动画 */
<style scoped>
ul li {
  list-style: none;
}

.wf-wrap {
  position: relative;
  width: 800px;
  margin: 0 auto;
}
.wf-item {
  position: absolute;
  height: 100%;
}
.wf-item img {
  width: 100%;
}

/*定义渲染动画*/
.list-enter-active,
.list-leave-active {
  transition: all 1s;