CN114528063A - 一种页面显示方法、装置、设备及存储介质 - Google Patents

Abstract

本申请公开了一种页面显示方法、装置、设备及存储介质，属于计算机技术领域，该方法包括：获取用于展示多个子元素的当前页面的每一列的高度，以得到最长列的高度与最短列的高度；当监测到当前页面满足预设循环判断条件，则确定出当前最长列的高度与当前最短列的高度之间的高度差，并循环判断高度差是否大于在当前所述最长列中末尾子元素的高度；若所述高度差大于所述末尾子元素的高度，则将末尾子元素转移至当前所述最短列，并重复所述当监测到所述当前页面满足预设循环判断条件的步骤直到高度差不大于末尾子元素的高度，然后对当前页面进行渲染以生成相应的显示页面。通过本申请的技术方案，可以使得页面显示更均匀，提高了用户体验。

Description

一种页面显示方法、装置、设备及存储介质

技术领域

本发明涉及计算机技术领域，特别涉及一种页面显示方法、装置、设备及存储介质。

背景技术

瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，由pinterest.com网站首创，后逐渐在国内流行。它的原理是：先计算出一排能够容纳几列元素，然后寻找各列之中所有元素高度之和的最小者并将新的元素添加到该列上，然后继续寻找所有列的各元素之和的最小者，继续添加至该列上，如此循环下去，直至所有元素均能够按要求排列为止，所以随着页面滚动条向下滚动，这种布局会不断加载数据块并附加至当前尾部。目前，通常是利用flex（Adobe Flex，支持RIA(RichInternet Applications)的开发和部署的一系列技术组合）结合order（排序）实现从左到右的瀑布流，这种方式可以做到先从左到右，再从上到下显示。然而该方法需要预先设定flex容器的高度，且调整页面大小时会出现一些间距过大的问题，在此基础上出现了一种新的解决方案，即当列表改变时，动态计算flex所需高度，但是该方案整体上的每列数量还是按列平均分布的，并未进行填充，并且每加入一个元素都会触发一次响应式的渲染，在渲染结束后还需要重新获取列高度，再执行一个元素***，整体耗时较久。

综上，如何在渲染之前完成列内容的排列，使得页面显示更均匀，提高用户体验是目前有待解决的问题。

发明内容

有鉴于此，本发明的目的在于提供一种页面显示方法、装置、设备及存储介质，能够只进行一次渲染，并且在渲染之前完成列内容的排列，使得页面显示更均匀，提高用户体验。其具体方案如下：

第一方面，本申请公开了一种页面显示方法，包括：

获取用于展示多个子元素的当前页面的每一列的高度，以得到最长列的高度与最短列的高度；其中，所述最长列的高度与所述最短列的高度为通过该列所有所述子元素的高度之和确定出的高度；

当监测到所述当前页面满足预设循环判断条件，则确定出当前所述最长列的高度与当前所述最短列的高度之间的高度差，并循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度；

若所述高度差大于所述末尾子元素的高度，则将所述末尾子元素转移至当前所述最短列，并重复所述当监测到所述当前页面满足预设循环判断条件的步骤直到所述高度差不大于所述末尾子元素的高度，然后对当前页面进行渲染以生成相应的显示页面。

可选的，所述获取用于展示多个子元素的当前页面的每一列的高度，包括：

基于网格布局将当前页面的多个子元素进行分列，并利用预设高度确定规则确定出每个所述子元素的高度；

根据所述子元素的排列索引将每一列包括的所述子元素的所述高度进行求和，以确定出当前页面的每一列的高度。

可选的，所述利用预设高度确定规则确定出每个所述子元素的高度，包括：

利用预设高度确定规则确定出每个所述子元素的固定高度和可变高度，并将所述固定高度与所述可变高度进行求和，以确定出每个所述子元素的高度；其中，所述固定高度为由所述子元素内部中除元素名称以外的其他内部元素高度确定出的高度；所述可变高度为通过canvas图形容器的预设字宽获取方法获取所述元素名称中的字符串宽度，并基于所述字符串宽度确定出的所述元素名称的文本块高度。

可选的，所述循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度之前，还包括：

根据所述子元素的数量和所述子元素的列数确定出最大循环次数，以基于所述最大循环次数循环判断所述高度差是否大于在所述最长列中末尾子元素的高度。

可选的，所述对当前页面进行渲染以生成相应的显示页面，包括：

利用与所述子元素对应的解释文件与样式文件对当前页面进行渲染以生成相应的显示页面。

可选的，所述对当前页面进行渲染以生成相应的显示页面之前，还包括：

将所述子元素以二维数组的形式进行存储，以便根据所述子元素在所述二维数组中的位置对当前页面进行渲染。

可选的，所述对当前页面进行渲染以生成相应的显示页面之后，还包括：

在所述当前页面底部设置一个观察元素，并监测所述观察元素与交互界面底部之间的距离，当所述距离达到预设阈值时，则触发所述获取用于展示多个子元素的当前页面的每一列的高度的步骤。

第二方面，本申请公开了一种页面显示装置，包括：

高度获取模块，用于获取用于展示多个子元素的当前页面的每一列的高度，以得到最长列的高度与最短列的高度；其中，所述最长列的高度与所述最短列的高度为通过该列所有所述子元素的高度之和确定出的高度；

循环判断模块，用于当监测到所述当前页面满足预设循环判断条件，则确定出当前所述最长列的高度与当前所述最短列的高度之间的高度差，并循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度；

页面渲染模块，用于若所述高度差大于所述末尾子元素的高度，则将所述末尾子元素转移至当前所述最短列，并重复所述当监测到所述当前页面满足预设循环判断条件的步骤直到所述高度差不大于所述末尾子元素的高度，然后对当前页面进行渲染以生成相应的显示页面。

第三方面，本申请公开了一种电子设备，包括：

存储器，用于保存计算机程序；

处理器，用于执行所述计算机程序，以实现前述的页面显示方法。

第四方面，本申请公开了一种计算机可读存储介质，用于存储计算机程序；其中所述计算机程序被处理器执行时实现如前所述的页面显示方法。

本申请中，首先获取用于展示多个子元素的当前页面的每一列的高度，以得到最长列的高度与最短列的高度；其中，所述最长列的高度与所述最短列的高度为通过该列所有所述子元素的高度之和确定出的高度；当监测到所述当前页面满足预设循环判断条件，则确定出当前所述最长列的高度与当前所述最短列的高度之间的高度差，并循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度；若所述高度差大于所述末尾子元素的高度，则将所述末尾子元素转移至当前所述最短列，并重复所述当监测到所述当前页面满足预设循环判断条件的步骤直到所述高度差不大于所述末尾子元素的高度，然后对当前页面进行渲染以生成相应的显示页面。可见，首先确定出当前显示页面中最长列与最短列的高度，然后当监测到当前页面满足预设循环判断条件时，根据最长列与最短列的高度差和最长列中末尾子元素的高度的大小关系对当前页面中的各列进行循环判断，实现对子元素的移列，直到当前页面的最长列与最短列的高度差不大于末尾子元素的高度则跳出循环，从而在页面渲染之前完成列内容的排列，即每一个数据请求无论请求到几条数据，都是一次渲染，从而使得用户可以快速浏览显示页面，节省时间；同时实现了最长列与最短列的高度差不大于一个子元素的高度，使得页面显示更均匀，提高了用户体验。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1为本申请公开的一种页面显示方法流程图；

图2为本申请公开的一种具体的子元素存储方式示意图；

图3为本申请公开的一种具体的页面显示分列排布示意图；

图4为本申请公开的一种具体的页面显示方法流程图；

图5为本申请公开的一种页面显示装置结构示意图；

图6为本申请公开的一种电子设备结构图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

当前，在以瀑布流的形式显示页面时每列数量按列平均分布，并未进行填充，并且每加入一个元素都会触发一次响应式的渲染，在渲染结束后还需要重新获取列高度，再执行一个元素***，整体耗时较久。

为此，本申请提供了一种页面显示方案，能够只进行一次渲染，并且在渲染之前完成列内容的排列，使得页面显示更均匀，提高用户体验。

本发明实施例公开了一种页面显示方法，参见图1所示，该方法包括：

步骤S11：获取用于展示多个子元素的当前页面的每一列的高度，以得到最长列的高度与最短列的高度；其中，所述最长列的高度与所述最短列的高度为通过该列所有所述子元素的高度之和确定出的高度。

本申请实施例中，当前页面用于展示多个子元素，每一列的高度均由每一列包含的每个子元素的高度之和确定，在具体的实施例中，多个子元素可以代表多个商品卡片，而用于展示商品卡片的多个页面总长的一列的高度=该列所有商品卡片的高度之和。本实施例中仅以页面中的子元素具体为商品卡片为例进行介绍，其他内容的子元素均可参照本实施例的介绍，在此不再赘述。

本实施例对如何确定每一列的总高度不做限定，根据实际情况进行设置即可，例如可以根据每列的商品卡片排列索引通过js（Javascript，一种脚本语言）计算该列的总高度，也可以获取截止当前商品卡片该列的列高进行冗余计算，即当前列高=上一次该列高度+该列当前商品卡片的高度，直至当前商品卡片为该列最后一个商品卡片；每个商品卡片的高度可以为上一商品卡片的底边至同列下一商品卡片的顶边的距离。当获取到当前页面的每一列高度后则可以通过对每一列高度的比较确定出最长列的高度和最短列的高度。

步骤S12：当监测到所述当前页面满足预设循环判断条件，则确定出当前所述最长列的高度与当前所述最短列的高度之间的高度差，并循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度。

本申请实施例中，因为页面涉及到分页，所以在分页时最长列会存在新增元素，此时的当前页面满足预设循环判断条件。若最长列本次没有新增元素，则跳出循环；否则，获得当前最长列高度和当前最短列高度，计算当前最长列高度与当前最短列高度的高度差，并循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度。

在一种具体实施方式中，每一个瀑布流对应的页面是一个组件，为了在页面显示时可以使瀑布流能继续向下滑动，在所述当前页面底部设置一个观察元素，并监测所述观察元素与交互界面底部之间的距离，当所述距离达到预设阈值时，则触发所述获取用于展示多个子元素的当前页面的每一列的高度的步骤。也即，当观察元素与交互界面底部的距离达到预设阈值时，瀑布流能继续向下滑动，出现了新增元素，所以此时满足预设循环判断条件，进入循环。例如，利用createIntersectionObserver方法对该元素进行监听，每当该观察元素距离当前交互界面底部距离200px时，触发监听回调，请求数据渲染，使瀑布流能继续往下滑动。

需要指出的是，交互界面底部是静止的（即手机底部），页面底部是动态的（随数据往下不断延伸直至数据加载完毕）。

步骤S13：若所述高度差大于所述末尾子元素的高度，则将所述末尾子元素转移至当前所述最短列，并重复所述当监测到所述当前页面满足预设循环判断条件的步骤直到所述高度差不大于所述末尾子元素的高度，然后对当前页面进行渲染以生成相应的显示页面。

本申请实施例中，若高度差大于最长列的末尾元素的高度（末尾的商品卡片高度），则将最长列的末尾子元素移入最短列的末尾，即在高度差超过最长列末尾商品卡片的高度时，将该商品卡片移动至最短列。此时更新当前最长列高度=原最长列高度-最长列末尾元素高度；当前最短列高度=原最短列高度+最长列末尾元素高度，循环继续；否则跳出循环，此时的高度差不大于末尾子元素的高度，页面的显示更加均匀，解决页面显示不均匀的问题。

本申请实施例中，所述对当前页面进行渲染以生成相应的显示页面，包括：利用与所述子元素对应的解释文件与样式文件对当前页面进行渲染以生成相应的显示页面。可以理解的是，子元素为商品卡片时，每个商品卡片都对应各自的有关商品内容的解释文件以及样式文件，当获取依据上述步骤处理后的n列的多个商品卡片和预存的解释文件及样式文件对页面进行渲染后，生成对应的显示页面。

本申请实施例中，所述子元素以二维数组的形式进行存储，如此一来，可以根据所述子元素在所述二维数组中的位置并利用所述预置文件对当前页面进行渲染。在一种具体实施例中，使用二维数组进行数据存储时，第一个维度可以为列维度，第二个维度可以为子元素维度，可以理解的是，当子元素为商品卡片时，在处理前后具体的商品卡片在二维数组中的位置可能发生变更。如图2所示，A、B、C代表列维度中的三列，每一行与列维度可能会对应一个子元素，图2中原先在第A列的第2个商品卡片移动至第B列的第3个商品卡片位置，即A2的位置由（2，A）变为（3，B），同时每一商品卡片的高度也通过该脚本计算后完成了数据填充。

进一步的，如图3所示，为将以二维数组对数据进行存储的存储方式应用到具体的页面显示分列，设定长侧高度=当前最长列高度-最长列末尾元素高度，即图示中用于展示商品卡片的n个页面总长最长的一列的高度-该列末尾元素的高度；设定短侧高度=图示中用于展示商品卡片的n个页面总长最短的一列的高度。对于每次不同的循环，上一循环的最长列和当前循环的最长列可能不是同一列，但是最长列末尾元素（最长列末尾的商品卡片）必定是n列中的每一列末尾元素中的一个。比如说这边有三列，每一列三个元素，但中间这个最短列因为包含的子元素的高度都比较小所以底部空了一大段，所以要把最长列这个末尾子元素移过去，也即，将最长列的最后一个商品卡片移到最短列。

本申请中，首先获取用于展示多个子元素的当前页面的每一列的高度，以得到最长列的高度与最短列的高度；其中，所述最长列的高度与所述最短列的高度为通过该列所有所述子元素的高度之和确定出的高度；当监测到所述当前页面满足预设循环判断条件，则确定出当前所述最长列的高度与当前所述最短列的高度之间的高度差，并循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度；若所述高度差大于所述末尾子元素的高度，则将所述末尾子元素转移至当前所述最短列，并重复所述当监测到所述当前页面满足预设循环判断条件的步骤直到所述高度差不大于所述末尾子元素的高度，然后对当前页面进行渲染以生成相应的显示页面。可见，首先确定出当前显示页面中最长列与最短列的高度，然后当监测到当前页面满足预设循环判断条件时，根据最长列与最短列的高度差和最长列中末尾子元素的高度的大小关系对当前页面中的各列进行循环判断，实现对子元素的移列，直到当前页面的最长列与最短列的高度差不大于末尾子元素的高度则跳出循环，从而在页面渲染之前完成列内容的排列，即每一个数据请求无论请求到几条数据，都是一次渲染，从而使得用户可以快速浏览显示页面，节省时间；同时实现了最长列与最短列的高度差不大于一个子元素的高度，使得页面显示更均匀，提高了用户体验。

本申请实施例公开了一种具体的页面显示方法，参见图4所示，该方法包括：

步骤S21：基于网格布局将当前页面的多个子元素进行分列，并利用预设高度确定规则确定出每个所述子元素的高度。

网格布局（Grid）是最强大的CSS（Cascading Style Sheets，层叠样式表）布局方案，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。本申请实施例中，基于网格布局将当前页面的多个子元素进行分列，并利用预设高度确定规则确定出每个所述子元素的高度。

需要指出的是，所述利用预设高度确定规则确定出每个所述子元素的高度，包括：利用预设高度确定规则确定出每个所述子元素的固定高度和可变高度，并将所述固定高度与所述可变高度进行求和，以确定出每个所述子元素的高度；其中，所述固定高度为由所述子元素内部中除元素名称以外的其他内部元素高度确定出的高度；所述可变高度为通过canvas图形容器的预设字宽获取方法获取所述元素名称中的字符串宽度，并基于所述字符串宽度确定出的所述元素名称的文本块高度。

本申请实施例中，每个子元素内部包括不同的内部元素，每一子元素的高度=固定高度+可变高度。其中，固定高度=子元素内部元素包括但不限于商品图片高度、商品价格高度、商品描述高度、还有会员折扣和活动标签等的高度，可通过预设或用户自定义或判断有无后确定确切高度得到；具体的，需要判断子元素内部的每一个内部元素的高度并把它们相加，其中包括内部元素中除元素名称外的其他内部元素本身的外边距、内边距以及边线宽度。因为每个子元素内部除商品名称外的其他内部元素如：由商品图片的差异性导致内外边距不同，进而使每个子元素不等高，通常情况下为了保证图片正常显示不变形，默认已设条件商品卡片（子元素）是不等高的。

可变高度在本实施例中主要为商品名称的高度，通过计算承载该商品名称的文本块高度得到。商品名称的字符串长短影响了商品名称在商品卡片中的高度，本实施例通过把字符串渲染在canvas图形容器上计算文本块的高度得到每一商品名称对应的可变高度。具体地，在遇到文本换行的情况时，因为文本存在数字、空格、英文字母、汉字等，不同的字符有不同的字宽，一般无法通过字符串的长度来计算文本块的高度，所以在页面上放一个隐藏的canvas画布，直接把字符串渲染在canvas上，通过canvas图形容器的预设字宽获取方法如measureText方法获得字符串的宽度，其中文本块的宽度和行高是已知的，所以利用Math.ceil函数获得文本块的高度，具体为文本块高度=Math.ceil(字符串宽度/文本块宽度)*行高。

步骤S22：根据所述子元素的排列索引将每一列包括的所述子元素的所述高度进行求和，以确定出当前页面的每一列的高度。

本申请实施例中，当遍历所有的商品卡片，并利用canvas进行少量预渲染得到商品名称的文本块高度后，再根据所有商品卡片的高度和每列的排列索引得到每列的高度。

步骤S23：当监测到所述当前页面满足预设循环判断条件，则确定出当前所述最长列的高度与当前所述最短列的高度之间的高度差，并根据所述子元素的数量和所述子元素的列数确定出最大循环次数，以基于所述最大循环次数循环判断所述高度差是否大于在所述最长列中末尾子元素的高度。

本申请实施例中，在进行循环判断时，最大循环次数=Math.ceil((子元素总数量/列数)-1)*(列数-1)，即通过子元素的数量和子元素的列数确定出最大循环次数，以基于所述最大循环次数循环判断所述高度差是否大于在所述最长列中末尾子元素的高度。

需要指出的是，页面存在新增元素时，也即当前页面满足预设循环判断条件，由于列数是确定的，也就是说，每循环一次是做一次判断，每一次循环需要获取的是各列间的最大高度差，作为循环判断输入的商品卡片的数量是确定的，程序会在每一次获取分页数据后，进行一轮这样的循环判断。

步骤S24：若所述高度差大于所述末尾子元素的高度，则将所述末尾子元素转移至当前所述最短列，并重复所述当监测到所述当前页面满足预设循环判断条件的步骤直到所述高度差不大于所述末尾子元素的高度，然后对当前页面进行渲染以生成相应的显示页面。

其中，关于上述步骤S24更加具体的处理过程可以参考前述实施例中公开的相应内容，在此不再进行赘述。

本申请中，首先基于网格布局将当前页面的多个子元素进行分列，并利用预设高度确定规则确定出每个所述子元素的高度；根据所述子元素的排列索引将每一列包括的所述子元素的所述高度进行求和，以确定出当前页面的每一列的高度；当监测到所述当前页面满足预设循环判断条件，则确定出当前所述最长列的高度与当前所述最短列的高度之间的高度差，并根据所述子元素的数量和所述子元素的列数确定出最大循环次数，以基于所述最大循环次数循环判断所述高度差是否大于在所述最长列中末尾子元素的高度；若所述高度差大于所述末尾子元素的高度，则将所述末尾子元素转移至当前所述最短列，并重复所述当监测到所述当前页面满足预设循环判断条件的步骤直到所述高度差不大于所述末尾子元素的高度，然后对当前页面进行渲染以生成相应的显示页面。可见，首先确定出当前显示页面中最长列与最短列的高度，然后当监测到当前页面满足预设循环判断条件时，根据最长列与最短列的高度差和最长列中末尾子元素的高度的大小关系对当前页面中的各列进行循环判断，实现对子元素的移列，直到当前页面的最长列与最短列的高度差不大于末尾子元素的高度则跳出循环，从而在页面渲染之前完成列内容的排列，即每一个数据请求无论请求到几条数据，都是一次渲染，从而使得用户可以快速浏览显示页面，节省时间；同时实现了最长列与最短列的高度差不大于一个子元素的高度，使得页面显示更均匀，提高了用户体验。

相应的，本申请实施例还公开了一种页面显示装置，参见图5所示，该装置包括：

高度获取模块11，用于获取用于展示多个子元素的当前页面的每一列的高度，以得到最长列的高度与最短列的高度；其中，所述最长列的高度与所述最短列的高度为通过该列所有所述子元素的高度之和确定出的高度；

循环判断模块12，用于当监测到所述当前页面满足预设循环判断条件，则确定出当前所述最长列的高度与当前所述最短列的高度之间的高度差，并循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度；

页面渲染模块13，用于若所述高度差大于所述末尾子元素的高度，则将所述末尾子元素转移至当前所述最短列，并重复所述当监测到所述当前页面满足预设循环判断条件的步骤直到所述高度差不大于所述末尾子元素的高度，然后对当前页面进行渲染以生成相应的显示页面。

其中，关于上述各个模块更加具体的工作过程可以参考前述实施例中公开的相应内容，在此不再进行赘述。

由此可见，通过本实施例的上述方案，首先获取用于展示多个子元素的当前页面的每一列的高度，以得到最长列的高度与最短列的高度；其中，所述最长列的高度与所述最短列的高度为通过该列所有所述子元素的高度之和确定出的高度；当监测到所述当前页面满足预设循环判断条件，则确定出当前所述最长列的高度与当前所述最短列的高度之间的高度差，并循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度；若所述高度差大于所述末尾子元素的高度，则将所述末尾子元素转移至当前所述最短列，并重复所述当监测到所述当前页面满足预设循环判断条件的步骤直到所述高度差不大于所述末尾子元素的高度，然后对当前页面进行渲染以生成相应的显示页面。可见，首先确定出当前显示页面中最长列与最短列的高度，然后当监测到当前页面满足预设循环判断条件时，根据最长列与最短列的高度差和最长列中末尾子元素的高度的大小关系对当前页面中的各列进行循环判断，实现对子元素的移列，直到当前页面的最长列与最短列的高度差不大于末尾子元素的高度则跳出循环，从而在页面渲染之前完成列内容的排列，即每一个数据请求无论请求到几条数据，都是一次渲染，从而使得用户可以快速浏览显示页面，节省时间；同时实现了最长列与最短列的高度差不大于一个子元素的高度，使得页面显示更均匀，提高了用户体验。

进一步的，本申请实施例还公开了一种电子设备，图6是根据一示例性实施例示出的电子设备20结构图，图中内容不能认为是对本申请的使用范围的任何限制。

图6为本申请实施例提供的一种电子设备20的结构示意图。该电子设备20，具体可以包括：至少一个处理器21、至少一个存储器22、电源23、通信接口24、输入输出接口25和通信总线26。其中，所述存储器22用于存储计算机程序，所述计算机程序由所述处理器21加载并执行，以实现前述任一实施例公开的页面显示方法中的相关步骤。另外，本实施例中的电子设备20具体可以为计算机。

本实施例中，电源23用于为电子设备20上的各硬件设备提供工作电压；通信接口24能够为电子设备20创建与外界设备之间的数据传输通道，其所遵循的通信协议是能够适用于本申请技术方案的任意通信协议，在此不对其进行具体限定；输入输出接口25，用于获取外界输入数据或向外界输出数据，其具体的接口类型可以根据具体应用需要进行选取，在此不进行具体限定。

另外，存储器22作为资源存储的载体，可以是只读存储器、随机存储器、磁盘或者光盘等，其上所存储的资源可以包括操作***221、计算机程序222及数据223等，数据223可以包括各种各样的数据。存储方式可以是短暂存储或者永久存储。

其中，操作***221用于管理与控制电子设备20上的各硬件设备以及计算机程序222，其可以是Windows Server、Netware、Unix、Linux等。计算机程序222除了包括能够用于完成前述任一实施例公开的由电子设备20执行的页面显示方法的计算机程序之外，还可以进一步包括能够用于完成其他特定工作的计算机程序。

进一步的，本申请实施例还公开了一种计算机可读存储介质，这里所说的计算机可读存储介质包括随机存取存储器(Random Access Memory，RAM)、内存、只读存储器(Read-Only Memory，ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、磁碟或者光盘或技术领域内所公知的任意其他形式的存储介质。其中，所述计算机程序被处理器执行时实现前述页面显示方法。关于该方法的具体步骤可以参考前述实施例中公开的相应内容，在此不再进行赘述。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

结合本文中所公开的实施例描述的页面显示或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器（RAM）、内存、只读存储器（ROM）、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上对本发明所提供的一种页面显示方法、装置、设备及存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (10)

1.一种页面显示方法，其特征在于，包括：

获取用于展示多个子元素的当前页面的每一列的高度，以得到最长列的高度与最短列的高度；其中，所述最长列的高度与所述最短列的高度为通过该列所有所述子元素的高度之和确定出的高度；

当监测到所述当前页面满足预设循环判断条件，则确定出当前所述最长列的高度与当前所述最短列的高度之间的高度差，并循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度；

若所述高度差大于所述末尾子元素的高度，则将所述末尾子元素转移至当前所述最短列，并重复所述当监测到所述当前页面满足预设循环判断条件的步骤直到所述高度差不大于所述末尾子元素的高度，然后对当前页面进行渲染以生成相应的显示页面。

2.根据权利要求1所述的页面显示方法，其特征在于，所述获取用于展示多个子元素的当前页面的每一列的高度，包括：

基于网格布局将当前页面的多个子元素进行分列，并利用预设高度确定规则确定出每个所述子元素的高度；

根据所述子元素的排列索引将每一列包括的所述子元素的所述高度进行求和，以确定出当前页面的每一列的高度。

3.根据权利要求2所述的页面显示方法，其特征在于，所述利用预设高度确定规则确定出每个所述子元素的高度，包括：

利用预设高度确定规则确定出每个所述子元素的固定高度和可变高度，并将所述固定高度与所述可变高度进行求和，以确定出每个所述子元素的高度；其中，所述固定高度为由所述子元素内部中除元素名称以外的其他内部元素高度确定出的高度；所述可变高度为通过canvas图形容器的预设字宽获取方法获取所述元素名称中的字符串宽度，并基于所述字符串宽度确定出的所述元素名称的文本块高度。

4.根据权利要求1所述的页面显示方法，其特征在于，所述循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度之前，还包括：

根据所述子元素的数量和所述子元素的列数确定出最大循环次数，以基于所述最大循环次数循环判断所述高度差是否大于在所述最长列中末尾子元素的高度。

5.根据权利要求1所述的页面显示方法，其特征在于，所述对当前页面进行渲染以生成相应的显示页面，包括：

利用与所述子元素对应的解释文件与样式文件对当前页面进行渲染以生成相应的显示页面。

6.根据权利要求1所述的页面显示方法，其特征在于，所述对当前页面进行渲染以生成相应的显示页面之前，还包括：

将所述子元素以二维数组的形式进行存储，以便根据所述子元素在所述二维数组中的位置对当前页面进行渲染。

7.根据权利要求1至6任一项所述的页面显示方法，其特征在于，所述对当前页面进行渲染以生成相应的显示页面之后，还包括：

在所述当前页面底部设置一个观察元素，并监测所述观察元素与交互界面底部之间的距离，当所述距离达到预设阈值时，则触发所述获取用于展示多个子元素的当前页面的每一列的高度的步骤。

8.一种页面显示装置，其特征在于，包括：

高度获取模块，用于获取用于展示多个子元素的当前页面的每一列的高度，以得到最长列的高度与最短列的高度；其中，所述最长列的高度与所述最短列的高度为通过该列所有所述子元素的高度之和确定出的高度；

循环判断模块，用于当监测到所述当前页面满足预设循环判断条件，则确定出当前所述最长列的高度与当前所述最短列的高度之间的高度差，并循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度；

页面渲染模块，用于若所述高度差大于所述末尾子元素的高度，则将所述末尾子元素转移至当前所述最短列，并重复所述当监测到所述当前页面满足预设循环判断条件的步骤直到所述高度差不大于所述末尾子元素的高度，然后对当前页面进行渲染以生成相应的显示页面。

9.一种电子设备，其特征在于，包括：

存储器，用于保存计算机程序；

处理器，用于执行所述计算机程序，以实现权利要求1至7任一项所述的页面显示方法。

10.一种计算机可读存储介质，其特征在于，用于存储计算机程序；其中所述计算机程序被处理器执行时实现如权利要求1至7任一项所述的页面显示方法。

Images