更新卡片的zIndex
问题描述
屏幕上有若干张互相重叠的卡片,用户每点击一张卡片,就要把这张卡片的移到最上面,也就是把它的zIndex置为最大值。应该如何操作每个卡片的zIndex才能实现?
实现方案一
定义一个全局变量globalZIndex
一开始zIndex都是0,每点击一次,被点击的卡片:zIndex=++globalZIndex,这样做的坏处是总有一天zIndex会超出int范围。
但是这种方法并非不可救药,当globalZIndex达到int最大值时,执行对全部元素的排序操作,给各个元素的zIndex重新赋值为0~N之间的数字,同时将globalZIndex置为N。
这样做时空复杂度都很低,平时操作时特别快(时间复杂度O(1)),但达到int最大值之后就需要一次类似“磁盘碎片整理”的操作需要对卡片进行排序(时间复杂度O(Nlg(N)))。
实现方案二
用一个数组a记录各个卡片的zIndex,a[i]表示第i张卡片的zIndex。
点击卡片时,在数组中找到对应卡片,将后面的元素往前移动一格同时更改它的zIndex。
这样做的好处是始终将zIndex控制在0~N。每次操作复杂度微O(N)
更新卡片的zIndex的更多相关文章
- .Net Core 企业微信更新模版卡片消息
1.搭建回调服务器 可参考:https://www.cnblogs.com/zspwf/p/16381643.html进行搭建 2.编写代码 2.1接口定义 应用可以发送模板卡片消息,发送之后可再通过 ...
- PBOC金融IC卡,卡片与终端交互的13个步骤,简介-第四组(转)
十:联机处理-可选项终端根据卡片行为分析的结果,执行对应的处理.若卡片响应联机,则终端发起联机操作.联机处理使得发卡行后台可以根据基于后台的风险管理参数检查并授权批准或拒绝交易.除了传统的联机欺诈和信 ...
- Google Glass应用开发探索
摘要:2012年6月的Google开发者大会上,作者有幸预定到了Google Glass.8个月后,她收邀参加了Google纽约总部举行的Google Glass Foundry开发大赛.在为期两天的 ...
- HighCharts/Highstock使用小结,使用汉化及中文帮助文档
此文档是本人在开发过程图形报表时使用HighCharts所遇到的问题及解决方案 .最后附上有HighCharts中文帮助文档 HighCharts 版本:Highcharts-3.0.1 Hi ...
- Google_PWA_ServiceWork_渐进式 Web 应用_给应用提供离线体验
前言:今天结识了google PWA提供的一个对移动端Web应用提供离线体验的一个功能,感觉很有用.我这里不分享自己的写法和代码.官网文档说的很详细,直接粘过来大家看吧. 推荐官网地址:你的第一个渐进 ...
- Highcharts中文帮助文档
Highcharts中文帮助文档Highcharts 简介: Highcharts 是一个制作图表的 Javascript 类库,可以制作的图表有:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图. ...
- 剖析虚幻渲染体系(06)- UE5特辑Part 2(Lumen和其它)
目录 6.5 Lumen 6.5.1 Lumen技术特性 6.5.1.1 表面缓存(Surface Cache) 6.5.1.2 屏幕追踪(Screen Tracing) 6.5.1.3 Lumen光 ...
- Blazor 数据绑定开发指南
翻译自 Waqas Anwar 2021年3月21日的文章 <A Developer's Guide to Blazor Data Binding> [1] 现如今,大多数 Web 应用程 ...
- 直播预告|App 首页如何动态化更新?来看蚂蚁技术专家详解「支付宝」全新卡片技术栈
立即前往直播间预约观看 从icon到card,一场内容前置化的变革 从 Windows 时代开始,应用程序图标就成为了用户(流量)的主入口,一直持续到移动端时代. 图标即入口的方式,虽然足够方便但却不 ...
随机推荐
- js命名空间写法
很早知道这种写法,由于基础面向对象不够扎实一直在回避,但是面对整站这种方法还是有必要会 <div id="div1">111</div> <div i ...
- AngulerJS学习(五)按需动态载入文件
在此之前我么年首先要先了解几个东西: $q 简单介绍: $q:主要解决的是异步编程的问题,是指描写叙述通过一个承诺行为与对象代表的异步运行的行动结果的交互.可能会也可能不会再不论什么时候完毕. 我们通 ...
- Idea 自动导入包的*设置99
作者:Intopass 链接:https://www.zhihu.com/question/35806024/answer/64530300 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权, ...
- Android -- View流程
在自定义view中打log,view的显示共有三种,visible.invisible和gone,分别看一下log: gone onVisibilityChanged construct 2 para ...
- Android -- 系统和自定义Notification
Notification是一种让你的应用程序在不使用Activity的情况下警示用户,Notification是看不见的程序组件警示用户有需要注意的事件发生的最好途径. 作为UI部分,Notifica ...
- POJ 3525 Most Distant Point from the Sea 二分+半平面交
题目就是求多变形内部一点. 使得到任意边距离中的最小值最大. 那么我们想一下,可以发现其实求是看一个圆是否能放进这个多边形中. 那么我们就二分这个半径r,然后将多边形的每条边都往内退r距离. 求半平面 ...
- 【math】梯度下降法(梯度下降法,牛顿法,高斯牛顿法,Levenberg-Marquardt算法)
原文:http://blog.csdn.net/dsbatigol/article/details/12448627 何为梯度? 一般解释: f(x)在x0的梯度:就是f(x)变化最快的方向 举个例子 ...
- php学习实例3
新闻发布管理系统 路由器action.php <!DOCTYPE html> <html> <head> <title> </title> ...
- 去除Win10快捷图标小箭头
有点强迫症,一看到操作系统上的快捷图标小箭头就想把它去除掉. 去除小箭头 reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Cur ...
- angular5 基于ngx-translate实现多语言切换
angular的坑永远都是那么多,当然了,主要还是我太菜~ 基于ngx-translate实现多语言切换这个功能,我又是折腾了很久,下面是我实现的过程: 1.安装ngx-translate 需要安装@ ...