• Vue3 瀑布流 动态加载图片，下拉无限滚动

    前置知识：

    javascript获取屏幕高度和宽度、监听屏幕大小改变
    https://blog.csdn.net/u014651560/article/details/107027414

    js监听页面或元素scroll事件，滚动到底部或顶部
    https://blog.csdn.net/mouday/article/details/125444003

    JavaScript中获取DOM元素宽度和高度的常用API
    https://juejin.cn/post/7011062379546935303

    js中的各种高度（宽度）
    https://juejin.cn/post/7017727173528125453

    js 获取元素距离顶部高度
    https://juejin.cn/s/js%20%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E8%B7%9D%E7%A6%BB%E9%A1%B6%E9%83%A8%E9%AB%98%E5%BA%A6

    实现参考

    waterfall瀑布流布局+动态渲染
    https://juejin.cn/post/6902733543530184717
    https://vuejs.org/guide/best-practices/performance.html
    瀑布流的虚拟列表
    https://juejin.cn/post/7002803053246185479
    瀑布流使用虚拟列表性能优化
    https://juejin.cn/post/6902733543530184717

    实现思路

    1、对元素进行按列区分
    2、对元素进行从上到下逐个填充，优先填充高度最短的那一列
    3、监听滚动事件，重新计算组件可见区域的高度，推算出需要填充多少才能铺满高度
    4、功能扩充，预先加载等同于多铺一些高度，动态变更列数等同于重新铺图

    关键变量获取：

     // 获取列表起始位置，用于计算列表在视窗内的位置
 let el = document.getElementById(uuid)
 let startTopOffset = el.offsetTop + el.offsetParent.offsetTop

 // 获取浏览器高度，用于计算可以显示的区域大小
 let viewHeight = document.documentElement.clientHeight

 // 添加可滚动的高度 - 当前滚动条滚动到哪里了
 let scrollOffset = document.documentElement.scrollTop
 
 // 当前组件顶部到可视区域结尾 需要填充的高度
 let comFillContentHeight = viewHeight - topOffset + scrollOffset;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    完整代码：

    <!-- 瀑布流 -->
<template>
    <div :id="uuid" style="width: 100%;">
        <!-- 瀑布流 -->
        <div class="box-wrapper-0">
            <div class="box-wrapper">
                <div class="box-col" v-for="col in waterFlowData">
                    <div class="box-item" v-for="(item, i) in  col">
                        <ImgShow :path="item.fullpath"></ImgShow>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>



<script setup>
import { ref, watch, computed, onMounted, reactive, defineAsyncComponent, toRaw } from 'vue'
import { FlushHistoryImages, HistoryGenImageInfoList } from '@/assets/GlobalStatus.js'
import api from './../assets/request_api'
import utils from '@/assets/utils.js'

const ImgShow = defineAsyncComponent({
    loader: () => import('../components/ImgShow.vue')

})

const props = defineProps(['max_count'])

let waterFlowData = ref([[{ fullpath: '' }]])
window.waterFlowData = waterFlowData

function onDownloadImg(url) {
    api.downloadImage(url, 'download');
}

function getElWidth(gap, colCount) {

    const el_width = (document.body.clientWidth - (colCount - 1) * gap) / colCount
    return el_width
}

let uuid = utils.uuid()
onMounted(() => {
    let loadState = false

    // 获取列表起始位置，用于计算列表在视窗内的位置
    let el = document.getElementById(uuid)
    let startTopOffset = el.offsetTop + el.offsetParent.offsetTop

    // 获取浏览器高度，用于计算可以显示的区域大小
    let viewHeight = document.documentElement.clientHeight

    // 添加可滚动的高度 - 当前滚动条滚动到哪里了
    let scrollOffset = document.documentElement.scrollTop

    let topOffset = 0;
    // 计算出当前组件可以显示的高度
    if (scrollOffset < startTopOffset) // 没有完全滚动到组件位置 可见区域要减去 startTopOffset
    {
        topOffset = startTopOffset - scrollOffset;
    } else {
        topOffset = 0;
    }

    // 可见区域大小
    let thatViewHeight = viewHeight - topOffset;
    // 当前组件顶部到可视区域结尾 需要填充的高度
    let comFillContentHeight = viewHeight - topOffset + scrollOffset;



    const gap = 15 // 缝隙的宽度

    const colCount = 4

    // let rowCount = (arrLen / colCount).toFixed(0)
    // let divSubCount = arrLen % colCount // 余数
    let idx = 0
    for (let c = 0; c < colCount; c++) {
        waterFlowData.value[c] = []
    }
    // 计算一个元素的宽度
    const elWidth = getElWidth(gap, colCount)

    const elHeights = [] // 每一列的高度
    for (let i = 0; i < colCount; i++) elHeights[i] = 0

    function getHeight(data, elWidth) { // 从图片数据中获取图片的高度信息，宽度信息
        let path = data.fullpath
        let t = path.substring(path.lastIndexOf('_') + 1, path.lastIndexOf('.')).split('x')
        let width = t[0]
        let height = t[1]

        // 由于元素会被缩放，所以实际高度也会缩放
        let elHeight = elWidth / width * height
        return elHeight
    }
    let arr = HistoryGenImageInfoList.value
    let arrLen = arr.length


    // 1、先填充第一排的元素
    function addToCol(colIdx, data) {
        let height = getHeight(data, elWidth);
        elHeights[colIdx] += height
        waterFlowData.value[colIdx].push(data)
    }

    function getLessHeightColIdx() {
        let t = 0;
        let tHeight = elHeights[0]
        for (let index = 0; index < colCount; index++) {
            if (elHeights[index] < tHeight) {
                t = index
                tHeight = elHeights[index]
            }
        }
        return { idx: t, height: tHeight }
    }

    function fillHeight(maxHeight) { // 一直填充到某个高度
        // 不断找最短的那一列进行添加 --- 直到填充完成
        for (; idx < arrLen; idx++) {
            let colIdx = getLessHeightColIdx()
            if (colIdx.height > maxHeight) break;
            console.log(colIdx.height);
            let data = arr[idx]
            addToCol(colIdx.idx, data)
        }
    }


    FlushHistoryImages(() => {
        arr = HistoryGenImageInfoList.value
        arrLen = arr.length

        for (let c = 0; c < colCount; c++) {
            if (idx >= arrLen) break;
            addToCol(c, arr[idx])
            idx++
        }

        loadState = true

        fillHeight(comFillContentHeight)
        // TODO 如何动态加载实现

        // 1、向下滚动时需要更新
        // 2、网页窗口变动时
        // 3、刷新网页时
        console.log('刷新, idx:' + idx + ' len:' + arrLen);
    })


    // 浏览器大小变更事件进行监听
    window.onresize = function () {
        viewHeight = document.documentElement.clientHeight;
        thatViewHeight = viewHeight - topOffset;
        comFillContentHeight = viewHeight - topOffset + scrollOffset;
        if (!loadState) return
        fillHeight(comFillContentHeight)
    }
    window.addEventListener('scroll', () => {
        scrollOffset = document.documentElement.scrollTop
        // 计算出当前组件可以显示的高度
        if (scrollOffset < startTopOffset) // 没有完全滚动到组件位置 可见区域要减去 startTopOffset
        {
            topOffset = startTopOffset - scrollOffset;
        } else {
            topOffset = 0;
        }
        // 可见区域大小
        thatViewHeight = viewHeight - topOffset;
        comFillContentHeight = viewHeight - topOffset + scrollOffset;

        if (!loadState) return
        fillHeight(comFillContentHeight)
    });

})


function log(obj) {
    if (!obj) {
        console.log(obj);
        return
    }
    console.log(obj);
    console.log(toRaw(obj).fullpath);
}

</script>






<style>
/* 瀑布流布局 */
.box-wrapper-0 {
    width: 100%;
}

.box-wrapper {
    width: 100%;
    gap: 15px;
    display: flex;
    box-sizing: border-box;
}

.box-col {
    width: 25%;
    gap: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.box-item>div {
    /* min-height: 110px; */
}

.box-col img {
    border-radius: 1rem;

    cursor: pointer;
    width: 100%;
    position: relative;
}
</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
  • 相关阅读:
    Java AOP篇
    如何使用Etherscan Remix插件验证智能合约
    Java之面向对象中
    云IDE产品评测感受
    剑指 Offer 47. 礼物的最大价值 （百度一面 算法题）
    MYSQL——二、理论基础
    【kubernetes】使用luakube访问kubernetes api
    std::c++ 中格式化任意字符串
    大模型的东风中，看雄安的数字飞翔
    计算机网络——常见问题汇总2
  • 原文地址：https://blog.csdn.net/qq_41709801/article/details/132873166