一种高效的可变行高列表行定位算法

列表控件是数据显示时使用的一种常用的控件。

一般情况下列表中的行是等高的,这种情况下无论列表包含多少行,都能够在O(1)的时间定位到指定行。

但是当显示的内容格式不一致时,使用相等的行高可能就意味着显示空间的浪费,也意味说用户需要更多的滚动操作,影响用户体验。

要实现一个支持可变行高的列表控件,首先要解决的问题就是快速定位列表行。

假定一个列表中的表项按照下面的高度排列:

1,2,3,1,2,3,1,2,3,1,2,3,4,5

可以知道总高度为:33

程序员需要解决从一个随机的[0,32]的值(x)定位到哪一行的问题。

当然最简单的办法就是从第一行开始逐行的数,直到数到的那一行正好包含x,可以知道这个算法的时间复杂度为O(n)。

当n很大时,这个算法基本上不可行。

一行一行的数显然是很浪费时间的,解决的办法就是一段一段的数。

要实现分段数,一个前提就是我们需要为这些数据提前建立好索引表。对于上面序列假定以3个元素一组为单位建立索引表就可以获得:(6),(6),(6),(6),(9),如此一来,要定位一行,我们最多需要数5+3次就能找到一行。

对于数据量比较少的情况,可能上述分组方法就能解决问题了。

但是对于数据量更大的情况如何处理呢?方法很简单,那就是分组再分组,直到最后所有的分组数据形成一棵索引树。树上每一个结点代表该结点下所有子节点的高度和。

通过构造索引树,无论多少数据量,都可以在O(log(n))的时间定位到任意行。

另外,对于大量数据,我们可能在初始化的时候并不知道总数有多少,而是在显示到哪一行时再通过计算获得。

对于这种情况,我们需要动态更新索引树。更新过程也很简单,当一行更新高度时,只需要找到该行所在的叶节点,更新叶节点高度,再逐级更新父节点即可,时间复杂度同样是O(log(n))。

具体实现可以参考SOUI的ListView中用于可变行高支持的类:SListViewItemLocatorFlex

时间: 2024-10-07 14:43:42

一种高效的可变行高列表行定位算法的相关文章

line-height 和 vertical-align 行高与行对齐精解 (图文)转文

行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响. 7.3 line-height 行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响. 7.3.1 语 法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比> | inherit说明: 设置元素中行的高度.值: normal:默认行高,一般为1

行内元素(inline标签)设置了行高为什么不生效,还是表现为父盒子的行高?行内元素行高问题终极解释

最近在看张鑫旭大佬的<css世界>,读到5.2.4  内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证内容有点长,结论: 行内元素自身并没有行高这个属性,虽然设置可以设置行高,但是最终作用的地方并不是自身,而是其自身所在的行框盒子上!如果你不知道什么是行框盒子,建议你好好读读张大佬的<css世界>,这里我简单的画一画 如上如所示,我的结论是: 内联盒子没有行高这一属性,给它设置line-heigh

css行高line-height的用法(转)

本文导读: “行高“指一行文子的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line- height 属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离.所有浏览器都支持 line-height 属性. 一.line-height语法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比

[ css 补充 line-height ] css中补充的line-height(行高)知识点

行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响 7.3 line-height 行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响. 7.3.1 语 法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比> | inherit说明: 设置元素中行的高度.值: normal:默认行高,一般为1到

css行高line-height的用法

一.line-height语法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比> | inherit 说明: line-height 属性设置行间的距离(行高),不能使用负值.该属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离.line-height 与 font-size 的计算值之差(行距)分为两半,分别加到一个文本行内容的顶部和

0015 行高那些事:line-height

目标 理解 能说出 行高 和 高度 三种关系 能简单理解为什么行高等于高度单行文字会垂直居中 应用 使用行高实现单行文字垂直居中 能会测量行高 3.1 行高测量 行高的测量方法: 3.2 单行文本垂直居中 行高我们利用最多的一个地方是: 可以让单行文本在盒子中垂直居中对齐. 文字的行高等于盒子的高度. 这里情况些许复杂,开始学习,我们可以先从简单地方入手学会. 行高 = 上距离 + 内容高度 + 下距离 上距离和下距离总是相等的,因此文字看上去是垂直居中的. 行高和高度的三种关系 如果 行高 等

行高:line-height图文解析

行高——line-height 初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知识,就此总结一下. 所谓行高是指文本行基线间的垂直距离.要想理解这句话首先得了解几个基本知识: 顶线.中线.基线.底线 <!DOCTYPE html> <html> <head> <title>Test</title>

CSS行高——line-height

初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知识,就此总结一下. 所谓行高是指文本行基线间的垂直距离.要想理解这句话首先得了解几个基本知识: 顶线.中线.基线.底线 <!DOCTYPE html> <html> <head> <title>Test</title> <style type=

css中line-height行高的深入学习

之前对css中行高的理解还是有些肤浅,深入后才发觉里面内有乾坤.学习line-height,首先从基本原理开始 (标注该文章转载 http://www.cnblogs.com/dolphinX/p/3236686.html) 顶线/中线/基本/底线 <!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css" > span { pa