分享一个Vue实现图片水平瀑布流的插件( 二 ) _生活百科

这里要给大家提个醒，在当插件使用的时候，我们需要用this.$nextTick()来进行页面初始化，因为方法成功的前提是要等页面初始化加载完毕后才能进行获取和计算总体插件代码为：<template><div class="tab-container" id="tabContainer"><div class="tab-item" v-for="(item, index) in pbList" :key="index"><img :src="https://www.huyubaike.com/biancheng/item.url" /></div></div></template><script>export default {name:'compList',props:{pbList:{type:Array,default:()=>{return []}}},data() {return {};},mounted() {this.$nextTick(()=>{this.waterFall("#tabContainer", ".tab-item"); //实现瀑布流})},methods: {waterFall(wrapIdName,contentIdName,columns = 5,columnGap = 20,rowGap = 20) {// 获得内容可用宽度（去除滚动条宽度）const wrapContentWidth =document.querySelector(wrapIdName).offsetWidth;// 间隔空白区域const whiteArea = (columns - 1) * columnGap;// 得到每列宽度(也即每项内容宽度)const contentWidth = parseInt((wrapContentWidth - whiteArea) / columns);// 得到内容项集合const contentList = document.querySelectorAll(contentIdName);// 成行内容项高度集合const lineConentHeightList = [];for (let i = 0; i < contentList.length; i++) {// 动态设置内容项宽度contentList[i].style.width = contentWidth + "px";// 获取内容项高度const height = contentList[i].clientHeight;if (i < columns) {// 第一行按序布局contentList[i].style.top = "0px";contentList[i].style.left = contentWidth * i + columnGap * i + "px";// 将行高push到数组lineConentHeightList.push(height);} else {// 其他行// 获取数组最小的高度和对应索引let minHeight = Math.min(...lineConentHeightList);let index = lineConentHeightList.findIndex((listH) => listH === minHeight);contentList[i].style.top = minHeight + rowGap +"px";contentList[i].style.left = (contentWidth + columnGap) * index + "px";// 修改最小列的高度最小列的高度 = 当前自己的高度 + 拼接过来的高度 + 行间距lineConentHeightList[index] += height + rowGap;}}},},};</script><style scoped>* {margin: 0;padding: 0;}/* 最外层大盒子 */.tab-container {padding-top: 20px;position: relative;}/* 每个小盒子 */.tab-container .tab-item {position: absolute;height: auto;border: 1px solid #ccc;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);background: white;/* 元素不能中断显示 */break-inside: avoid;text-align: center;}.tab-container .tab-item img {width: 100%;height: auto;display: block;}</style>五.外层使用和懒加载在使用这个插件的时候，有两个问题，就是因为内层是position: absolute;定位，不会撑开外部的div，会导致外层盒模型不好布局，还有就是页面下拉懒加载，那要怎么办呢？这里我给出我的处理方法【分享一个Vue实现图片水平瀑布流的插件】

文章插图
整体代码如下：<template><div><div class="list-box" @scroll="scrollFun"><compList :pbList="pbList" ref="compList"></compList></div></div></template><script>import compList from "@/pages/test/components/compList";export default {name:'testList',components:{compList},data() {return {//瀑布流数据pbList: [{url: "https://gimg2.baidu.com/image_search/src=https://www.huyubaike.com/biancheng/http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fm%2Fpublic%2Fp2650049201.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664935370&t=d4bf3e4d352c277a1bdebfcc8fda959f",},{url: "https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641",},{url: "https://gimg2.baidu.com/image_search/src=https://www.huyubaike.com/biancheng/http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fm%2Fpublic%2Fp2650049201.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664935370&t=d4bf3e4d352c277a1bdebfcc8fda959f",},{url: "https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641",},{url: "https://gimg2.baidu.com/image_search/src=https://www.huyubaike.com/biancheng/http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fm%2Fpublic%2Fp2650049201.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664935370&t=d4bf3e4d352c277a1bdebfcc8fda959f",},{url: "https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641",},{url: "https://gimg2.baidu.com/image_search/src=https://www.huyubaike.com/biancheng/http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fm%2Fpublic%2Fp2650049201.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664935370&t=d4bf3e4d352c277a1bdebfcc8fda959f",},{url: "https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641",},{url: "https://gimg2.baidu.com/image_search/src=https://www.huyubaike.com/biancheng/http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fm%2Fpublic%2Fp2650049201.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664935370&t=d4bf3e4d352c277a1bdebfcc8fda959f",},{url: "https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641",},{url: "https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641",}],addList:[{url: "https://gimg2.baidu.com/image_search/src=https://www.huyubaike.com/biancheng/http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fm%2Fpublic%2Fp2650049201.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664935370&t=d4bf3e4d352c277a1bdebfcc8fda959f",},{url: "https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641",},{url: "https://gimg2.baidu.com/image_search/src=https://www.huyubaike.com/biancheng/http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fm%2Fpublic%2Fp2650049201.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664935370&t=d4bf3e4d352c277a1bdebfcc8fda959f",},{url: "https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641",},{url: "https://gimg2.baidu.com/image_search/src=https://www.huyubaike.com/biancheng/http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fm%2Fpublic%2Fp2650049201.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664935370&t=d4bf3e4d352c277a1bdebfcc8fda959f",},{url: "https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641",},{url: "https://gimg2.baidu.com/image_search/src=https://www.huyubaike.com/biancheng/http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fm%2Fpublic%2Fp2650049201.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664935370&t=d4bf3e4d352c277a1bdebfcc8fda959f",},{url: "https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641",},{url: "https://gimg2.baidu.com/image_search/src=https://www.huyubaike.com/biancheng/http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fm%2Fpublic%2Fp2650049201.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664935370&t=d4bf3e4d352c277a1bdebfcc8fda959f",},{url: "https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641",},{url: "https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641",}],bottomMain:true};},methods:{scrollFun(e) {constoffsetHeight= e.target.offsetHeightconstscrollHeight= e.target.scrollHeightconstscrollTop= e.target.scrollTopif((scrollHeight - (offsetHeight+scrollTop)) < 10){if(this.bottomMain){this.bottomMain = falsethis.addListDataFun()}}},addListDataFun(){this.$Spin.show({render: (h) => {return h('div', [h('Icon', {'class': 'demo-spin-icon-load',props: {type: 'ios-loading',size: 18}}),h('div', '数据更新中...')])}});setTimeout(() => {this.pbList = this.pbList.concat(this.addList)this.bottomMain = truethis.$nextTick(()=>{this.$refs.compList.waterFall("#tabContainer", ".tab-item")this.$Spin.hide()})},1000)}}};</script><style scoped>.list-box{position: relative;width: 100%;height: calc(100vh - 240px);background: white;padding: 20px 30px 20px 20px;margin-top: 20px;box-sizing: border-box;overflow: auto;}</style>

分享一个Vue实现图片水平瀑布流的插件( 二 )

推荐阅读

蛋白质粉里含雌激素吗？蛋白质粉中会含有雌激素吗

南京有红宝石蛋糕店吗，红宝石蛋糕店

常见的美系车品牌有哪些美国汽车品牌排行榜前十名

一带一路什么意思一带一路是指什么

2022呼和浩特疫情期间地铁进站乘车最新要求

身体突然长胖是因为缺乏什么因素吗？

传奇三新手必看攻略传奇3地图新手怎么样玩

这些生肖最喜欢送对方定情信物？

裤子掉档是什么意思啊裤子掉档的怎么处理

孩子有了个假想中的朋友，家长速度反思是否平时忽略了孩子？

迢迢牵牛星中脉脉的意思

哈弗m6车身颜色有几种哈弗M6有哪几种颜色

亚历山大大帝东征最远到达了哪里

有没有哪些相亲渠道免费且靠谱？

黑衣人迅雷黑衣人迅雷mp4下载

分享29个营销理论什么是色彩营销？

女人排毒吃什么最好女生吃什么排毒

灵芝红枣水的功效灵芝红枣水的正确煮法

吉利博越m挡什么时候用吉利博越M挡有什么用

分享华为手机换电池步骤华为智能手机怎么换电池教程