uniapp瀑布流实现

1. 图片瀑布流：

不依赖任何插件，复制即可见效：

<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>

<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",
        ], //所有图片
        leftList: [], //左边列图片
        rightList: [], //右边列图片
        leftHeight: 0, //左边列高度
        rightHeight: 0, //右边列高度
        columnWidth: 0 //列宽度
      }
    },
    mounted() {
      this.$nextTick(() => {
        uni.createselectorQuery().in(this).select('.left').boundingClientRect(res => {
          this.columnWidth = res.width
          //方法
          this.setWaterFallLayout()
        }).exec()
      })
    },
    onReachBottom() {
      console.log("触底");
      let newList = [
        "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=833730514,666835&fm=253&fmt=auto&app=138&f=JPEG?w=355&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=3311811998,3185175032&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625",
        "https://img0.baidu.com/it/u=3319997766,4089593231&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
      ]
      this.imageList.push(...newList)
      console.log(this.imageList);
      this.setWaterFallLayout();
    },
    methods: {
      //通过uni.getImageInfo，小程序支持
      async setWaterFallLayout() {
        for (let item of this.imageList) {
          try {
            let h = await this.getImgHeight(item)
            if (this.leftHeight <= this.rightHeight) {
              this.leftList.push(item)
              this.leftHeight += h
            } else {
              this.rightList.push(item)
              this.rightHeight += h
            }
          } catch (e) {}
        }
      },
      getImgHeight(url) {
        return new Promise((resolve, reject) => {
          uni.getImageInfo({
            src: url,
            success: e => {
              resolve(e.height)

            },
            fail: e => {
              reject(e)
            }
          })
        })
      }
    }
  }
</script>

<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;
  }
  .info{
    width: 100%;
    height: 200rpx;
    background-color: #55aa7f;
  }
</style>

运行效果：
在这里插入图片描述

2. 商品瀑布流：

不依赖任何插件，复制即可见效：

<template>
  <view class="Index">
    <!-- 瀑布流布局列表 -->
    <view class="pubuBox">
      <view class="pubuItem">
        <view class="item-masonry" v-for="(item, index) in comList" :key="index">
          <image :src="item.img" mode="widthFix"></image>
          <view class="listtitle">
            <!-- 这是没有高度的父盒子（下半部分） -->
            <view class="listtitle1">{{ item.name }}</view>
            <view class="listtitle2">
              <text class="listtitle2son">￥</text>
              {{ item.commdityPrice }}
            </view>
            <view class="listtitle3">
              某某某某旗舰店
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        comList: [{
            img: "https://img2.baidu.com/it/u=3853345508,384760633&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=210689b7eb06d7c78958d7063151cba6",
            name: '商品的名称，可以很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
            commdityPrice: 100
          }, {
            img: 'https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=d6764859a9740bb4aead7703daa61876',
            name: '商品名称会在超出两行时候自动折叠',
            commdityPrice: 100
          },
          {
            img: 'https://img0.baidu.com/it/u=1604010673,2427861166&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=2e255208580c0570167a800344d3aa59',
            name: '只有一行标题时高度为39',
            commdityPrice: 100
          }, {
            img: 'https://img0.baidu.com/it/u=2627496060,1933351908&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=fd7a89ad586d338543b6916df7083e4f',
            name: '具体样式您可以自定义',
            commdityPrice: 100
          }, {
            img: 'https://img2.baidu.com/it/u=3853345508,384760633&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=210689b7eb06d7c78958d7063151cba6',
            name: 'vue的H5页面也是如此使用',
            commdityPrice: 100
          }
        ], //商品列表
      };
    },
    onShow() {},
    onLoad() {},
    methods: {},
    // 触底加载下一页 换成真实的请求到的数据
    onReachBottom() {
      console.log("触底");
      // 模拟的请求数据
      let newList = [
        {
          img: "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          name: '具体样式您可以自定义',
          commdityPrice: 100
        }, {
          img: "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
          name: '具体样式您可以自定义',
          commdityPrice: 100
        }, {
          img: "https://img1.baidu.com/it/u=833730514,666835&fm=253&fmt=auto&app=138&f=JPEG?w=355&h=500",
          name: '具体样式您可以自定义',
          commdityPrice: 100
        }, {
          img: "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
          name: '具体样式您可以自定义',
          commdityPrice: 100
        },
      ]
      this.comList.push(...newList)
      console.log(this.comList);
    },
  };
</script>

<style scoped="scoped" lang="scss">
  //瀑布流
  page {
    background-color: #eee;
    height: 100%;
  }
  .pubuBox {
    padding: 22rpx;
  }
  .pubuItem {
    column-count: 2;
    column-gap: 20rpx;
  }
  .item-masonry {
    box-sizing: border-box;
    border-radius: 15rpx;
    overflow: hidden;
    background-color: #fff;
    break-inside: avoid;
    /*避免在元素内部插入分页符*/
    box-sizing: border-box;
    margin-bottom: 20rpx;
    box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
  }
  .item-masonry image {
    width: 100%;
  }
  .listtitle {
    padding-left: 22rpx;
    font-size: 24rpx;
    padding-bottom: 22rpx;
    .listtitle1 {
      line-height: 39rpx;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      min-height: 39rpx;
      max-height: 78rpx;
    }
    .listtitle2 {
      color: #ff0000;
      font-size: 32rpx;
      line-height: 32rpx;
      font-weight: bold;
      padding-top: 22rpx;
      .listtitle2son {
        font-size: 32rpx;
      }
    }
    .listtitle3 {
      font-size: 28rpx;
      color: #909399;
      line-height: 32rpx;
      padding-top: 22rpx;
    }
  }
  .Index {
    width: 100%;
    height: 100%;
  }
</style>

运行效果：在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/358059.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

使用Spring AOP做接口权限校验和日志记录

使用Spring AOP做接口权限校验和日志记录

文章目录 一、AOP 介绍1.1 AOP 应用场景1.2 AOP 中的注解 二、权限校验2.1 定义权限注解2.2 定义切面类2.3 权限验证服务2.4 织入切点2.5 测试 三、日志记录3.1 日志切面类3.2 异常统一处理 四、AOP 底层原理4.1 todo 一、AOP 介绍 AOP&#xff1a; 翻译为面向切面编程&#x…
阅读更多...
PMO和项目经理向老板提涨薪的成功秘籍有哪些？

PMO和项目经理向老板提涨薪的成功秘籍有哪些？

一、PMO和项目经理向老板提涨薪的必备准备 作为PMO和项目经理&#xff0c;在向老板提涨薪之前&#xff0c;首先需要做好充分的准备。这不仅包括对自身工作的全面梳理&#xff0c;还需对公司目标、业务需求和市场环境有深刻的理解。了解公司目标意味着要清晰地了解公司对项目管…
阅读更多...
ADC模数转换器

ADC模数转换器

1. ADC模数转换器 ADC: 模数转换器 : 将模拟量转换为数字量 的 硬件设备 DAC: 数模转换器 : 将数字量转换为模拟量 1.1 工作原理 ADC: 工作原理 主要用于测量电压 1. 逐次逼近型CMOS: 结构一般 成本一般 转换一般 稳定性较低 即对精度要求不高,转换位数一般 成本低…
阅读更多...
西瓜书学习笔记——层次聚类（公式推导+举例应用）

西瓜书学习笔记——层次聚类（公式推导+举例应用）

文章目录 算法介绍实验分析 算法介绍 层次聚类是一种将数据集划分为层次结构的聚类方法。它主要有两种策略&#xff1a;自底向上和自顶向下。 其中AGNES算法是一种自底向上聚类算法&#xff0c;用于将数据集划分为层次结构的聚类。算法的基本思想是从每个数据点开始&#xff0…
阅读更多...
vue+elmentUI解决前端页面时间显示为一串数字

vue+elmentUI解决前端页面时间显示为一串数字

在该属性上添加注解 JsonFormat(pattern "yyyy-MM-dd HH:mm:ss") private Date createTime; 导入包 import com.fasterxml.jackson.annotation.JsonFormat; 效果
阅读更多...
Python tkinter (12) —— Treeview控件

Python tkinter (12) —— Treeview控件

本文主要是Python tkinter Treeview控件介绍及使用简单示例。 tkinter系列文章 python tkinter窗口简单实现 Python tkinter (1) —— Label标签 Python tkinter (2) —— Button标签 Python tkinter (3) —— Entry标签 Python tkinter (4) —— Text控件 Python tkinte…
阅读更多...
【Docker Registry】docker 镜像仓库实战

【Docker Registry】docker 镜像仓库实战

Docker Registry 镜像仓库 (Docker Registry) 负责存储、管理和分发镜像&#xff0c;并且提供了登录认证能力&#xff0c;建立了仓库的索引。 镜像仓库管理多个 Repository&#xff0c; Repository 通过命名来区分。每个 Repository 包含一个或多个镜像&#xff0c;镜像通过镜…
阅读更多...
如何使用Python+Flask搭建本地Web站点并结合内网穿透公网访问？

如何使用Python+Flask搭建本地Web站点并结合内网穿透公网访问？

文章目录 前言1. 安装部署Flask并制作SayHello问答界面2. 安装Cpolar内网穿透3. 配置Flask的问答界面公网访问地址4. 公网远程访问Flask的问答界面 前言 Flask是一个Python编写的Web微框架&#xff0c;让我们可以使用Python语言快速实现一个网站或Web服务&#xff0c;本期教程…
阅读更多...
【Docker】docker安装jenkins

【Docker】docker安装jenkins

一、执行命令 下载jenkins镜像 #下载jenkins 镜像 docker pull jenkins/jenkins:latest-jdk8 启动jenkins容器 #启动jenkins 容器 #挂载 如果不挂载 每次启动jenkins的配置、插件、用户等信息都没有了 #jenkins_home 包含jenkins配置、插件、用户等信息。 要指定必须配置用…
阅读更多...
【日志框架】

【日志框架】

日志打印 建议用{}占位而不是字符串拼接打日志前先判断日志级别是否可用&#xff1a; 先根据等级过滤规则再决定写不写&#xff1b;先往一个管道写了内容&#xff0c;但再经等级过滤丢弃&#xff0c;徒增开销。 日志框架 Slf4J Slf4J 不是底层日志框架&#xff0c;只是门面…
阅读更多...
STL_list

STL_list

一、有关list的介绍 list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指针指向其前一个元素和后一个元素。Ii…
阅读更多...
elasticsearch8.x版本docker部署说明和集成springboot

elasticsearch8.x版本docker部署说明和集成springboot

前提&#xff0c;当前部署没有涉及证书和https访问 1、环境说明,我采用三个节点&#xff0c;每个节点启动两个es&#xff0c;用端口区分 主机角色ip和端口服务器Amaster192.168.2.223:9200服务器Adata192.168.2.223:9201服务器Bdata,master192.168.2.224:9200服务器Bdata192.1…
阅读更多...
Nodejs基础5之网络基础概念的IP、端口，HTTP模块的创建HTTP服务、HTTP服务注意事项、浏览器查看HTTP报文

Nodejs基础5之网络基础概念的IP、端口，HTTP模块的创建HTTP服务、HTTP服务注意事项、浏览器查看HTTP报文

Nodejs基础 网络基础概念IPIP的介绍IP的作用IP的分类共享IP-公网家庭共享——局域网公网 本地回环IP地址总结 IP标准分类 端口端口举例端口介绍总结 HTTP模块创建HTTP服务HTTP服务注意事项浏览器查看HTTP报文查看请求报文查看请求体url当中的查询字符串查看响应报文 网络基础概…
阅读更多...
Qt开源版 vs 商业版 详细比较！！！！

Qt开源版 vs 商业版 详细比较！！！！

简单整理Qt开源版与商业版有哪些差别&#xff0c;仅供参考。 简单对比 开源版商业版许可证大部分采用对商业使用不友好的LGPLv3具备商业许可证保护代码专有许可证相关大部分模块使用LGPLv3和部分模块使用GPL组成仅第三方开源组件使用Qt的其他许可证Qt模块功能支持支持技术支持…
阅读更多...
Java把列表数据导出为PDF文件，同时加上PDF水印

Java把列表数据导出为PDF文件，同时加上PDF水印

一、实现效果 二、遇到的问题 实现导出PDF主体代码参考&#xff1a;Java纯代码实现导出PDF功能&#xff0c;下图是原作者实现的效果 导出报错Font STSong-Light with UniGB-UCS2-H is not recognized.。参考&#xff1a;itext 生成 PDF(五) 使用外部字体 网上都是说jar包的版本…
阅读更多...
翻译: GPT-4 Vision通过量身定制的推荐来增强应用的用户体验 升级Streamlit五

翻译: GPT-4 Vision通过量身定制的推荐来增强应用的用户体验 升级Streamlit五

GPT-4 Vision 系列: 翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式一翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式二翻译: GPT-4 Vision静态图表转换为动态数据可视化 升级Streamlit 三翻译: GPT-4 Vision从图像转换为完全可编辑的表格 升级St…
阅读更多...
SpringBoot使用OpenCV

SpringBoot使用OpenCV

SpringBoot使用OpenCV Spring boot 整合 OpenCV 4.5环境安装配置spring boot项目 OpenCV 训练自己的模型&#xff0c;实现特定物体的识别环境安装前期准备总结 Spring boot 整合 OpenCV 4.5 本文展示Windows下Spring Boot 整合Opencv 4.5 进行对图片中的人脸提取&#xff0c;开…
阅读更多...
防火墙到防火墙的高可用知识汇总

防火墙到防火墙的高可用知识汇总

目录​​​​​​​ 防火墙 防火墙的分类&#xff1a; 防火墙的发展史 传统防火墙&#xff08;包过滤防火墙&#xff09;—— 一个严格的规则表 传统防火墙&#xff08;应用代理防火墙&#xff09;—— 每个应用添加代理 传统防火墙&#xff08;状态检测防火墙&#xff09…
阅读更多...
责任链模式在java中的实现

责任链模式在java中的实现

1 总览 2 概念 避免请求发送者与接收者耦合在一起&#xff0c;让多个对象都有可能接收请求&#xff0c;将这些对象连接成一条链&#xff0c;并且沿着这条链传递请求&#xff0c;直到有对象处理它为止。职责链模式是一种对象行为型模式。 3 实现 公共部分&#xff0c;一个系…
阅读更多...
Windows、Linux、Mac数据库的安装（mysql、MongoDB、Redis）

Windows、Linux、Mac数据库的安装（mysql、MongoDB、Redis）

数据库的安装 作为数据存储的重要部分&#xff0c;数据库同样是必不可少的&#xff0c;数据库可以分为关系型数据库和非关系型数据库。 关系型数据库如 SQLite、MySQL、Oracle、SQL Server、DB2 等&#xff0c;其数据库是以表的形式存储&#xff1b;非关系型数据库如 MongoDB…
阅读更多...
最新文章

Copyright @ 2022~2023