文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue+uniapp瀑布流布局怎么实现

2023-07-05 15:10

关注

这篇“vue+uniapp瀑布流布局怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue+uniapp瀑布流布局怎么实现”文章吧。

一、实现原理

通过动态计算哪一列高度最低,就把图片放置该列下显示,直至所有图片分列完毕

计算哪一列高度最低具体实现过程又分2种方式:

方式1:通过计算每一列每张图片渲染后高度进行累加就是该列的高度,记录每列累加高度比较大小

方式2:直接通过图片父级元素高度(列div)来判断哪一列最低

区别:方式1无需等待图片真实渲染完成在比较高度,方式2需要等待图片真实渲染完成在获取高度

二、代码实现

以左右2列为例

<template>  <div class="page">    <!-- 左图片列表 -->    <div class="left" ref="left">      <img        class="img"        v-for="(item, index) in leftList"        :key="index"        :src="item"      />    </div>    <!-- 右图片列表 -->    <div class="right" ref="right">      <img        class="img"        v-for="(item, index) in rightList"        :key="index"        :src="item"      />    </div>  </div></template>
<style scoped>.page {  width: 100%;  display: flex;  align-items: flex-start;  padding: 0 1%;  box-sizing: border-box;}.left,.right {  margin: 0 auto;  width: 48%;}.img {  width: 100%;  height: auto;  margin-bottom: 10px;}</style>

方式1(图片高度累加比较法)

<script>export default {  data() {    return {      imgList: [        "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",        "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",        "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",        "https://img1.baidu.com/it/u=3866290852,3566512524&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",        "https://img2.baidu.com/it/u=1114729443,1120710416&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",        "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",        "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",        "https://img2.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",      ], //所有图片      leftList: [], //左边列图片      rightList: [], //右边列图片      leftHeight: 0, //左边列高度      rightHeight: 0, //右边列高度      columnWidth: 0, //列宽度    };  },  mounted() {    this.$nextTick(() => {      this.columnWidth = this.$refs.left.clientWidth;      this.setWaterFallLayout();    });  },  methods: {    //方法1    async setWaterFallLayout() {      for (let item of this.imgList) {        let img = new Image();        img.src = item;        try{          let h = await this.getImgHeight(img);//图片渲染后高度          if (this.leftHeight <= this.rightHeight) {//左边列比右边低,图片放入左边            this.leftList.push(item);            this.leftHeight += h;          } else {//否则,图片放入右边            this.rightList.push(item);            this.rightHeight += h;          }        }catch(e){          console.log(e)        }      }    },    //获取图片高度    getImgHeight(img) {      return new Promise((resolve,reject) => {      //图片加载完成        img.onload = () => {          let h = (img.height / img.width) * this.columnWidth;//计算图片渲染后高度          resolve(h);        };        //加载出错        img.onerror=()=>{          reject('error')        }      });    },  },};</script>

方式2(父元素高度比较法)

每次放入图片需要等待渲染后再重新计算父元素高度,关键代码 await this.$nextTick()

<script>export default {  data() {    return {      imgList: [        "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",        "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",        "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",        "https://img1.baidu.com/it/u=3866290852,3566512524&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",        "https://img2.baidu.com/it/u=1114729443,1120710416&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",        "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",        "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",        "https://img2.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",      ], //所有图片      leftList: [], //左边列表图片      rightList: [], //右边列表图片    };  },  mounted() {    this.$nextTick(() => {      this.setWaterFallLayout2();    });  },  methods: {    //方法2    async setWaterFallLayout2() {      for (let item of this.imgList) {        if (this.$refs.left.clientHeight <= this.$refs.right.clientHeight) {//左边列比右边低,图片放入左边          this.leftList.push(item);        } else {//否则图片放入右边          this.rightList.push(item);        }        await this.$nextTick();//等待渲染完成后重新比较左右高度      }    },  },};</script>

三.uniapp实现

由于uniapp获取元素高度和vue有所区别,造成实现瀑布流方式也需要调整。我们知道uniapp不能通过this.$ref.xx.clientHeight获取元素高度,而需要通过uni.createSelectorQuery().in(this).select(&lsquo;.xxxx&rsquo;).boundingClientRect().exec()来获取,且经过实测当图片动态加入列后通过该api计算出父元素真实高度是不准确的,所以uniapp瀑布流布局实现方式只能通过方法1(也即图片高度累加法)进行实现,除了上面方法1通过img.onload来获取图片高度外,uniapp还提供uni.getImageInfo方法来更方便获取图片高度。

代码实现

<template><view class="page"><view class="left" ref="left"><image class="image" v-for="(item,i) in leftList" :key="i" :src="item" mode="widthFix"></image></view><view class="right" ref="right"><image class="image" v-for="(item,i) in rightList" :key="i" :src="item" mode="widthFix"></image></view></view></template>
<style lang="scss">.page {width: 100%;display: flex;align-items: flex-start;padding: 0 1%;box-sizing: border-box;}.left,.right {margin: 0 auto;width: 48%;}.image {width: 100%;height: auto;margin-bottom: 10px;}</style>
<script>export default {data() {return {imageList: ["https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082","https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500","https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500","https://img1.baidu.com/it/u=3866290852,3566512524&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500","https://img2.baidu.com/it/u=1114729443,1120710416&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500","https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082","https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500","https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",], //所有图片leftList: [], //左边列图片rightList: [], //右边列图片leftHeight: 0, //左边列高度rightHeight: 0, //右边列高度columnWidth: 0 //列宽度}},mounted() {this.$nextTick(() => {uni.createSelectorQuery().in(this).select('.left').boundingClientRect(res => {this.columnWidth = res.width//方法1this.setWaterFallLayout()//方法2// this.setWaterFallLayout2()}).exec()})},methods: {//方法1通过img.onloadasync setWaterFallLayout() {for (let item of this.imageList) {let img = new Image()img.src = itemtry {let h = await this.getImgHeight(img)if (this.leftHeight <= this.rightHeight) {this.leftList.push(item)this.leftHeight += h} else {this.rightList.push(item)this.rightHeight += h}} catch (e) {console.log(e)}}},//获取图片高度getImgHeight(img) {return new Promise((resolve, reject) => {img.onload = () => {let h = img.height / img.width * this.columnWidthresolve(h)}//加载出错img.onerror = () => {reject('error')}})},//方法2通过uni.getImageInfoasync setWaterFallLayout2() {for (let item of this.imageList) {uni.getImageInfo({src: item,success: e => {if (this.leftHeight <= this.rightHeight) {this.leftList.push(item)this.leftHeight += e.height} else {this.rightList.push(item)this.rightHeight += e.height}}})}}},}</script>

四、多列实现

多列实现和2列一样,动态生成每列图片数据和记录每列高度

代码实现

以最简单的父元素高度比较法(方式2)为例实现,图片高度累加比较法(方式1)自行类比实现

<template>  <div class="page">    <div      class="column"      ref="column"      v-for="(item, index) in columnList"      :key="index"    >      <img class="img" v-for="(n, i) in item" :key="i" :src="n" />    </div>  </div></template>
<style scoped>.page {  width: 100%;  display: flex;  align-items: flex-start;  padding: 0 1%;  box-sizing: border-box;}.column {  flex: 1;  padding: 0 10px;  box-sizing: border-box;  width: 0;}.img {  width: 100%;  height: auto;  margin-bottom: 10px;}</style>
<script>export default {  data() {    return {      imgList: [        "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082","https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500","https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500","https://img1.baidu.com/it/u=3866290852,3566512524&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500","https://img2.baidu.com/it/u=1114729443,1120710416&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500","https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082","https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500","https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500","https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082","https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",      ], //所有图片      columnList: [], //分配后的每列图片      columWidth: 0, //每列宽度      columnCount: 5, //显示几列    };  },  created() {    //初始化数据    for (let i = 0; i < this.columnCount; i++) {      this.columnList.push([]);//生成每列图片数组    }  },  mounted() {    this.$nextTick(()=>{      this.setWaterFallLayout();    })  },  methods: {   //瀑布布局    async setWaterFallLayout() {      for (let item of this.imgList) {        let columnHeight = this.$refs.column.map((item) => item.clientHeight); //每列高度数组        let min = Math.min(...columnHeight); //找出最小高度值        let index = columnHeight.findIndex((item) => item === min); //找出最小高度列的索引        this.columnList[index].push(item);//放入图片        await this.$nextTick(); //等待渲染完成后重新比较高度      }    },  },};</script>

以上就是关于“vue+uniapp瀑布流布局怎么实现”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯