基于流式布局的页面展示方法、电子设备及存储介质技术

本发明专利技术公开了一种基于流式布局的页面展示方法、电子设备及存储介质。方法包括：获取当前待展示的展示元素的宽度；确定已创建的各个展示行的有效剩余宽度；识别第一类展示行以及第二类展示行，第一类展示行为非最后创建的展示行，第二类展示行为最后创建的展示行；判断第一类展示行中是否存在有效剩余宽度大于或等于当前待展示的展示元素的目标展示行；若是，从目标展示行中确定当前待展示的展示元素的展示位置；若否，判断第二类展示行是否为目标展示行，若是从目标展示行中确定当前待展示的展示元素的展示位置，若否，在新的展示行中确定当前待展示的展示元素的展示位置。采用本方案，能够减少页面资源的浪费，提升页面空间的利用率。的利用率。的利用率。

【技术实现步骤摘要】
基于流式布局的页面展示方法、电子设备及存储介质


[0001]本专利技术涉及页面显示
，具体涉及一种基于流式布局的页面展示方法、电子设备及存储介质。

技术介绍

[0002]随着科技及社会的不断发展，流式布局以其能够适配不同尺寸的显示设备等特点，而被广泛应用于互联网产品的页面显示中。
[0003]现有技术中基于流式布局的页面展示方法为：将展示元素从左至右、从上至下依次渲染，其中，若当前展示行不足以容纳待展示的展示元素，在新的展示行中渲染该展示元素。以图1为例，依次对展示元素1
‑
9进行渲染，在第一个展示行渲染展示元素1及2之后，由于第一个展示行无法再容纳展示元素3，则在第二个展示行中渲染展示元素3及展示元素4，依次类推，直至完成展示元素9的渲染。
[0004]然而，专利技术人在实施过程中发现，现有技术中存在如下缺陷：如图1所示，该页面中的展示行右侧存在较多的空闲展示区域，由此现有技术中基于流式布局的页面展示方案会造成较多的页面资源的浪费，页面空间利用率低。

技术实现思路

[0005]鉴于上述问本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于流式布局的页面展示方法，包括：获取当前待展示的展示元素的宽度；确定已创建的各个展示行的有效剩余宽度；从所述展示行中识别出当前的第一类展示行以及第二类展示行；其中，所述第一类展示行为非最后创建的展示行，所述第二类展示行为最后创建的展示行；判断第一类展示行中是否存在目标展示行；其中，所述目标展示行的有效剩余宽度大于或等于所述当前待展示的展示元素的宽度；若是，从所述目标展示行中确定所述当前待展示的展示元素的展示位置；若否，判断第二类展示行是否为目标展示行；若所述第二类展示行为目标展示行，则从所述目标展示行中确定所述当前待展示的展示元素的展示位置；若所述第二类展示行不是目标展示行，则创建新的展示行，在所述新的展示行中确定所述当前待展示的展示元素的展示位置。2.根据权利要求1所述的方法，其中，所述判断第一类展示行中是否存在目标展示行进一步包括：按照第一类展示行的创建时间的先后顺序，依次遍历第一类展示行；判断当前遍历的第一类展示行的有效剩余宽度是否大于或等于所述当前待展示的展示元素的宽度；若是，则将当前遍历的第一类展示行作为目标展示行；若否，则遍历下一第一类展示行，并执行所述判断当前遍历的第一类展示行的有效剩余宽度是否大于或等于所述当前待展示的展示元素的宽度的步骤。3.根据权利要求1或2所述的方法，其中，所述确定已创建的各个展示行的有效剩余宽度进一步包括：针对于任一已创建的展示行，确定该展示行中最后一个确定展示位置的目标展示元素；计算目标展示元素的第一边与页面的第一边的第一间距，以及获取配置的第二间距以及第三间距；其中，所述第二间距为相邻两个展示元素之间的间距，所述第三间距为展示元素的第一边与页面的第一边的最小间距；则该展示行的有效剩余宽度为，第一间距
‑
(第二间距+第三间距)。4.根据权利要求1
‑
3中任一项所述的方法，其中，在确定出各个展示元素的展示位置之后，所述方法还包括：针对于任一展示行，确定该展示行中最后一个确定展示位置的目标展示元素；计算目标展示元素的第一边与页面的第一边的第一间距，以及获取配置的第三间距；其中，所述第三间距为展示元素的第一边与页面的第一边的最小间距；计算所述第一间距与所述第三间距的差值；根据所述差值对该展示行中至少一个展示元素的宽度进行修正，并确定出修正处理后该展示行中各个展示元素的修正展示位置；其中，在修正处理后该展示行中第一间距与第三间距的修正后差值为预设差值。5.根据权利要求4所述的方法，其中，所述根据所述差值对该展示行中至少一个展示元素的宽度进行修正进一步包括：
判断所述差值是否小于预设阈值；若是，确定该展示行为第三类展示行，并根据所述差值对该展示行中至少一...

【专利技术属性】
技术研发人员：马东强，
申请(专利权)人：掌阅科技股份有限公司，
类型：发明
国别省市：