瀑布流拓展方法、装置、设备及存储介质制造方法及图纸

本申请涉及网络购物技术领域，特别是涉及到一种瀑布流拓展方法、装置、设备及存储介质，应用于金融商品页面内容获取和排布。通过获取瀑布流页面各列的高度，将待插入的元素数据插入到所述高度最小的列，防止瀑布流页面中出现个别元素数据列高度明显小于其他元素数据列高度的现象。若获取的元素数据为非瀑布流元素数据，可以通过获取非瀑布流元素数据在HTML模板上的槽属性，关联具名插槽，在瀑布流页面中查找具名插槽对应的列，实现了在瀑布流页面中插入非瀑布流的内容，拓展了瀑布流页面的元素数据内容。数据内容。数据内容。

【技术实现步骤摘要】
瀑布流拓展方法、装置、设备及存储介质


[0001]本申请涉及网络购物
，特别是涉及到一种瀑布流拓展方法、装置、设备及存储介质。

技术介绍

[0002]瀑布流又称瀑布流式布局，是一种多列等宽不等高的一种页面布局方式。瀑布流现在多数用在电商相关的网站上使用，视觉表现为参差不齐的多栏布局。是一种允许用户不断往下滑动，页面自动刷新呈现内容的交互形式。当用户在金融商品页面进行网络购物时，通过下滑商品页面，获取更多金融商品信息。瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。这种展示方式可以使页面比较美观，让人有种错落有致的感觉。随着页面滚动条向下滚动，这种布局会不断加载数据并附加至当前的尾部。瀑布流的实现方式都是从左到右，一排完成后，再完成下一排，这种情况会导致某一列的数据特别短。并且现有技术的瀑布流仅支持纯瀑布流的展示，如果在瀑布流中插入非瀑布流的内容则是不支持的。

技术实现思路

[0003]本申请的主要目的为提供一种瀑布流拓展方法、装置、设备及存储介质，旨在解决现有技术中常规瀑布流排列方式导致页面某些展示列的高度明显短于其他列的技术问题。
[0004]为了实现上述专利技术目的，本申请提出一种瀑布流拓展方法，所述方法包括：
[0005]获取元素数据；
[0006]获取瀑布流页面各列的高度，比较所述高度，得到高度最小的列；
[0007]将所述元素数据插入到所述高度最小的列。
[0008]进一步地，所述获取元素数据之后，包括：r/>[0009]判断所述元素数据是否为瀑布流元素数据；
[0010]若否，则获取所述元素数据在HTML模板上的槽属性，关联具名插槽，所述元素数据作为所述具名插槽的内容。
[0011]进一步地，所述若否，则根据所述元素数据HTML模板上的槽属性关联具名插槽，所述元素数据作为所述具名插槽的内容之后，包括：
[0012]判断瀑布流页面各列中是否有所述具名插槽对应的列；
[0013]若有，则将所述具名插槽的内容插入到所述对应列的置顶位置。
[0014]进一步地，所述将所述元素数据插入到所述高度最小的列之后，包括：
[0015]获取所述瀑布流页面的滚动高度、瀑布流页面的可视区域高度和高度最小的列的高度；
[0016]判断所述高度最小的列的高度减去所述滚动高度的值是否小于所述可视区域高度的指定倍数；
[0017]若是，则继续渲染元素数据。
[0018]进一步地，所述获取元素数据之前，包括：
[0019]获取已渲染的元素数据个数、瀑布流页面的可视区域可以展示的预估元素个数和已请求到的元素数据个数；
[0020]判断渲染的元素数据个数加上瀑布流页面的可视区域可以展示的预估元素个数是否大于已请求到的元素数据个数；
[0021]若是，则执行获取元素数据的指令。
[0022]进一步地，所述获取瀑布流页面各列的高度，比较所述高度，得到高度最小的列，包括：
[0023]对所述瀑布流页面各列定义一个ref属性，通过所述ref属性获取所述瀑布流页面各列的高度；
[0024]比较所述瀑布流页面各列的高度，得到高度最小的列。
[0025]本申请提供一种瀑布流拓展装置，所述装置包括：
[0026]元素获取模块，用于获取元素数据；
[0027]列高度确定模块，用于获取瀑布流页面各列的高度，比较所述高度，得到高度最小的列；
[0028]元素插入模块，用于将所述元素数据插入到所述高度最小的列。
[0029]进一步地，所述瀑布流拓展装置，所述装置包括：
[0030]非瀑布流元素数据处理模块，用于判断所述元素数据是否为瀑布流元素数据；若否，则获取所述元素数据在HTML模板上的槽属性，关联具名插槽，所述元素数据作为所述具名插槽的内容。
[0031]本申请还提供一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现上述任一项所述方法的步骤。
[0032]本申请还提供一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现上述任一项所述的方法的步骤。
[0033]本申请提供的一种瀑布流拓展方法，通过获取瀑布流页面各列的高度，将待插入的元素数据插入到所述高度最小的列，防止瀑布流页面中出现个别元素数据列高度明显小于其他元素数据列高度的现象。若获取的元素数据为非瀑布流元素数据，可以通过获取非瀑布流元素数据在HTML模板上的槽属性，关联具名插槽，在瀑布流页面中查找具名插槽对应的列，实现了在瀑布流页面中插入非瀑布流的内容，拓展了瀑布流页面的元素数据内容。
附图说明
[0034]图1为本申请一实施例的瀑布流拓展方法的流程示意图；
[0035]图2为本申请一实施例的瀑布流拓展方法的流程示意图；
[0036]图3为本申请一实施例的瀑布流拓展装置的结构示意框图；
[0037]图4为本申请一实施例的计算机设备的结构示意框图。
[0038]本申请目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
[0039]为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对
本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
[0040]参照图1，本申请实施例中提供一种瀑布流拓展方法，所述方法包括：
[0041]S1、获取元素数据；
[0042]S2、获取瀑布流页面各列的高度，比较所述高度，得到高度最小的列；
[0043]S3、将所述元素数据插入到所述高度最小的列。
[0044]在上述实施例中，通过获取瀑布流页面各列的高度，将待插入的元素数据插入到所述高度最小的列，防止瀑布流页面中出现个别元素数据列高度明显小于其他元素数据列高度的现象。若获取的元素数据为非瀑布流元素数据，可以通过获取非瀑布流元素数据在HTML模板上的槽属性，关联具名插槽，在瀑布流页面中查找具名插槽对应的列，实现了在瀑布流页面中插入非瀑布流的内容，拓展了瀑布流页面的元素数据内容。
[0045]如上述步骤S1所述，获取元素数据。
[0046]具体地，对于步骤S1，元素数据可以通过不同的方式进行展示，例如，列表流、卡片流、瀑布流和Feed流。当瀑布流需要拓展获取数据时，获取到的元素数据可能是瀑布流元素数据，也可能是非瀑布流元素数据。
[0047]如上述步骤S2和S3所述，获取瀑布流页面各列的高度，比较所述高度，得到高度最小的列；将所述元素数据插入到所述高度最小的列。
[0048]具体地，对于步骤S2和S3，瀑布流又称瀑布流式布局，是一种多列等宽不等高的一种页面布局方式，视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动，页面自动刷新呈现内容的交互形式。本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种瀑布流拓展方法，其特征在于，所述方法包括：获取元素数据；获取瀑布流页面各列的高度，比较所述高度，得到高度最小的列；将所述元素数据插入到所述高度最小的列。2.根据权利要求1所述的瀑布流拓展方法，其特征在于，所述获取元素数据之后，包括：判断所述元素数据是否为瀑布流元素数据；若否，则获取所述元素数据在HTML模板上的槽属性，关联具名插槽，所述元素数据作为所述具名插槽的内容。3.根据权利要求2所述的瀑布流拓展方法，其特征在于，所述若否，则根据所述元素数据HTML模板上的槽属性关联具名插槽，所述元素数据作为所述具名插槽的内容之后，包括：判断瀑布流页面各列中是否有所述具名插槽对应的列；若有，则将所述具名插槽的内容插入到所述对应列的置顶位置。4.根据权利要求1所述的瀑布流拓展方法，其特征在于，所述将所述元素数据插入到所述高度最小的列之后，包括：获取所述瀑布流页面的滚动高度、瀑布流页面的可视区域高度和高度最小的列的高度；判断所述高度最小的列的高度减去所述滚动高度的值是否小于所述可视区域高度的指定倍数时；若是，则继续渲染元素数据。5.根据权利要求1所述的瀑布流拓展方法，其特征在于，所述获取元素数据之前，包括：获取已渲染的元素数据个数、瀑布流页面的可视区域可以展示的预估元素个数和已请求到的元素数据个数；判断渲染的元素数据个数加...

【专利技术属性】
技术研发人员：孟东亚，
申请(专利权)人：平安消费金融有限公司，
类型：发明
国别省市：