iOS瀑布流布局的实现(swift)
在iOS开发中,瀑布流布局(Waterfall Flow)是一种常见的多列不等高布局方式,适用于图片、商品展示等场景。以下是基于UICollectionView实现瀑布流布局的核心步骤和优化方法:
一、实现原理
瀑布流的核心在于动态计算每个元素的位置,将其放置在当前高度最低的列中。通过自定义UICollectionViewLayout
子类,结合数据源的动态高度计算,可实现灵活的布局效果。
二、实现步骤
1. 创建自定义布局类
- 继承UICollectionViewFlowLayout:需自定义一个类(如
WaterfallLayout
),继承自UICollectionViewFlowLayout
,并重写关键方法。class WaterfallLayout: UICollectionViewFlowLayout {// 声明属性,如记录每列的最大Y值private var columnHeights: [CGFloat] = []private var attributesArray: [UICollectionViewLayoutAttributes] = [] }
2. 重写prepareLayout
方法
- 初始化布局属性:在此方法中计算每个Cell的位置和大小。
override func prepare() {super.prepare()columnHeights = Array(repeating: sectionInset.top, count: numberOfColumns)attributesArray.removeAll()// 遍历所有元素,计算布局属性for item in 0..<collectionView!.numberOfItems(inSection: 0) {let indexPath = IndexPath(item: item, section: 0)guard let attributes = layoutAttributesForItem(at: indexPath) else { continue }attributesArray.append(attributes)} }
3. 动态计算Cell位置
- 确定最短列:每次将新Cell插入当前高度最低的列。
func shortestColumnIndex() -> Int {var minIndex = 0for i in 1..<columnHeights.count {if columnHeights[i] < columnHeights[minIndex] {minIndex = i}}return minIndex }
- 计算Cell的Frame:根据列数、间距和动态高度确定每个Cell的位置。
let columnIndex = shortestColumnIndex() let x = sectionInset.left + (itemWidth + minimumInteritemSpacing) * CGFloat(columnIndex) let y = columnHeights[columnIndex] let height = delegate?.collectionView(collectionView!, heightForItemAt: indexPath) ?? 100 let frame = CGRect(x: x, y: y, width: itemWidth, height: height)
4. 处理滚动方向和内容尺寸
- 设置内容尺寸:根据所有列的最大高度确定UICollectionView的内容高度。
override var collectionViewContentSize: CGSize {let maxHeight = columnHeights.max() ?? 0return CGSize(width: collectionView!.bounds.width, height: maxHeight + sectionInset.bottom) }
三、性能优化
-
提前计算布局信息
在数据加载阶段预计算所有Cell的高度和位置,避免滚动时重复计算。 -
图片缓存与异步加载
使用第三方库(如SDWebImage)实现图片的异步加载和缓存,减少内存占用。 -
Cell重用机制
通过dequeueReusableCell(withReuseIdentifier:for:)
重用Cell,避免频繁创建和销毁。 -
懒加载与分页加载
仅加载可视区域内的Cell,滚动到底部时触发分页加载更多数据。 -
布局属性缓存
在prepareLayout
中缓存所有布局属性,避免频繁调用layoutAttributesForItem
。
四、扩展功能示例
1. 动态列数与间距
通过代理方法支持动态调整列数和间距:
protocol WaterfallLayoutDelegate {func numberOfColumns(in collectionView: UICollectionView) -> Intfunc collectionView(_ collectionView: UICollectionView, heightForItemAt indexPath: IndexPath) -> CGFloat
}
2. 特殊元素全屏显示
在布局中识别特定Cell,为其分配整屏宽度,其他元素动态调整位置。
五、对比其他实现方案
- UIScrollView实现
需手动管理Cell的重用和布局,复杂度较高,适合高度定制化需求。 - 多UITableView实现
每列使用一个UITableView,但无法有效利用重用机制,性能较差。
总结
通过自定义UICollectionViewLayout
实现瀑布流布局是最推荐的方式,既支持灵活布局,又利用系统级优化。开发者可根据需求扩展列数、间距、动态高度等功能,并通过缓存和异步加载提升性能。具体实现可参考开源项目(如豆瓣相册的DAWaterfallLayout
)。
相关文章:
iOS瀑布流布局的实现(swift)
在iOS开发中,瀑布流布局(Waterfall Flow)是一种常见的多列不等高布局方式,适用于图片、商品展示等场景。以下是基于UICollectionView实现瀑布流布局的核心步骤和优化方法: 一、实现原理 瀑布流的核心在于动态计算每个…...
TGRS | FSVLM: 用于遥感农田分割的视觉语言模型
论文介绍 题目:FSVLM: A Vision-Language Model for Remote Sensing Farmland Segmentation 期刊:IEEE Transactions on Geoscience and Remote Sensing 论文:https://ieeexplore.ieee.org/document/10851315 年份:2025 单位…...
#Redis黑马点评#(四)优惠券秒杀
目录 一 生成全局id 二 添加优惠券 三 实现秒杀下单 方案一(会出现超卖问题) 方案二(解决了超卖但是错误率较高) 方案三(解决了错误率较高和超卖但是会出现一人抢多张问题) 方案四(解决一人抢多张问题“非分布式…...
https,http1,http2,http3的一些知识
温故知新,突然有人问我项目中🤔有使用http3么,一下不知从何说起,就有了这篇文章的出现。 https加密传输,ssltls https 验证身份 提供加密,混合加密 : 对称加密 非对称加密 原理:…...
《设计数据密集型应用》——阅读小记
设计数据密集型应用 这本书非常推荐看英语版,如果考过了CET-6就可以很轻松的阅读这本书。 当前计算机软件已经不是单体的时代了,分布式系统,微服务现在是服务端开发的主流,如果没有读过这本书,则强力建议读这本书。 …...
SpringCloud之Gateway基础认识-服务网关
0、Gateway基本知识 Gateway 是在 Spring 生态系统之上构建的 API 网关服务,基于 Spring ,Spring Boot 和 Project Reactor 等技术。 Gateway 旨在提供一种简单而有效的方式来对 API 进行路由,以及提供一些强大的过滤器功能,例如…...
MySQL 从入门到精通(三):日志管理详解 —— 从排错到恢复的核心利器
在 MySQL 数据库的日常运维中,日志是定位问题、优化性能、数据恢复的核心工具。无论是排查服务器启动异常,还是分析慢查询瓶颈,亦或是通过二进制日志恢复误删数据,日志都扮演着 “数据库黑匣子” 的角色。本文将深入解析 MySQL 的…...
单脉冲前视成像多目标分辨算法——论文阅读
单脉冲前视成像多目标分辨算法 1. 论文的研究目标及实际意义1.1 研究目标1.2 实际问题与产业意义2. 论文的创新方法及公式解析2.1 核心思路2.2 关键公式与模型2.2.1 单脉冲雷达信号模型2.2.2 匹配滤波输出模型2.2.3 多目标联合观测模型2.2.4 对数似然函数与优化2.2.5 MDL准则目…...
SpringBoot项目容器化进行部署,meven的docker插件远程构建docker镜像
需求:将Spring Boot项目使用容器化进行部署 前提 默认其他环境,如mysql,redis等已经通过docker部署完毕, 这里只讨论,如何制作springboot项目的镜像 要将Spring Boot项目使用docker容器进行部署,就需要将Spring Boot项目构建成一个docker镜像 一、手动…...
【金仓数据库征文】政府项目数据库迁移:从MySQL 5.7到KingbaseES的蜕变之路
摘要:本文详细阐述了政府项目中将 MySQL 5.7 数据库迁移至 KingbaseES 的全过程,涵盖迁移前的环境评估、数据梳理和工具准备,迁移实战中的数据源与目标库连接配置、迁移任务详细设定、执行迁移与过程监控,以及迁移后的质量验证、系…...
C++GO语言微服务和服务发现②
01 创建go-micro项目-查看生成的 proto文件 02 创建go-micro项目-查看生成的main文件和handler ## 创建 micro 服务 命令:micro new --type srv test66 框架默认自带服务发现:mdns。 使用consul服务发现: 1. 初始consul服务发现&…...
手机银行怎么打印流水账单(已解决)
一、中国银行 登录中国银行手机银行APP。 在首页点击“更多”,向左滑动找到并点击“助手”。 在助手页面选择“交易流水打印”。 点击“立即申请”,选择需要打印的账户和时间段。 输入接收流水账单的电子邮箱地址。 提交申请后,在“申请…...
单片机-STM32部分:10-2、逻辑分析仪
飞书文档https://x509p6c8to.feishu.cn/wiki/VrdkwVzOnifH8xktu3Bcuc4Enie 安装包如下:根据自己的系统选择,目前这个工具只有window版本哦 安装方法比较简单,都按默认下一步即可,注意不要安装到中文路径哦。 其余部分参考飞书文档…...
Scala与Go的异同教程
当瑞士军刀遇到电锯:Scala vs Go的相爱相杀之旅 各位准备秃头的程序猿们(放心,用Go和Scala不会加重你的发际线问题),今天我们来聊聊编程界的"冰与火之歌"——Scala和Go的异同。准备好瓜子饮料,我…...
【算法-哈希表】常见算法题的哈希表套路拆解
算法相关知识点可以通过点击以下链接进行学习一起加油!双指针滑动窗口二分查找前缀和位运算模拟链表 在刷题的过程中,我们会频繁遇到一些“高频套路”——而哈希表正是其中最常用也最高效的工具之一。它能帮助我们在 O(1) 的时间复杂度内完成查找、插入与…...
前端取经路——现代API探索:沙僧的通灵法术
大家好,我是老十三,一名前端开发工程师。在现代Web开发中,各种强大的API就像沙僧的通灵法术,让我们的应用具备了超乎想象的能力。本文将带你探索从离线应用到实时通信,从多线程处理到3D渲染的九大现代Web API,让你的应用获得"通灵"般的超能力。 在前端取经的第…...
深入了解 ArkTS:HarmonyOS 开发的关键语言与应用实践
随着 HarmonyOS(鸿蒙操作系统)的推出,华为为开发者提供了一套全新的开发工具和编程语言,使得跨设备、跨平台的应用开发成为可能。在这些工具中,ArkTS(Ark TypeScript)作为一种专为 HarmonyOS 设…...
Flask 调试的时候进入main函数两次
在 Flask 开启 Debug 模式时,程序会因为自动重载(reloader)的机制而启动两个进程,导致if __name__ __main__底层的程序代码被执行两次。以下说明其原理与常见解法。 Flask Debug 模式下自动重载机制 Flask 使用的底层服务器 Wer…...
Git 时光机:修改Commit信息
前言 列位看官都知道,Git 的每一次 git commit,其中会包含作者(Author)和提交者(Committer)的姓名与邮箱。有时可能会因为配置错误、切换了开发环境,或者只是单纯的手滑,导致 commi…...
DAY 21 常见的降维算法
知识点回顾: LDA线性判别PCA主成分分析t-sne降维 还有一些其他的降维方式,也就是最重要的词向量的加工,我们未来再说 作业: 自由作业:探索下什么时候用到降维?降维的主要应用?或者让ai给你出题&…...
Docker使用小结
概念 镜像( Image ) :相当于一个 root 文件系统;镜像构建时,分层存储、层层构建;容器( Container ) :镜像是静态的定义,容器是镜像运行时的实体;…...
kubectl top 查询pod连接数
在 Kubernetes 中,kubectl top 命令默认仅支持查看 Pod 或节点的 CPU/内存资源使用情况,并不直接提供 TCP 连接数的统计功能。若要获取 Pod 的 TCP 连接数,需结合其他工具和方法。以下是具体实现方案: 1. 直接进入容器查看 TCP 连…...
Kubernetes生产实战(十七):负载均衡流量分发管理实战指南
在Kubernetes集群中,负载均衡是保障应用高可用、高性能的核心机制。本文将从生产环境视角,深入解析Kubernetes负载均衡的实现方式、最佳实践及常见问题解决方案。 一、Kubernetes负载均衡的三大核心组件 1)Service资源:集群内流…...
Git 分支指南
什么是 Git 分支? Git 分支是仓库内的独立开发线,你可以把它想象成一个单独的工作空间,在这里你可以进行修改,而不会影响主分支(或 默认分支)。分支允许开发者在不影响项目实际版本的情况下,开…...
自动泊车技术—相机模型
一、相机分类及特性 传感器类型深度感知原理有效工作范围环境适应性功耗水平典型成本区间数据丰富度单目相机运动视差/几何先验1m~∞光照敏感1-2W5−5−502D纹理中双目相机立体匹配 (SGM/SGBM算法)0.3m~20m纹理依赖3-5W50−50−3002D稀疏深度多摄像头系统多视角三角测量0.1m~5…...
程序代码篇---esp32视频流处理
文章目录 前言一、ESP32摄像头设置1.HTTP视频流(最常见)2.RTSP视频流3.MJPEG流 二、使用OpenCV读取视频流1. 读取HTTP视频流2. 读取RTSP视频流 三、使用requests库读取MJPEG流四、处理常见问题1. 连接不稳定或断流2. 提高视频流性能2.1降低分辨率2.2跳过…...
数据结构与算法分析实验12 实现二叉查找树
实现二叉查找树 1、二叉查找树介绍2.上机要求3.上机环境4.程序清单(写明运行结果及结果分析)4.1 程序清单4.1.1 头文件 TreeMap.h 内容如下:4.1.2 实现文件 TreeMap.cpp 文件内容如下:4.1.3 源文件 main.cpp 文件内容如下: 4.2 实现展效果示5…...
深入浅出之STL源码分析2_类模版
1.引言 我在上面的文章中讲解了vector的基本操作,然后提出了几个问题。 STL之vector基本操作-CSDN博客 1.刚才我提到了我的编译器版本是g 11.4.0,而我们要讲解的是STL(标准模板库),那么二者之间的关系是什么&#x…...
Docker、Docker-compose、K8s、Docker swarm之间的区别
1.Docker docker是一个运行于主流linux/windows系统上的应用容器引擎,通过docker中的镜像(image)可以在docker中构建一个独立的容器(container)来运行镜像对应的服务; 例如可以通过mysql镜像构建一个运行mysql的容器,既可以直接进入该容器命…...
【Linux】线程的同步与互斥
目录 1. 整体学习思维导图 2. 线程的互斥 2.1 互斥的概念 2.2 见一见数据不一致的情况 2.3 引入锁Mutex(互斥锁/互斥量) 2.3.1 接口认识 2.3.2 Mutex锁的理解 2.3.3 互斥量的封装 3. 线程同步 3.1 条件变量概念 3.2 引入条件变量Cond 3.2.1 接口认识 3.2.2 同步的…...
C++发起Https连接请求
需要下载安装openssl //stdafx.h #pragma once #include<iostream> #include <openssl/ssl.h> #include <openssl/err.h> #include <iostream> #include <string>#pragma comment(lib, "libssl.lib") #pragma comment(lib, "lib…...
Linux 内核链表宏的详细解释
🔧 Linux 内核链表结构概览 Linux 内核中的链表结构定义在头文件 <linux/list.h> 中。核心结构是: struct list_head {struct list_head *next, *prev; }; 它表示一个双向循环链表的节点。链表的所有操作都围绕这个结构体展开。 🧩 …...
[架构之美]Spring Boot集成MyBatis-Plus高效开发(十七)
[架构之美]Spring Boot集成MyBatis-Plus高效开发(十七) 摘要:本文通过图文代码实战,详细讲解Spring Boot整合MyBatis-Plus全流程,涵盖代码生成器、条件构造器、分页插件等核心功能,助你减少90%的SQL编写量…...
游戏引擎学习第270天:生成可行走的点
回顾并为今天的内容定下基调 今天的计划虽然还不完全确定,可能会做一些内存分析,也有可能暂时不做,因为目前并没有特别迫切的需求。最终我们会根据当下的状态随性决定,重点是持续推动项目的进展,无论是 memory 方面还…...
批量统计PDF页数,统计图像属性
软件介绍: 1、支持批量统计PDF、doc\docx、xls\xlsx页数 2、支持统计指定格式文件数量(不填格式就是全部) 3、支持统计JPG、JPEG、PNG图像属性 4、支持统计多页TIF页数、属性 5、支持统计PDF、JPG画幅 统计图像属性 「托马斯的文件助手」…...
QT Creator配置Kit
0、背景:qt5.12.12vs2022 记得先增加vs2017编译器 一、症状: 你是否有以下症状? 1、用qt新建的工程,用qmake,可惜能看见的只有一个pro文件? 2、安装QT Creator后,使用MSVC编译显示no c com…...
[架构之美]IntelliJ IDEA创建Maven项目全流程(十四)
[架构之美]IntelliJ IDEA创建Maven项目全流程(十四) 摘要:本文将通过图文结合的方式,详细讲解如何使用IntelliJ IDEA快速创建Maven项目,涵盖环境配置、项目初始化、依赖管理及常见问题解决方案。适用于Java开发新手及…...
SpringBoot学习(上) , SpringBoot项目的创建(IDEA2024版本)
目录 1. SpringBoot介绍 SpringBoot特点 2. SpringBoot入门 2.1 创建SpringBoot项目 Spring Initialize 第一步: 选择创建项目 第二步: 选择起步依赖 第三步: 查看启动类 2.2 springboot父项目 2.3 测试案例 2.3.1 数据库 2.3.2 生成代码 1. SpringBoot介绍 Spring B…...
《Python星球日记》 第51天:神经网络基础
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 目录 一、引言:走进神经网络的世界二、神经元与激活函数1. 神经元&#x…...
MindSpore框架学习项目-ResNet药物分类-模型评估
目录 4.模型评估 4.1模型预测 4.1.1加载模型 4.1.2通过传入图片路径进行推理 单张图片推理代码解释 4.2图片推理 4.2.1构造可视化推理结果函数 可视化推理结果函数代码解释 4.2.2进行单张推理 参考内容: 昇思MindSpore | 全场景AI框架 | 昇思MindSpore社区…...
Visual Studio Code 前端项目开发规范合集【推荐插件】
文章目录 前言代码格式化工具(Prettier)1、下载 prettier 相关依赖:2、安装 Vscode 插件(Prettier):3、配置 Prettier(.prettierrc.cjs): 代码规范工具(ESLin…...
uniapp-商城-48-后台 分类数据添加修改弹窗bug
在第47章的操作中,涉及到分类的添加、删除和更新功能,但发现uni-popup组件存在bug。该组件的函数接口错误导致在小程序中出现以下问题:1. 点击修改肉类名称时,回调显示为空,并报错“setVal is not defined”࿰…...
OpenLayers 精确经过三个点的曲线绘制
OpenLayers 精确经过三个点的曲线绘制 根据您的需求,我将提供一个使用 OpenLayers 绘制精确经过三个指定点的曲线解决方案。对于三个点的情况,我们可以使用 二次贝塞尔曲线 或 三次样条插值,确保曲线精确通过所有控制点。 实现方案 下面是…...
uniapp小程序中实现无缝衔接滚动效果
组件滚动通知只能实现简单的滚动效果,不能实现滚动内容中的字进行不同颜色的更改,下面实现一个无缝衔接的滚动动画,可以根据自己的需要进行艺术化的更改需要滚动的内容,也可以自定义更改滚动速度。 <template><view cla…...
【Docker 新手入门指南】第四章:镜像加速
【Docker 新手入门指南】系列文章目录 【Docker 新手入门指南】第一章:前言【Docker 新手入门指南】第二章:架构概述【Docker 新手入门指南】第三章:快速安装【Docker 新手入门指南】第四章:镜像加速 文章目录 🚀【Doc…...
k8s删除pv和pvc后,vg存储没释放分析
原因是pv对应的lvm没删除 pv如下: local-068e2cac-22de-40f3-af90-efd151d043c8 100Gi RWO Retain Released sase-ops/alertmanager-kube-prometheus-stack-alertmanager-db-alertmanager-kube-prometheus-stack-alertmanager-0 …...
Ubuntu 22.04(WSL2)使用 Docker 安装 Zipkin 和 Skywalking
Ubuntu 22.04(WSL2)使用 Docker 安装 Zipkin 和 Skywalking 分布式追踪工具在现代微服务架构中至关重要,它们帮助开发者监控请求在多个服务之间的流动,识别性能瓶颈和潜在错误。本文将指导您在 Ubuntu 22.04(WSL2 环境…...
【DLF】基于语言的多模态情感分析
作者提出的不足 模态平等处理导致冗余与冲突 问题:现有MSA方法对所有模态(语言、视觉、音频)平等处理,忽略模态间贡献差异(如语言为主导模态)。后果:跨模态交互引入冗余信息(如视觉和音频中与情感无关的噪声),甚至模态对间双向信息传递(…...
window 显示驱动开发-线性伸缩空间段
线性伸缩空间段类似于线性内存空间段。 但是,伸缩空间段只是地址空间,不能容纳位。 若要保存位,必须分配系统内存页,并且必须重定向地址空间范围以引用这些页面。 内核模式显示微型端口驱动程序(KMD)必须实…...
[Linux网络_71] NAT技术 | 正反代理 | 网络协议总结 | 五种IO模型
目录 1.NAT技术 NAPT 2.NAT和代理服务器 3.网线通信各层协议总结 补充说明 4.五种 IO 模型 1.什么是IO?什么是高效的IO? 2.有那些IO的方式?这么多的方式,有那些是高效的? 异步 IO 🎣 关键缺陷类比…...