当前位置: 首页 > 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;今天我将为大家分享关于数据链路层——以太网方面的…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...