滚动加载

vue/App.vue

@@ -44,7 +44,8 @@
     <!-- LoadImage组件 -->
     <div class="box">
       <div class="title">LoadImage组件</div>
-      <LoadImage :data="dataList" :isOver="isOver" @lazyLoad="lazyLoad"></LoadImage>
+      <!-- <LoadImage :data="dataList" :isOver="isOver" @lazyLoad="lazyLoad"></LoadImage> -->
+      <qjLoadImage :list="dataList" @lazyLoad="lazyLoad"></qjLoadImage>
     </div>
 
     <!-- Table组件 -->
@@ -64,6 +65,7 @@ import {defineComponent, onMounted, ref} from 'vue'
 import Modal from './components/modal/index.vue'
 import Popover from './components/popover/index.vue'
 import LoadImage from './components/loadImage/index.vue'
+import qjLoadImage from './components/qjLoadImage/index.vue'
 import Table from './components/table/index.vue'
 import Demo from './components/demo.vue'
 
@@ -74,7 +76,8 @@ export default defineComponent({
     Popover,
     LoadImage,
     Table,
-    Demo
+    Demo,
+    qjLoadImage
   },
   setup(props) {
     const msg = ref('有追求')

vue/components/qjLoadImage/index.vue

@@ -0,0 +1,86 @@
+
+
+<template>
+  <div class="WaterfallList" ref="wrapper">
+    <div class="WaterfallBox" ref="box" @scroll="obseverSrcoll">
+      <div class="WaterfallCol" v-for="item in colList" :key="item.key" :style="{width:imgWidth}">
+          <div class="item" v-for="(v) in item.dataList" :key="v.id">
+            <img :src="v.url" style="width:100%" />
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  onMounted,
+  reactive,
+  defineEmits,
+  defineProps,
+  computed,
+} from "vue";
+import {throttle} from './util'
+const emit = defineEmits(["lazyLoad"]);
+const props = defineProps({
+  list: Array,
+  col: {
+    type: Number,
+    default: 3
+  }
+});
+const wrapper = ref(null)
+const box = ref(null)
+const imgWidth = ref(`${100 / props.col}%`);
+const lazyLoad = ()=>{
+    emit('lazyLoad')
+}
+let colList = computed(() => {
+  let imglist = [...props.list];
+  let index = 0;
+  let list = [];
+  for (let i = 0; i < props.col; i++) {
+    list.push({ key: i, dataList: [] });
+  }
+  imglist.forEach((item, ind) => {
+    list[index].dataList.push(item);
+    index++;
+    if (index >= props.col) index = 0;
+  });
+  imglist = []
+  return list;
+});
+let top = 0
+const obseverSrcoll = throttle(()=>{
+    const scrollTopHeight = box.value.scrollTop
+    const scrollHeight = box.value.scrollHeight
+    const clientHeight = wrapper.value.clientHeight
+    if(scrollTopHeight+clientHeight>scrollHeight-500){
+        lazyLoad()
+    }   
+},1000)
+
+</script>
+<style scoped>
+.WaterfallList {
+  width: 600px;
+  height: 500px;
+  overflow: hidden;
+  border: 1px solid black;
+}
+.WaterfallBox {
+  width: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: row;
+}
+.WaterfallCol {
+  height: 500px;
+}
+.item {
+  float: left;
+  padding: 5px;
+  border: 1px solid pink;
+}
+</style>

vue/components/qjLoadImage/util.js

@@ -0,0 +1,12 @@
+export function throttle(fn,delay) {
+    let timeout
+    return function() {
+      let args = arguments;//注意如果要传参的话 这句不能省略
+      if(!timeout){
+        timeout = setTimeout(()=>{
+          timeout = null;
+          fn.apply(this,args)
+        },delay)
+      }
+    }
+  }