问题描述

屏幕上有若干张互相重叠的卡片，用户每点击一张卡片，就要把这张卡片的移到最上面，也就是把它的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. LeakCanary 内存泄漏 监测 性能优化 简介 原理 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  2. Flyweight 享元模式 MD

    享元模式 简介 在JAVA语言中,String类型就是使用了享元模式,JAVA中的字符串常量都是存在常量池中的,JAVA会确保一个字符串常量在常量池中只有一个拷贝,避免了在创建N多相同对象时所产生的不 ...

  3. Java-Shiro（三）：Shiro与Spring MVC集成

    新建Java Daynamic Web项目 导入Spring.SpringMVC依赖包: 导入Spring & Spring MVC包(导入如下所有开发包): Spring AOP依赖扩展包: ...

  4. 转：在centos7上安装memcache

    转:https://www.liquidweb.com/kb/how-to-install-memcached-on-centos-7/ http://devdocs.magento.com/guid ...

  5. ubuntu14.04-64位机配置android开发环境，ADT，sdk，eclipsea

    这是一篇没有图的好文章,对于学习android的非常实用 1.首先到orcale官网    http://www.oracle.com/technetwork/java/javase/download ...

  6. oauth2-server-php-docs 概念

    PHP的OAuth2服务器库 将OAuth2.0干净地安装到您的PHP应用程序中. 从GitHub 下载代码开始. 要求 这个库需要PHP 5.3.9+.然而,有一个稳定的版本和开发分支的PHP 5. ...

  7. javascript 将treeNode 转换id和pid的Array

    function treeTolist(treeNodes, opt) { if (!opt) { opt = {}; opt.key = "id"; opt.parent = & ...

  8. [Canvas]越来越近的女孩

    本作比前作增加了控制功能,观看动态效果请点此下载代码用Chrome或Firfox浏览器观看. 图例: 代码: <!DOCTYPE html> <html lang="utf ...

  9. oracle 复制表结构表数据

    create table Uc_t_Department3 as (select * from Uc_t_Department where 1=2);insert into Uc_t_Departme ...

  10. Dictionary应用

    using System; using System.Collections.Generic; using System.Data; using System.Web; using System.We ...