uniapp实现瀑布流

首先我们要先了解什么是瀑布流:

瀑布流(Waterfall Flow)是一种常见的网页布局方式,也被称为瀑布式布局或砌砖式布局。它通常用于展示图片、博客文章、商品等多个不同大小和高度的元素。

瀑布流布局的特点是每个元素按照从上到下、从左到右的顺序排列,并且元素的宽度固定,高度可以不同。当元素的高度不同时,下一个元素会自动填充前面较短的列,从而形成类似瀑布流的效果。

瀑布流布局的优点在于能够更好地利用页面空间,使页面看起来更加丰富和动态。它适合展示大量的图片或内容,可以吸引用户的注意力,提升用户体验。

实现瀑布流布局的关键在于使用 CSS 的 Grid 布局或 Flex 布局来控制元素的排列和位置,并结合 JavaScript 来获取数据并动态渲染页面。在瀑布流布局中,通常需要计算元素的位置和大小,以及在加载更多数据时自动调整布局。

瀑布流布局在实际应用中非常广泛,特别是在图片展示、社交媒体平台、电子商务网站等领域。它能够呈现出独特的视觉效果和良好的用户体验,为用户提供更加丰富多样的内容展示方式。

那么怎么使用uniapp实现呢?

首先处理数据

由于我是将数据分为左右两部分渲染,所以要先处理数据;

const res = await Shop();console.log(res);const halfRight = Math.ceil(res.length / 2);this.leftList = res.slice(0, halfRight);const halfLength = Math.ceil(res.length / 2);this.rightList = res.slice(halfLength);

然后将数据渲染到页面上

这里需要注意一下;由于瀑布流是不需要图片高度的;要让它自适应,所以要给image标签加上mode属性

<view class="list"><view class="shop_list" v-for="(item,index) in leftList" :key="index" @click="product(item)"><image :src="https + item.img" mode="widthFix"></image><view class="shop_name">{{item.name}}</view><view class="shop_introdu">{{item.introdu}}</view></view></view><view class="list"><view class="shop_list" v-for="(item,index) in rightList" :key="index" @click="product(item)"><image :src="https + item.img" mode="widthFix"></image><view class="shop_name">{{item.name}}</view><view class="shop_introdu">{{item.introdu}}</view></view></view>

最后就是调整样式

.index_shop {width: 100%;height: auto;display: flex;justify-content: space-between;flex-wrap: wrap;}.list{width: 50%;display: flex;justify-content: center;flex-wrap: wrap;}.shop_list {width: 90%;height: auto;padding: 5px;margin: 0 auto;margin-top: 10px;background-color: #ffffff;border-radius: 5px;display: flex;flex-direction: column;align-items: flex-start;}.shop_list image {width: 100%;height: auto;border-radius: 5px;}

然后看看效果;

希望对你有所帮助;如有需要酌情修改

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

EtherNet/IP转profienrt协议网关连接EtherNet/IP协议的川崎机器人配置方法

EthernetIP 协议一般用于采集机器人&#xff0c;控制器等设备的数据。 下面介绍通过远创智控YC-EIPM-PN网关把EtherNet/IP协议的川崎机器人通过西门子1500PLC的控制方法。有些 EIP 的从站设备提供了 EDS 文件&#xff0c;可以从EDS 文件中获取点位信息。这些信息是需要填写到网…

多个相同地址的I2C设备,如何挂载在同一条总线上

前言 &#xff08;1&#xff09;如果有嵌入式企业需要招聘湖南区域日常实习生&#xff0c;任何区域的暑假Linux驱动实习岗位&#xff0c;可C站直接私聊&#xff0c;或者邮件&#xff1a;zhangyixu02gmail.com&#xff0c;此消息至2025年1月1日前均有效 &#xff08;2&#xff0…

python爬虫selenium和ddddocr使用

python爬虫selenium和ddddocr使用 selenium使用 selenium实际上是web自动化测试工具&#xff0c;能够通过代码完全模拟人使用浏览器自动访问目标站点并操作来进行web测试。 通过pythonselenium结合来实现爬虫十分巧妙。 由于是模拟人的点击来操作&#xff0c;所以实际上被反…

JVM调优(10)JVM的运行时数据区

一、概述 对于 C C 来说&#xff0c;在内存管理领域&#xff0c;JVM既拥有最高的权利&#xff0c;但是同时他们又是从事最基础工作的劳动人员&#xff0c;因为他们担负着每一个对象从开始到结束的维护责任。而对于Java来说&#xff0c;再虚拟机自动内存管理的帮助下&#xff0…

windows 设置nginx、redis、jar包开机自启、mysql自动备份

1、--------------设置nginx------------------- cd到nginx 根目录与nginx.exe平齐 1.1下载WinSW.NET4.exe 放入nginx.exe平齐目录命名为nginx-servier.exe 链接: https://pan.baidu.com/s/1obKTinD1Z9BKgMJxZMtk2Q?pwdg47u 提取码: g47u 复制这段内容后打开百度网盘手机App…

玩转ChatGPT:批量下载Alphafold的蛋白pdb文件

一、写在前面 突发奇想&#xff0c;想批量下载Alphafold网站的蛋白pdb文件&#xff0c;后续再做个分子对接用。又不想手动下载&#xff0c;来求助CSDN和GPT。 二、CSDN白嫖基础代码 CSDN大神多&#xff0c;这不&#xff0c;找到一个&#xff1a;Alphafold批量下载蛋白的pdb文…

2318.不同骰子序列的数目

经典的DP题目&#xff0c;求方案数 从序列中最后一个数字往前考虑 当前状态取决于前一个的状态和再前一个的状态所以dp&#xff08;n&#xff0c;last&#xff0c;last1&#xff09;为当前考虑的是第n个并且前一个数字是last 再前一个数字是last1的所有方案数&#xff0c;递归的…

一个基于Excel模板快速生成Excel文档的小工具

介绍 DocumentGenerator是一个Excel快速生成工具&#xff0c;目标以后还能实现Word、pdf等的文件的生成。该程序独立运行&#xff0c;可通过HTTP接口调用其生成接口。 典型使用场景为如下&#xff1a; 使用者编写模板文件使用者准备模板文件的填充JSON数据内容使用者通过网络…

Web入门笔记

Web入门笔记 HTTP协议 超文本传输协议 规定了浏览器和服务器之间数据传输的规则&#xff0c;请问数据和响应数据的格式 基于TCP请求-响应模式一次请求对应一次响应无状态的协议 请问数据格式 浏览器版本&#xff1a;解决浏览器兼容问题。GET请求体&#xff1a;存放请求参数…

汇编运算符和表达式

运算符&#xff1a; 汇编语言由表达式和运算符组成&#xff0c;运算符分为数值运算符和属性运算符。属性运算符面向变量或标号。 数值运算符&#xff1a; 算术运算符&#xff1a; 运算符类型 ✓ ( 正号 ) 、 -( 负号 ) ✓ ( 加 ) 、 -( 减 ) 、 *( 乘 ) 、 /( 除 ) 、 MO…

如何配置微信小程序id

使用uni-app开发微信小程序项目&#xff0c;配置好微信小程序id是必不可少的。 一、如何找微信小程序id 二、如何配置微信小程序id

二叉树的概念

文章目录 二叉树一、树的概念1.树形结构1.1. 树的特点&#xff1a;1.2 概念&#xff1a;1.3 树的表示形式 2.树的应用 二、二叉树1.二叉数的概念2.满二叉树3.完全二叉树4.二叉树的性质练习&#xff1a; 二叉树 一、树的概念 1.树形结构 1.1. 树的特点&#xff1a; 1.根节点没…

二进制搭建 Kubernetes+部署网络组件+部署CornDNS+负载均衡部署+部署Dashboard

二进制搭建 Kubernetes v1.20 k8s集群master01&#xff1a;20.0.0.50 kube-apiserver kube-controller-manager kube-scheduler etcd k8s集群master02&#xff1a;20.0.0.100k8s集群node01&#xff1a;20.0.0.110 kubelet kube-proxy docker etcd k8s集群node02&#xff1a;20.…

学习paddle-detection(paddlex的使用)

首先下载paddlex&#xff08;网页&#xff09;的本地软件&#xff0c;下载链接如下&#xff1a; paddlex 下载完成后进行安装 打开后选择开发者模式&#xff0c;开发者模式主要是和VScode进行集成 本章节主要介绍在开发者模式下可以查看和编辑的文件及其作用&#xff0c;关于…

【Java 进阶篇】解决Java Web应用中请求参数中文乱码问题

在Java Web应用开发中&#xff0c;处理请求参数时经常会遇到中文乱码的问题。当浏览器向服务器发送包含中文字符的请求参数时&#xff0c;如果不正确处理&#xff0c;可能会导致乱码问题&#xff0c;使得参数无法正确解析和显示。本文将详细探讨Java Web应用中请求参数中文乱码…

nginx请求时找路径问题

nginx请求时找路径问题 你是否遇到过这样的情况&#xff1a; 当你安装了nginx的时候&#xff0c;为nginx配置了如下的location&#xff0c;想要去访问路径下面的内容&#xff0c;可是总是出现404&#xff0c;找不到文件&#xff0c;这是什么原因呢&#xff0c;今天我们就来解…

针对element-plus,跳转jump(快速翻页)

待补充 const goToPage () > {const inputElement document.querySelector(.el-pagination .el-input__inner);console.log(inputElement, inputElement); } 打印之后可以看到分页跳转的数字输入框&#xff0c;是有进行处理的&#xff0c;max"102",是我自己的…

什么是 Node.js

目标 什么是 Node.js&#xff0c;有什么用&#xff0c;为何能独立执行 JS 代码&#xff0c;演示安装和执行 JS 文件内代码 讲解 Node.js 是一个独立的 JavaScript 运行环境&#xff0c;能独立执行 JS 代码&#xff0c;因为这个特点&#xff0c;它可以用来编写服务器后端的应用…

智能矩阵,引领商业新纪元!拓世方案:打破线上线下界限,开启无限营销可能!

在科技赋能商业大潮中&#xff0c;一切行业都在经历巨大变革&#xff0c;传统的营销策略被彻底改变&#xff0c;催生着无数企业去打造横跨线上线下、多维度、全方位的矩阵营销帝国。无数的成功案例已经告诉我们&#xff0c;营销不再只是宣传&#xff0c;而是建立品牌与消费者之…

基于物联网云平台的分布式光伏监控系统的设计与实现

贾丽丽 安科瑞电气股份有限公司 上海嘉定 201801 摘要&#xff1a;针对国内光伏发电监控系统的研究现状&#xff0c;文中提出了基于云平台的光伏发电监控体系。构建基于B/S架构的数据实时采集与推送&#xff0c;以SSH(strutsspringhibernate)作为Web开发框架&#xff0c;开发基…