当前位置: 首页 > news >正文

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

然后看看效果;

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

相关文章:

uniapp实现瀑布流

首先我们要先了解什么是瀑布流&#xff1a; 瀑布流&#xff08;Waterfall Flow&#xff09;是一种常见的网页布局方式&#xff0c;也被称为瀑布式布局或砌砖式布局。它通常用于展示图片、博客文章、商品等多个不同大小和高度的元素。 瀑布流布局的特点是每个元素按照从上到下…...

15. 机器学习 - 支持向量机

Hi, 你好。我是茶桁。 逻辑回归预测心脏病 在本节课开始呢&#xff0c;我给大家一份逻辑回归的练习&#xff0c;利用下面这个数据集做了一次逻辑回归预测心脏病的练习。 本次练习的代码在「茶桁的AI秘籍」在Github上的代码库内&#xff0c;数据集的获取在文末。这样做是因为我…...

如何根据进程号查询服务的端口号

ps -ef | grep nacos ps -ef | grep nacos 命令是用于查找系统中所有包含 "nacos" 关键字的进程。这个命令的含义如下&#xff1a; ps: 这是一个用于显示当前正在运行的进程的命令。 -ef: 这两个选项一起使用&#xff0c;表示显示所有进程的详细信息。 -e 选项表示显…...

2.10、自定义量化优化过程

introduction 如何自定义量化优化过程&#xff0c;以及如何手动调用优化过程 code from typing import Callable, Iterableimport torch import torchvision from ppq import QuantizationSettingFactory, TargetPlatform from ppq.api import (ENABLE_CUDA_KERNEL, Quantiz…...

MySQL如何添加自定义函数

深入MySQL&#xff1a;学习如何添加自定义函数 MySQL 是一种流行的开源关系型数据库管理系统&#xff0c;它支持很多内置函数来完成各种操作。不过有时候这些内置函数无法满足我们的需求&#xff0c;这时候就需要自定义函数了。在 MySQL 中&#xff0c;可以通过编写自定义函数…...

超融合数据库:解锁全场景数据价值的钥匙

前言 近日&#xff0c;四维纵横对外官宣已完成上亿元 B 轮融资。作为超融合数据库理念的提出者&#xff0c;三年来 YMatrix 持续在超融合数据库领域中保持精进与迭代&#xff0c;对于超融合数据库在行业、场景中的应用和理解也更为深刻。 本篇文章&#xff0c;我们将基于 YMa…...

Pap.er for Mac:高清壁纸应用打造你的专属视觉盛宴

在浩瀚的互联网海洋中&#xff0c;你是否曾为寻找一张心仪的高清壁纸而烦恼&#xff1f;或者是在大量的壁纸应用中感到困扰&#xff0c;不知道哪一个能满足你的需求&#xff1f;今天&#xff0c;我要向你介绍的&#xff0c;是一款独特的5K高清壁纸应用——Pap.er for Mac。 Pa…...

AI:46-基于深度学习的垃圾邮件识别

🚀 本文选自专栏:AI领域专栏 从基础到实践,深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家,通过案例和项目实践,掌握核心概念和实用技能。每篇案例都包含代码实例,详细讲解供大家学习。 📌📌📌本专栏包含以下学习方向: 机器学习、深度学…...

【骑行贝丘渔场】一场与海的邂逅,一段难忘的旅程

在这个渐凉的秋日&#xff0c;我们校长骑行队一行人骑着自行车&#xff0c;从大观公园门口出发&#xff0c;开始了一段别开生面的海滩之旅。沿途穿越草海隧道湿地公园、迎海路、海埂公园西门&#xff08;第二集合点&#xff09;、宝丰湿地公园、斗南湿地公园、蓝光城&#xff0…...

消息中间件——RabbitMQ(一)Windows/Linux环境搭建(完整版)

前言 最近在学习消息中间件——RabbitMQ&#xff0c;打算把这个学习过程记录下来。此章主要介绍环境搭建。此次主要是单机搭建&#xff08;条件有限&#xff09;&#xff0c;包括在Windows、Linux环境下的搭建&#xff0c;以及RabbitMQ的监控平台搭建。 环境准备 在搭建Rabb…...

Mysql 表读锁与表写锁

表读锁 加锁&#xff1a;lock table table_name read 释放锁&#xff1a;unlock tables 当事务一用表读锁锁住某张表后&#xff0c; 1.事务一必须释放表读锁才能访问其他表 2.期间事务2可以访问该表&#xff0c;但是修改事会遇到阻塞等待&#xff0c;只有等到事务一释放锁后…...

目标检测概述

1.是什么&#xff1f; 目标检测是计算机视觉领域的核心问题之一&#xff0c;其任务就是找出图像中所有感兴趣的目标&#xff0c;确定他们的类别和位置。由于各类不同物体有不同的外观&#xff0c;姿态&#xff0c;以及不同程度的遮挡&#xff0c;加上成像是光照等因素的干扰&a…...

10月31日星期二今日早报简报微语报早读

10月31日星期二&#xff0c;农历九月十七&#xff0c;早报微语早读分享。 1、广西官宣&#xff1a;做试管婴儿费用可报销&#xff1b; 2、港媒&#xff1a;4名港大学生承认“煽惑他人蓄意伤人罪”&#xff0c;被判监禁2年&#xff1b; 3、331名中国维和官兵全部获联合国勋章…...

【Linux】虚拟机项目部署与发布

目录 一、Linux部署单机项目 1.1 优缺点 1.2 将项目共享到虚拟机 1.3 解压后将war包放入tomcat 1.4 数据库导入脚本 1.5 Tomcat启动项目 二、部署前后端分离项目 2.1 准备工作 2.2 部署SPA项目 2.2.1 nginx反向代理 2.2.2 SPA项目宿主机访问 一、Linux部署单机项目…...

边缘计算技术的崭新篇章:赋能未来智能系统

边缘计算是近年来云计算和物联网技术发展的重要趋势。通过将数据处理和分析从云端迁移到设备边缘&#xff0c;边缘计算能够实现更低的延迟和更高的数据安全。本文将探索边缘计算技术的最新进展及其在不同行业中的应用场景。 1. 实时数据处理与决策 在需要快速响应的场景中&…...

Mac/Linux类虚拟机_CrossOver虚拟机CrossOver 23.6正式发布2024全新功能解析

CodeWeivers 公司于今年 10 月发布了 CrossOver 23.6 测试版&#xff0c;重点添加了对 DirectX 12 支持&#xff0c;从而在 Mac 上更好地模拟运行 Windows 游戏。 该公司今天发布新闻稿&#xff0c;表示正式发布 CrossOver 23 稳定版&#xff0c;在诸多新增功能中&#xff0c;最…...

RabbitMQ 运维 扩展

1、集群管理与配置 1.1、集群搭建 关于Rabbitmq 集群的搭建&#xff0c;详见以下文章。简单说来就是将多个单机rabbitmq服务&#xff0c;通过给到一致的密钥&#xff08;.erlang.cookie&#xff09;并且开放rabbitmq服务的 25672 端口&#xff0c;允许多节点间进行互相通讯&am…...

[量化投资-学习笔记003]Python+TDengine从零开始搭建量化分析平台-Grafana画K线图

在前面两个笔记&#xff1a; PythonTDengine从零开始搭建量化分析平台-数据存储 PythonTDengine从零开始搭建量化分析平台-MA均线的多种实现方式 中有提到使用 Grafana 画图&#xff0c;不过画的都是均线。除了均线&#xff0c;Grafana 非常人性的提供了 K线图模块 搭配 TDeng…...

前端接口请求支持内容缓存和过期时间

前端接口请求支持内容缓存和过期时间 支持用户自定义缓存时间&#xff0c;在规则时间内读取缓存内容&#xff0c;超出时间后重新请求接口 首先封装一下 axios&#xff0c;这一步可做可不做。但是在实际开发场景中都会对 axios 做二次封装&#xff0c;我们在二次封装的 axios …...

【计算机网络】数据链路层——以太网

文章目录 前言什么是以太网以太网帧格式6位目的地址和源地址2位类型数据长度CRC 校验和 数据在数据链路层是如何转发的 前言 前面我们学习了关于应用层——自定义协议、传输层——UDP、TCP协议、网络层——IP协议&#xff0c;今天我将为大家分享关于数据链路层——以太网方面的…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...