本申请公开了一种页面显示方法、装置、设备及存储介质，属于计算机技术领域，该方法包括：获取用于展示多个子元素的当前页面的每一列的高度，以得到最长列的高度与最短列的高度；当监测到当前页面满足预设循环判断条件，则确定出当前最长列的高度与当前最短列的高度之间的高度差，并循环判断高度差是否大于在当前所述最长列中末尾子元素的高度；若所述高度差大于所述末尾子元素的高度，则将末尾子元素转移至当前所述最短列，并重复所述当监测到所述当前页面满足预设循环判断条件的步骤直到高度差不大于末尾子元素的高度，然后对当前页面进行渲染以生成相应的显示页面。通过本申请的技术方案，可以使得页面显示更均匀，提高了用户体验。了用户体验。了用户体验。
【技术实现步骤摘要】
一种页面显示方法、装置、设备及存储介质
[0001]本专利技术涉及计算机
，特别涉及一种页面显示方法、装置、设备及存储介质。
技术介绍
[0002]瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，由pinterest.com网站首创，后逐渐在国内流行。它的原理是：先计算出一排能够容纳几列元素，然后寻找各列之中所有元素高度之和的最小者并将新的元素添加到该列上，然后继续寻找所有列的各元素之和的最小者，继续添加至该列上，如此循环下去，直至所有元素均能够按要求排列为止，所以随着页面滚动条向下滚动，这种布局会不断加载数据块并附加至当前尾部。目前，通常是利用flex（Adobe Flex，支持RIA(Rich Internet Applications)的开发和部署的一系列技术组合）结合order（排序）实现从左到右的瀑布流，这种方式可以做到先从左到右，再从上到下显示。然而该方法需要预先设定flex容器的高度，且调整页面大小时会出现一些间距过大的问题，在此基础上出现了一种新的解决方案，即当列表改变时，动态计算flex所需高度，但是该方案整体上的每列数量还是按列平均分布的，并未进行填充，并且每加入一个元素都会触发一次响应式的渲染，在渲染结束后还需要重新获取列高度，再执行一个元素插入，整体耗时较久。
[0003]综上，如何在渲染之前完成列内容的排列，使得页面显示更均匀，提高用户体验是目前有待解决的问题。
技术实现思路
[0004]有鉴于此，本专利技术的目的在于提供一种页面显示方法、装置、设备及存储介质，能够只进行一次渲染，并且在渲染之前完成列内容的排列，使得页面显示更均匀，提高用户体验。其具体方案如下：第一方面，本申请公开了一种页面显示方法，包括：获取用于展示多个子元素的当前页面的每一列的高度，以得到最长列的高度与最短列的高度；其中，所述最长列的高度与所述最短列的高度为通过该列所有所述子元素的高度之和确定出的高度；当监测到所述当前页面满足预设循环判断条件，则确定出当前所述最长列的高度与当前所述最短列的高度之间的高度差，并循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度；若所述高度差大于所述末尾子元素的高度，则将所述末尾子元素转移至当前所述最短列，并重复所述当监测到所述当前页面满足预设循环判断条件的步骤直到所述高度差不大于所述末尾子元素的高度，然后对当前页面进行渲染以生成相应的显示页面。
[0005]可选的，所述获取用于展示多个子元素的当前页面的每一列的高度，包括：基于网格布局将当前页面的多个子元素进行分列，并利用预设高度确定规则确定
出每个所述子元素的高度；根据所述子元素的排列索引将每一列包括的所述子元素的所述高度进行求和，以确定出当前页面的每一列的高度。
[0006]可选的，所述利用预设高度确定规则确定出每个所述子元素的高度，包括：利用预设高度确定规则确定出每个所述子元素的固定高度和可变高度，并将所述固定高度与所述可变高度进行求和，以确定出每个所述子元素的高度；其中，所述固定高度为由所述子元素内部中除元素名称以外的其他内部元素高度确定出的高度；所述可变高度为通过canvas图形容器的预设字宽获取方法获取所述元素名称中的字符串宽度，并基于所述字符串宽度确定出的所述元素名称的文本块高度。
[0007]可选的，所述循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度之前，还包括：根据所述子元素的数量和所述子元素的列数确定出最大循环次数，以基于所述最大循环次数循环判断所述高度差是否大于在所述最长列中末尾子元素的高度。
[0008]可选的，所述对当前页面进行渲染以生成相应的显示页面，包括：利用与所述子元素对应的解释文件与样式文件对当前页面进行渲染以生成相应的显示页面。
[0009]可选的，所述对当前页面进行渲染以生成相应的显示页面之前，还包括：将所述子元素以二维数组的形式进行存储，以便根据所述子元素在所述二维数组中的位置对当前页面进行渲染。
[0010]可选的，所述对当前页面进行渲染以生成相应的显示页面之后，还包括：在所述当前页面底部设置一个观察元素，并监测所述观察元素与交互界面底部之间的距离，当所述距离达到预设阈值时，则触发所述获取用于展示多个子元素的当前页面的每一列的高度的步骤。
[0011]第二方面，本申请公开了一种页面显示装置，包括：高度获取模块，用于获取用于展示多个子元素的当前页面的每一列的高度，以得到最长列的高度与最短列的高度；其中，所述最长列的高度与所述最短列的高度为通过该列所有所述子元素的高度之和确定出的高度；循环判断模块，用于当监测到所述当前页面满足预设循环判断条件，则确定出当前所述最长列的高度与当前所述最短列的高度之间的高度差，并循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度；页面渲染模块，用于若所述高度差大于所述末尾子元素的高度，则将所述末尾子元素转移至当前所述最短列，并重复所述当监测到所述当前页面满足预设循环判断条件的步骤直到所述高度差不大于所述末尾子元素的高度，然后对当前页面进行渲染以生成相应的显示页面。
[0012]第三方面，本申请公开了一种电子设备，包括：存储器，用于保存计算机程序；处理器，用于执行所述计算机程序，以实现前述的页面显示方法。
[0013]第四方面，本申请公开了一种计算机可读存储介质，用于存储计算机程序；其中所述计算机程序被处理器执行时实现如前所述的页面显示方法。
[0014]本申请中，首先获取用于展示多个子元素的当前页面的每一列的高度，以得到最长列的高度与最短列的高度；其中，所述最长列的高度与所述最短列的高度为通过该列所有所述子元素的高度之和确定出的高度；当监测到所述当前页面满足预设循环判断条件，则确定出当前所述最长列的高度与当前所述最短列的高度之间的高度差，并循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度；若所述高度差大于所述末尾子元素的高度，则将所述末尾子元素转移至当前所述最短列，并重复所述当监测到所述当前页面满足预设循环判断条件的步骤直到所述高度差不大于所述末尾子元素的高度，然后对当前页面进行渲染以生成相应的显示页面。可见，首先确定出当前显示页面中最长列与最短列的高度，然后当监测到当前页面满足预设循环判断条件时，根据最长列与最短列的高度差和最长列中末尾子元素的高度的大小关系对当前页面中的各列进行循环判断，实现对子元素的移列，直到当前页面的最长列与最短列的高度差不大于末尾子元素的高度则跳出循环，从而在页面渲染之前完成列内容的排列，即每一个数据请求无论请求到几条数据，都是一次渲染，从而使得用户可以快速浏览显示页面，节省时间；同时实现了最长列与最短列的高度差不大于一个子元素的高度，使得页面显示更均匀，提高了用户体验。
附图说明
[0015]为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的实施例，对于本领域普通技本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种页面显示方法，其特征在于，包括：获取用于展示多个子元素的当前页面的每一列的高度，以得到最长列的高度与最短列的高度；其中，所述最长列的高度与所述最短列的高度为通过该列所有所述子元素的高度之和确定出的高度；当监测到所述当前页面满足预设循环判断条件，则确定出当前所述最长列的高度与当前所述最短列的高度之间的高度差，并循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度；若所述高度差大于所述末尾子元素的高度，则将所述末尾子元素转移至当前所述最短列，并重复所述当监测到所述当前页面满足预设循环判断条件的步骤直到所述高度差不大于所述末尾子元素的高度，然后对当前页面进行渲染以生成相应的显示页面。2.根据权利要求1所述的页面显示方法，其特征在于，所述获取用于展示多个子元素的当前页面的每一列的高度，包括：基于网格布局将当前页面的多个子元素进行分列，并利用预设高度确定规则确定出每个所述子元素的高度；根据所述子元素的排列索引将每一列包括的所述子元素的所述高度进行求和，以确定出当前页面的每一列的高度。3.根据权利要求2所述的页面显示方法，其特征在于，所述利用预设高度确定规则确定出每个所述子元素的高度，包括：利用预设高度确定规则确定出每个所述子元素的固定高度和可变高度，并将所述固定高度与所述可变高度进行求和，以确定出每个所述子元素的高度；其中，所述固定高度为由所述子元素内部中除元素名称以外的其他内部元素高度确定出的高度；所述可变高度为通过canvas图形容器的预设字宽获取方法获取所述元素名称中的字符串宽度，并基于所述字符串宽度确定出的所述元素名称的文本块高度。4.根据权利要求1所述的页面显示方法，其特征在于，所述循环判断所述高度差是否大于在当前所述最长列中末尾子元素的高度之前，还包括：根据所述子元素的数量和所述子元素的列数确定出最大循环次数，以基于所述最大循环次数循环判断所述高度差是否大于在所述最长列中末尾子元素的高度。...
【专利技术属性】
技术研发人员：胡浩泽，黄岗，周圣强，
申请(专利权)人：苏州万店掌网络科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。