uniapp瀑布流实现

news2024/11/17 14:18:14

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>

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ASP.NET Core 过滤器 使用依赖项注入

ASP.NET Core 过滤器 使用依赖项注入

过滤器是 ASP.NET Core 中的特殊组件&#xff0c;允许我们在请求管道的特定阶段控制请求的执行。这些过滤器在中间件执行后以及 MVC 中间件匹配路由并调用特定操作时发挥作用。 简而言之&#xff0c;过滤器提供了一种在操作级别自定义应用程序行为的方法。它们就像检查点&#…
阅读更多...
Idea设置代理后无法clone git项目

Idea设置代理后无法clone git项目

背景 对于我们程序员来说&#xff0c;经常上github找项目、找资料是必不可少的&#xff0c;但是一些原因&#xff0c;我们访问的时候速度特别的慢&#xff0c;需要有个代理&#xff0c;才能正常的访问。 今天碰到个问题&#xff0c;使用idea工具 clone项目&#xff0c;速度特…
阅读更多...
三、防御保护---防火墙安全策略篇

三、防御保护---防火墙安全策略篇

三、防御保护---防火墙安全策略篇 一、什么是安全策略二、安全策略的组成1.匹配条件2.动作3.策略标识 三、防火墙的状态检测和会话表1.会话表2.状态检测技术 四、ASPF--隐形通道五、用户认证1.用户认证的分类2.认证方式3.认证策略4.认证域 一、什么是安全策略 传统的包过滤防火…
阅读更多...
计算机毕业设计 基于SpringBoot的车辆违章信息管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

计算机毕业设计 基于SpringBoot的车辆违章信息管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…
阅读更多...
Android 中的动态应用程序图标

Android 中的动态应用程序图标

Android 中的动态应用程序图标 一、需求二、解决方案三、方案实现四、结论 一、需求 您可能遇到过那些可以实现巧妙技巧的应用程序 - 更改应用程序图标&#xff08;也许是在您的生日那天&#xff09;&#xff0c;然后无缝切换回常规图标。这种功能会激起你的好奇心&#xff0c…
阅读更多...
websocket 通信协议

websocket 通信协议

websocket是什么 答: 它是一种网络通信协议&#xff0c;是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 意思就是服务器可以主动向客户端推送信息&#xff0c;客户端也可以主动向服务器发送信息 属于服务器推送技术的一种. 为什么需要websocket? 疑问?…
阅读更多...
Java 面试题之 IO（一）

Java 面试题之 IO（一）

字节流 文章目录 字节流InputStream&#xff08;字节输入流&#xff09;OutputStream&#xff08;字节输出流&#xff09; 文章来自Java Guide 用于学习如有侵权&#xff0c;立即删除 InputStream&#xff08;字节输入流&#xff09; InputStream用于从源头&#xff08;通常是…
阅读更多...
【command】使用nr简化npm run命令

【command】使用nr简化npm run命令

参考文章 添加 alias nrnpm run通过alias启动命令可以帮助我们节省运行项目输入命令的时间 $ cd ~ $ vim .bash_profile $ source ~/.bashrc
阅读更多...
【51单片机Keil+Proteus8.9】门锁控制电路

【51单片机Keil+Proteus8.9】门锁控制电路

门锁控制电路 二、设计思路 电路设计 1.电源部分&#xff1a;使用BATTERY为整个电路提供电源&#xff0c;可以在电路中加入一个电 源开关&#xff0c;以便控制电源的开启和关闭。 2.处理器部分&#xff1a;使用AT89C51芯片作为主处理器&#xff0c;通过编写程序实现门锁的 …
阅读更多...
【Java IO 源码详解】: InputStream

【Java IO 源码详解】: InputStream

本文主要从JDK 11 源码角度分析InputStream。 Java IO - 源码: InputStream InputStream 类实现关系InputStream 抽象类源码实现InputStreamFilterInputStreamByteArrayInputStreamBufferedInputStream 参考文章 InputStream 类实现关系 InputStream是输入字节流&#xff0c;具…
阅读更多...
来聊聊大厂面试题：求Java对象的大小

来聊聊大厂面试题：求Java对象的大小

写在文章开头 日常使用Java进行业务开发时&#xff0c;我们基本不关心一个Java对象的大小&#xff0c;所以经常因为错误的估算导致大量的内存空间在无形之间被浪费了&#xff0c;所以今天笔者就基于这篇文章来聊聊一个Java对象的大小。 你好&#xff0c;我叫sharkchili&#x…
阅读更多...
网络体系结构 和网络原理之UDP和TCP

网络体系结构 和网络原理之UDP和TCP

目录 网络分层 一. 应用层 http协议 二. 传输层 1. 介绍 2.UDP协议 (1)组成 (2)细节 3.TCP协议 (1)特性如下链接&#xff1a; (2)组成 (3)特点 三. 网络层 四. 数据链路层 1.介绍 2.以太网协议 3.mac地址和ip地址 五. 物理层 DNS 网络分层 一. 应用层 应用程序 现成的…
阅读更多...
【深度优先搜索】【组合数学】【动态规划】1467.两个盒子中球的颜色数相同的概率

【深度优先搜索】【组合数学】【动态规划】1467.两个盒子中球的颜色数相同的概率

作者推荐 【动态规划】【字符串】【行程码】1531. 压缩字符串 本文涉及知识点 动态规划汇总 深度优先搜索 组合数学 LeetCode1467 两个盒子中球的颜色数相同的概率 桌面上有 2n 个颜色不完全相同的球&#xff0c;球上的颜色共有 k 种。给你一个大小为 k 的整数数组 balls …
阅读更多...
数据写入HBase（scala）

数据写入HBase（scala）

package sourceimport org.apache.hadoop.hbase.{HBaseConfiguration, TableName} import org.apache.hadoop.hbase.client.{ConnectionFactory, Put} import org.apache.hadoop.hbase.util.Bytesobject ffff {def main(args: Array[String]): Unit {//hbase连接配置val conf …
阅读更多...
c++连接mysql

c++连接mysql

c连接mysql 安装mysql以及c对应的库进入数据库&#xff0c;创建数据库&#xff0c;表&#xff0c;并新建管理员用户编写c代码编译运行&#xff0c;测试结果头文件解释 安装mysql以及c对应的库 sudo apt-get update sudo apt-get install mysql-server sudo apt-get install li…
阅读更多...
2023年算法CDO-CNN-BiLSTM-ATTENTION回归预测（matlab）

2023年算法CDO-CNN-BiLSTM-ATTENTION回归预测（matlab）

2023年算法CDO-CNN-BiLSTM-ATTENTION回归预测&#xff08;matlab&#xff09; CDO-CNN-BiLSTM-Attention切诺贝利灾难优化器优化卷积-长短期记忆神经网络结合注意力机制的数据回归预测 Matlab语言。 切诺贝利灾难优化器Chernobyl Disaster Optimizer (CDO)是H. Shehadeh于202…
阅读更多...
新书推荐——《趣读数字经济》

新书推荐——《趣读数字经济》

文章目录 缘起:“躺嬴”的一天/ 001 第1章 名花解语,石心铁肠&#xff0c;当属“人工智能”/ 009 1.1 自学成才的人工智能/ 011 1.2 狂飙的话病ChatGPT / 017 1.3 算力、算法与数据:人工智能的核心/ 026 1.4 人工智能会抢走我们的饭碗吗/032 1.5 人工智能有多能/ 036 1.6 AI…
阅读更多...
地址解析工具---AddressParseUtil

地址解析工具---AddressParseUtil

一、工具源码 package com.rural_vibration.common.utils;import java.util.Iterator; import java.util.LinkedHashMap; import java.util.Map; import java.util.Set; import java.util.regex.Matcher; import java.util.regex.Pattern;/*** description: 地址解析工具 <…
阅读更多...
FTP服务之WindowsServer2019中搭建私有FTP服务器

FTP服务之WindowsServer2019中搭建私有FTP服务器

WindowsServer2019搭建FTP服务器 文章目录 WindowsServer2019搭建FTP服务器1. 查看FTP服务是否开启2. 配置FTP服务站点3. 访问 1. 查看FTP服务是否开启 WindowsServer2019默认是开启FTP服务的&#xff0c;如果未开启&#xff0c;则按下面步骤开启即可 打开服务器管理 添加角色和…
阅读更多...
java OA办公自动化系统

java OA办公自动化系统

java OA办公自动化系统&#xff0c;java项目&#xff0c;springboot项目。eclipse和idea都能打开运行。 前端技术&#xff1a;Bootstrap&#xff0c;Jquery&#xff0c;My97 DatePicker&#xff0c;kindeditor&#xff0c;freemarker 后端技术&#xff1a;SpringBoot&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023