问题描述

屏幕上有若干张互相重叠的卡片，用户每点击一张卡片，就要把这张卡片的移到最上面，也就是把它的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的更多相关文章

  1. .Net Core 企业微信更新模版卡片消息

    1.搭建回调服务器 可参考:https://www.cnblogs.com/zspwf/p/16381643.html进行搭建 2.编写代码 2.1接口定义 应用可以发送模板卡片消息,发送之后可再通过 ...

  2. PBOC金融IC卡，卡片与终端交互的13个步骤，简介-第四组(转)

    十:联机处理-可选项终端根据卡片行为分析的结果,执行对应的处理.若卡片响应联机,则终端发起联机操作.联机处理使得发卡行后台可以根据基于后台的风险管理参数检查并授权批准或拒绝交易.除了传统的联机欺诈和信 ...

  3. Google Glass应用开发探索

    摘要:2012年6月的Google开发者大会上,作者有幸预定到了Google Glass.8个月后,她收邀参加了Google纽约总部举行的Google Glass Foundry开发大赛.在为期两天的 ...

  4. HighCharts/Highstock使用小结,使用汉化及中文帮助文档

       此文档是本人在开发过程图形报表时使用HighCharts所遇到的问题及解决方案 .最后附上有HighCharts中文帮助文档 HighCharts  版本:Highcharts-3.0.1 Hi ...

  5. Google_PWA_ServiceWork_渐进式 Web 应用_给应用提供离线体验

    前言:今天结识了google PWA提供的一个对移动端Web应用提供离线体验的一个功能,感觉很有用.我这里不分享自己的写法和代码.官网文档说的很详细,直接粘过来大家看吧. 推荐官网地址:你的第一个渐进 ...

  6. Highcharts中文帮助文档

    Highcharts中文帮助文档Highcharts 简介: Highcharts 是一个制作图表的 Javascript 类库,可以制作的图表有:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图. ...

  7. 剖析虚幻渲染体系（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光 ...

  8. Blazor 数据绑定开发指南

    翻译自 Waqas Anwar 2021年3月21日的文章 <A Developer's Guide to Blazor Data Binding> [1] 现如今,大多数 Web 应用程 ...

  9. 直播预告｜App 首页如何动态化更新？来看蚂蚁技术专家详解「支付宝」全新卡片技术栈

    立即前往直播间预约观看 从icon到card,一场内容前置化的变革 从 Windows 时代开始,应用程序图标就成为了用户(流量)的主入口,一直持续到移动端时代. 图标即入口的方式,虽然足够方便但却不 ...

随机推荐

  1. git学习一二三一

    svn用的多,但是我是一个geek,git这个美丽的scm,我怎能错过了?于是最近在全方位的窥视它的酮体,把我的一点心得分享给大家把. 先说一说给git的历史, Git是一个开源的分布式版本控制系统, ...

  2. zookeeper基础知识整理

    http://blog.csdn.net/pelick/article/details/7269670 http://zookeeper.apache.org/doc/trunk/javaExampl ...

  3. Kafka：ZK+Kafka+Spark Streaming集群环境搭建（十三）kafka+spark streaming打包好的程序提交时提示虚拟内存不足（Container is running beyond virtual memory limits. Current usage: 119.5 MB of 1 GB physical memory used; 2.2 GB of 2.1 G）

    异常问题:Container is running beyond virtual memory limits. Current usage: 119.5 MB of 1 GB physical mem ...

  4. Hibernate setDate自动截去时分秒

    遇到一个这样的问题在hibernate应用时,Qurey对象qurey Query query = ses.createQuery(HQL); query.setDate("endTime& ...

  5. C++结构变量数据对齐问题

    为了避免混淆.做例如以下规定,下面代码若不加特殊说明都执行于32位平台,结构体的默认对齐值是8,各数据类型所占字节数分别为 char占一个字节 int占四个字节 double占八个字节. 两个样例 请 ...

  6. mybatis学习资源

    官网:http://mybatis.org/index.html 代码:https://code.google.com/p/mybatisnet/ wiki:http://zh.wikipedia.o ...

  7. centos下mysql自动备份

    #!/bin/bashdb_user="root"db_passwd="123456"db_name="test_db"#进入备份目录将之前 ...

  8. log4j.xml写入数据库，只有SQL和参数，无其他信息

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE log4j:configuration SY ...

  9. Mac os 系统头像位置。

    ~/Library/Containers/com.apple.ImageKit.RecentPictureService/Data/Library/Images/Recent Pictures/

  10. jstat 使用日志

    如何判断JVM是否存在内存问题呢?如何判断JVM垃圾回收是否正常?一般的top指令基本上满足不了这样的需求,因为它主要监控的是总体的系统资源,很难定位到java应用程序. Jstat是JDK自带的一个 ...