一种页面布局方法及装置与流程 专利技术说明

计算;推算;计数设备的制造及其应用技术1.本技术涉及移动互联网通信领域，尤其涉及一种页面布局方法及装置。背景技术：2.瀑布流，又称瀑布流式布局，是比较流行的一种页面布局方式，视觉表现为参差不齐的多列布局。在这种页面布局方式中，随着页面滚动条向下滚动，终端设备按照哪列短排哪列的原则，加载并展示下一页的多列条目。3.然而，上述方法容易导致某一列的高度明显高出另一列一个或多个条目，从而影响用户视觉上的体验感。技术实现要素：4.本技术实施例提供了一种页面布局方法及装置，以最小的变更平衡多个展示列的高低，以实现页面排版的紧凑型布局，并提高用户的视觉体验。5.第一方面，本技术实施例提供了一种页面布局方法，包括：6.获取待调整页面，所述待调整页面中包括多个待调整展示列，每个待调整展示列中包括至少一个条目；7.循环执行从多个待调整展示列中选取最高列和最低列，并在不包含末尾条目的所述最高列的高度大于所述最低列的高度时，将所述末尾条目移动到所述最低列的尾部的步骤，直到不包含末尾条目的所述最高列的高度小于等于所述最低列的高度时停止，获得多个候选展示列；8.基于所述多个候选展示列的末尾至少一个条目的条目高度，以及不包含末尾至少一个条目的所述多个候选展示列的展示列高度，对所述多个候选展示列的末尾至少一个条目进行展示位置调整，获得目标页面。9.本技术基于vue或uni-app的前端开发框架，将调整展示列中条目的页面布局方法封装成vue组件，该组件会先对待调整页面中的多个条目进行简单的分组排列渲染，再将条目数据给到该组件，该组件对多个待调整展示列的末尾条目进行调整，以最小的变更来平衡多个展示列的高低，提高了用户的视觉体验感；并且通过本技术的页面布局方法以实现目标页面的条目紧凑型布局排版，提高了目标页面的美观程度。10.可选地，每个候选展示列中的多个条目是按照条目索引从小到大的顺序排列的。11.可选地，所述基于所述多个候选展示列的末尾条目的条目高度，以及不包含末尾至少一个条目的所述多个候选展示列的展示列高度，对所述多个候选展示列的末尾至少一个条目进行展示位置调整，获得目标页面，包括：12.循环执行基于多个候选展示列的末尾至少一个条目的条目高度，以及不包含末尾至少一个条目的所述多个候选展示列的展示列高度，对所述多个候选展示列的末尾至少一个条目进行展示位置调整的步骤，直到调整后的多个候选展示列不再触发条目冒泡操作，获得目标页面。13.可选地，所述基于所述多个候选展示列的末尾至少一个条目的条目高度，以及不包含末尾至少一个条目的所述多个候选展示列的展示列高度，对所述多个候选展示列的末尾至少一个条目进行展示位置调整，包括：14.按照条目高度从大到小的顺序，对所述多个候选展示列的末尾至少一个条目进行排序，获得第一排序结果；15.按照展示列高度从小到大的顺序，对不包含末尾至少一个条目的所述多个候选展示列进行排序，获得第二排序结果；16.基于所述第一排序结果和所述第二排序结果，将每个候选展示列的末尾至少一个条目，依次放置于相应的不包含末尾至少一个条目的候选展示列的尾部。17.可选地，所述基于所述第一排序结果和所述第二排序结果，将每个候选展示列的末尾至少一个条目，依次放置于相应的不包含末尾至少一个条目的候选展示列的尾部，包括：18.针对所述第一排序结果中的每个末尾条目，从所述第二排序结果中选取相同排序位置的不包含末尾条目的候选展示列，并将所述末尾条目放置于选取的候选展示列的尾部。19.可选地，所述条目冒泡操作包括替换候选展示列中末尾条目与相应的相邻条目的位置，所述条目冒泡操作是在末尾条目的推荐指数大于所述相邻条目的推荐指数时触发的。20.可选地，所述基于所述多个候选展示列的末尾至少一个条目的条目高度，以及不包含末尾至少一个条目的所述多个候选展示列的展示列高度，对所述多个候选展示列的末尾至少一个条目进行展示位置调整，获得目标页面之后，还包括：21.响应于在所述目标页面触发的展示列切换操作，重新渲染并展示首页，其中，所述首页中包括切换后的多个展示列。22.第二方面，本技术实施例提供了一种页面布局装置，包括：23.获取模块，用于获取待调整页面，所述待调整页面中包括多个待调整展示列，每个待调整展示列中包括至少一个条目；24.处理模块，用于循环执行从多个待调整展示列中选取最高列和最低列，并在不包含末尾条目的所述最高列的高度大于所述最低列的高度时，将所述末尾条目移动到所述最低列的尾部的步骤，直到不包含末尾条目的所述最高列的高度小于等于所述最低列的高度时停止，获得多个候选展示列；25.所述处理模块，还用于基于所述多个候选展示列的末尾至少一个条目的条目高度，以及不包含末尾至少一个条目的所述多个候选展示列的展示列高度，对所述多个候选展示列的末尾至少一个条目进行展示位置调整，获得目标页面。26.可选地，所述获取模块具体用于：27.每个候选展示列中的多个条目是按照条目索引从小到大的顺序排列的。28.可选地，所述处理模块具体用于：29.循环执行基于多个候选展示列的末尾至少一个条目的条目高度，以及不包含末尾至少一个条目的所述多个候选展示列的展示列高度，对所述多个候选展示列的末尾至少一个条目进行展示位置调整的步骤，直到调整后的多个候选展示列不再触发条目冒泡操作，获得目标页面。30.可选地，所述处理模块具体用于：31.按照条目高度从大到小的顺序，对所述多个候选展示列的末尾至少一个条目进行排序，获得第一排序结果；32.按照展示列高度从小到大的顺序，对不包含末尾至少一个条目的所述多个候选展示列进行排序，获得第二排序结果；33.基于所述第一排序结果和所述第二排序结果，将每个候选展示列的末尾至少一个条目，依次放置于相应的不包含末尾至少一个条目的候选展示列的尾部。34.可选地，所述处理模块具体用于：35.针对所述第一排序结果中的每个末尾至少一个条目，从所述第二排序结果中选取相同排序位置的不包含末尾至少一个条目的候选展示列，并将所述末尾至少一个条目放置于选取的候选展示列的尾部。36.可选地，所述处理模块具体用于：37.所述条目冒泡操作包括替换候选展示列中末尾条目与相应的相邻条目的位置，所述条目冒泡操作是在末尾条目的推荐指数大于所述相邻条目的推荐指数时触发的。38.所述处理模块具体用于：39.响应于在所述目标页面触发的展示列切换操作，重新渲染并展示首页，其中，所述首页中包括切换后的多个展示列。40.第三方面，本技术实施例提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行上述第一方面任意所述的页面布局方法。41.第四方面，本技术实施例提供了一种计算机可读存储介质，其存储有可由计算机设备执行的计算机程序，当所述程序在计算机设备上运行时，使得所述计算机设备执行上述第一方面任意所述的页面布局方法。42.本技术以最小的变更来平衡多个展示列的高低，提高了用户的视觉体验感；并且通过本技术的页面布局方法以实现目标页面的条目紧凑型布局排版，提高了目标页面的美观程度。附图说明43.为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简要介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。44.图1为本发明实施例提供的一种系统架构示意图；45.图2为本发明实施例提供的一种页面布局方法的流程示意图；46.图3为本发明施例提供的一种候选展示列的示意图；47.图4a为本发明实施例提供的一种待调整展示页面的示意图；48.图4b为本发明实施例提供的一种展示列的示意图；49.图5为本发明实施例提供的一种调整末尾条目方法的流程示意图；50.图6a为本发明实施例提供的一种待调整展示页面的示意图；51.图6b为本发明实施例提供的一种目标显示页面的示意图；52.图6c为本发明实施例提供的一种待调整展示页面的示意图；53.图6d为本发明实施例提供的一种目标显示页面的示意图；54.图7a为本发明实施例提供的一种待调整展示页面的示意图；55.图7b为本发明实施例提供的一种待调整展示页面的示意图；56.图7c为本发明实施例提供的一种待调整展示页面的示意图；57.图7d为本发明实施例提供的一种待调整展示页面的示意图；58.图7e为本发明实施例提供的一种目标显示页面的示意图；59.图8为本发明实施例提供的一种页面布局方法逻辑图的示意图；60.图9为本发明实施例提供的一种页面布局装置的结构示意图；61.图10为本发明实施例提供的一种计算设备的结构示意图。具体实施方式62.为了使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步地详细描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。63.参见图1，为本技术实施例使用的一种系统架构图，该系统架构包括终端设备101、vue组件102。其中，终端设备101用于展示目标页面，目标页面由多个展示列组成；终端设备101可以是智能手机、平板电脑、笔记本电脑、台式计算机等，但并不局限于此。64.vue组件102是为实现本技术封装而成的组件，vue组件102位于终端设备101。终端设备101响应于用户操作，获取待调整页面，并通过vue组件102对待调整页面进行相应的页面调整，获得目标页面。vue组件102是基于前端开发框架vue或者前端开发框架uni-app封装而成；vue是一个用于创建用户界面的开源javascript框架，也是一个创建单页应用的web应用框架；uni-app是一个使用vue的语法的跨平台前端框架，开发者编写一套代码，可编译到ios、android、h5、小程序等多个平台，还可以支持pc端网站、移动端网站。65.基于上述系统架构，图2示例性的示出了一种页面布局方法的流程，该方法的流程由终端设备101执行，包括以下步骤：66.步骤s201，获取待调整页面，待调整页面中包括多个待调整展示列，每个待调整展示列中包括至少一个条目；67.具体地，待调整页面中包括多个待调整展示列，每个待调整展示列由至少一个条目组成。在获得多个条目之后，对多个条目进行简单分列，得到多个待调整展示列，对多个待调整展示列进行渲染，得到待调整页面。待调整页面可以是应用首页，也可以是应用的其他页面。68.在一些实施例中，若待调整页面中的一个或多个展示列没有一个条目，这些展示列将不作为待调整展示列，不对这些展示列的已有条目进行调整。69.在一些实施例中，一个条目为一个商品的展示窗口，每个条目还可以包括以下信息中的一个或多个：商品的图片、商品的文字介绍、商品的销量、商品的库存量、商品的价格、商品的折扣、商品的好评率等，每个条目的信息类型可以相同，也可以不同。每列中的条目宽度相同，高度不同，条目的高度随着商品信息的增多而增高，因此，多个待调整展示列的宽度相同，高度不同。需要说明的是，每个条目除了用于展示商品信息之外，也可以用于展示其他类型的内容，比如，短视频、直播视频等。70.在一些实施例中，每个候选展示列中的多个条目是按照条目索引从小到大的顺序排列的。71.具体地，条目索引是基于条目中的一个或多个商品信息确定的，排在最靠前面的条目索引为1，以此类推。即排列顺序越靠前，条目索引越小，因此，每个候选展示列中的多个条目的条目索引由小变大依次排列。72.举例来说，如图3所示的两个候选展示列，设定所有条目按照销量高低进行排序，其中，销量由高到低得商品分别为：牛奶、鸡蛋、青菜、大米、面粉、鸡腿、香肠、鲜虾、活鱼、牛肉；那么上述商品获得的条目索引依次为1、2、3、4、5、6、7、8、9、10，则第一列的条目索引从上到下依次为1、3、5、7、9；第二列的条目索引为2、4、6、8、10。73.步骤s202，循环执行从多个待调整展示列中选取最高列和最低列，并在不包含末尾条目的最高列的高度大于最低列的高度时，将末尾条目移动到最低列的尾部的步骤，直到不包含末尾条目的最高列的高度小于等于最低列的高度时停止，获得多个候选展示列。74.具体地，从待调整页面中选取高度最高的展示列(后面统称最高列)和高度最低的展示列(后面统称最低列)，将最高列的末尾条目去掉后，与最低列进行高度的比较，如果去掉末尾条目的最高列的高度依旧大于最低列，那么将从最高列去掉的末尾条目移动到最低列的末尾。若步骤s201得到的待调整页面中，包含的展示列的列数大于等于二，则需要循环执行上述步骤：选取最高列和最低列、去掉最高列的末尾条目、比较最低列和不包含末尾条目的最高列的高度，将最高列的末尾条目移动到最低列的尾部；直到去掉末尾条目的最高列的高度小于等于最低列的高度时，停止将末尾条目移动到最低列的尾部的步骤，最后获得多个候选展示列。75.举例来说，如图4a所示，待调整页面中包含两列展示列，每列展示列包括4个条目。此时，第一列展示列的高度大于第二列展示列的高度，所以第一列展示列此时为最高列，第二列展示列为最低列。将第一列展示列的最后一个条目(第2页第8个商品)去掉后，第一列展示列的高度仍然大于第二列展示列的高度，则将上一步从第一列展示列移除的最后一个条目(第2页第8个商品)移动到第二列展示列的末尾。经过对两列展示列的调整后，得到的两个展示列如图4b所示。76.步骤s203，基于多个候选展示列的末尾至少一个条目的条目高度，以及不包含末尾至少一个条目的多个候选展示列的展示列高度，对多个候选展示列的末尾至少一个条目进行展示位置调整，获得目标页面。77.具体地，根据步骤s202得到的多个候选展示列，取出每个候选展示列的末尾至少一个条目，并比较这些末尾条目的高度，再结合不包含末尾至少一个条目的多个候选展示列的高度，将取出的末尾条目重新分配到每一个候选展示列中。若上述处理导致多个候选展示列中的条目位置发生变更，则将发生位置变更的条目数据和产生的变更数据发送至vue组件进行第二次渲染，最终获得目标页面。78.本技术基于vue或uni-app的前端开发框架，将调整展示列中条目的页面布局方法封装成vue组件，该组件会先对待调整页面中的多个条目进行简单的分组排列渲染，再将条目数据给到该组件，该组件对多个待调整展示列的末尾条目进行调整，以最小的变更来平衡多个展示列的高低，提高了用户的视觉体验感；并且通过本技术的页面布局方法以实现目标页面的条目紧凑型布局排版，提高了目标页面的美观程度。79.在一些实施例中，基于多个候选展示列的末尾条目的条目高度，以及不包含末尾条目的多个候选展示列的展示列高度，对多个候选展示列的末尾条目进行展示位置调整，如图5所示，包括以下步骤：80.步骤s501，按照条目高度从大到小的顺序，对多个候选展示列的末尾至少一个条目进行排序，获得第一排序结果；81.步骤s502，按照展示列高度从小到大的顺序，对不包含末尾至少一个条目的多个候选展示列进行排序，获得第二排序结果；82.步骤s503，基于第一排序结果和第二排序结果，将每个候选展示列的末尾至少一个条目，依次放置于相应的不包含末尾至少一个条目的候选展示列的尾部。83.具体地，将每个候选展示列的末尾条目取出，将末尾条目按照条目的高度进行排序。排序顺序为从大到小，得到所有候选展示列的末尾条目高度的排序结果，即第一排序结果；再将取出末尾条目的所有候选展示列按照列高进行排序，排序顺序为从小到大，得到所有取出末尾条目的所有候选展示列高度的排序结果，即第二排序结果。根据第一排序结果和第二排序结果，将末尾条目依次放置于相应的不包含末尾条目的候选展示列的尾部。84.在上述步骤s503中，基于第一排序结果和第二排序结果，将每个候选展示列的末尾至少一个条目，依次放置于相应的不包含末尾至少一个条目的候选展示列的尾部，包括：针对第一排序结果中的每个末尾至少一个条目，从第二排序结果中选取相同排序位置的不包含末尾条目的候选展示列，并将末尾至少一个条目放置于选取的候选展示列的尾部。85.举例来说，如图6a所示，有3个候选展示列，每列有4个条目，将3个候选展示列的末尾条目取出，并按照条目的高度对取出的末尾条目进行排序，排序顺序为从大到小，得到第一排序结果为：第3页第12个商品、第3页第10个商品、第3页第11个商品；再按照高度对取出末尾条目后的三个候选展示列进行排序，排序顺序为由小到大，得到第二排序结果为：第一列候选展示列、第三候选展示列、第二候选展示列。根据第一排序结果和第二排序结果，将条目12到第一候选展示列的末尾，将条目10放到第三候选展示列的末尾，将条目11放入第二候选展示列的末尾，最终得到如图6b所示的目标显示页面。86.在一些实施例中，在待调整页面中的一列或者多列待展示列没有末尾条目，则将有末尾条目的展示列的末尾条目取出后，结合这些取出的末尾条目的高度，将取出的末尾条目重新分配到包含末尾条目的候选展示列中。87.如图6c所示，有3个候选列，加载第2页商品时，第2页只有两个条目，第2页第1个商品和第2页第2个商品，分别位于第2列和第3列。分别取出每列的末尾条目，由于第1列没有末尾条目，则取出第2列的末尾条目：第2页第2个商品，取出第3列的末尾条目：第2页第1个商品。对第2页第2个商品条目和第2页第1个商品条目从大到小进行排序，得到的排序结果为：第2页第2个商品、第2页第1个商品。对不包含末尾条目的第2列展示列和第3列展示列的高度从小到大进行排序，得到的排序结果为：第3列展示列、第2列展示列。因此，将第2页第2个商品放入第3列展示列的末尾，第2页第1个商品放入第2列展示列的末尾，最终得到如图6d所示的目标显示页面。88.通过对多个候选展示列的末尾条目进行排序，也对不包含末尾条目的多个候选展示列的高度进行排序，结合两个排序结果，将末尾条目重新放置到相应的候选展示列中，以最小的变更对多个候选展示列的高度进行调整，以实现多个候选展示列高度的平衡，使得显示页面中的画面更加的美观。89.在上述步骤s203中，基于多个候选展示列的末尾条目的条目高度，以及不包含末尾条目的多个候选展示列的展示列高度，对多个候选展示列的末尾条目进行展示位置调整，获得目标页面，包括：90.循环执行基于多个候选展示列的末尾至少一个条目的条目高度，以及不包含末尾至少一个条目的多个候选展示列的展示列高度，对多个候选展示列的末尾至少一个条目进行展示位置调整的步骤，直到调整后的多个候选展示列不再触发条目冒泡操作，获得目标页面。91.具体地，若在第一次对多个候选展示列的末尾条目进行展示位置调整后，其中一列或者多列候选展示列触发条目冒泡操作，则需要重新对多个候选展示列的末尾条目进行展示位置调整，直到调整后的一个或者多个候选展示列不再触发条目冒泡操作时，将发生位置变更的条目数据和产生的变更数据发送至vue组件进行第二次渲染，最终获得目标页面。92.在一些实施例中，条目冒泡操作包括替换候选展示列中末尾条目与相应的相邻条目的位置，条目冒泡操作是在末尾条目的推荐指数大于相邻条目的推荐指数时触发的。93.具体地，其中一列候选展示列触发条目冒泡操作后，需要将该列末尾条目的位置和相邻条目的位置替换。触发条目发生冒泡操作的情景为：多个候选展示列的末尾条目展示位置经过调整后，其中一列或多列候选展示列中，两个上下相邻条目的条目推荐指数并不符合由大到小的顺序，即当两个上下相邻条目中的上条目的推荐指数小于下条目推荐指数时，则触发冒泡操作。94.其中，推荐指数与条目索引相关，条目索引越小，则说明该条目展示的商品推荐指数越高。95.举例来说，如图7a所示，候选展示列为2列，第1列候选展示列包括5个商品条目，第2列候选展示列包括5个商品条目，每列条目的条目索引由上到下依次变大，推荐指数依次变小。96.第1列候选展示列的末尾条目为：第2页第9个商品，该第2页第9个商品的条目的高度为38mm，第2列候选展示列的末尾条目为第2页第10个商品，该第2页第10个商品的条目的高度为35mm，此时第2列为最高列，将第2列的末尾条目取出后，不包含末尾条目的第2列的高度还是高于第1列的高度，因此，需要将第2页第10个商品移动到第1列的末尾，如图7b所示。97.将第1列的末尾条目，即第2页第10个商品，第2列的末尾条目，即第2页第8个商品取出，比较大小，该第2页第8个商品的条目的高度为32mm，第1列候选展示列的第2页第10个商品高于第2列候选展示列的第2页第8个商品。将上述2个末尾条目取出后，第1列候选展示列的高度高于第2列候选展示列的高度，因此，将第1列候选展示列的第2页第10个商品放置到第2列候选展示列的末尾，将第2列候选展示列的第2页第8个商品放到第1列候选展示列的末尾；此时，如图7c所示，第1列候选展示列的后两个条目从上到下依次为第2页第9个商品和第2页第8个商品，由于第2页第9个商品的推荐指数小于第2页第8个商品的推荐指数，因此第1列候选展示列不符合推荐指数从大到小的顺序，因此，第1列候选展示列触发冒泡操作，需要调换第1列候选展示列的后两个条目的位置，即将末尾的第8个商品和倒数第2的第9个商品的位置调换,如图7d所示。此时，第1列候选展示列的末尾条目为第2页第9个商品，第2页第9个商品的条目的高度为38mm，第2列候选展示列的末尾条目为第2页第10个商品，第2页第10个商品的条目的高度为35mm，将此时的2个末尾条目取出后，第1列候选展示列的高度高于第2列候选展示列的高度，因此，将第1列候选展示列的末尾条目，即第2页第9个商品放置到第2列候选展示列的末尾，将第2列候选展示列的末尾条目，即第2页第10个商品放到第1列候选展示列的末尾，判断此时2列候选展示列都不触发冒泡操作，则将发生位置变更的条目数据和产生的变更数据发送至vue组件进行第二次渲染，最终获得如图7e所示的目标显示页面。98.通过对候选展示列触发的冒泡操作进行条目位置变换，避免因为平衡多个候选展示列的高度，而造成其中一列或者多列候选展示列中上下相邻的条目位置出错的问题，实现了将商品条目可以按照推荐指数的高低进行展示，提高了用户的体验感。99.基于多个候选展示列的末尾至少一个条目的条目高度，以及不包含末尾至少一个条目的多个候选展示列的展示列高度，对多个候选展示列的末尾至少一个条目进行展示位置调整，获得目标页面之后，还包括：响应于在目标页面触发的展示列切换操作，重新渲染并展示首页，其中，首页中包括切换后的多个展示列。100.具体地，由于用户查看页面的使用习惯不同，在页面顶部，设置有候选展示列列数切换键，其中有两列、三列、四列等选择。用户由两列切换到三列时，页面会重新加载排列，会重新从首页开始排列和渲染。101.参见图8，为本技术实施例提供一种页面布局方法逻辑图，该方法可以以最小的变更完成对待展示页面的紧凑型布局，包括以下步骤：102.步骤s801，开始。103.步骤s802，响应用户操作，触发加载当前页面数据。104.具体地，当前页面可以是第一页面，也可以是其他页面。用户操作可以是进入第一页面、上拉进入下一页面、下拉加载上一页面。105.步骤s803，依次将当前页的条目进行简单排列。106.具体地，若加载第一页面的条目，则按照从左到右的顺序依次对第一页面的条目进行简单排列；若加载第二页面的条目，则先将第二页面的第一个条目先放到第一页面中展示列短的那一列，在依次进行简单排列，并进行第一次渲染。107.步骤s804，查询当前页每个条目的高度。108.步骤s805，判断不包含末尾条目的最高列的高度是否大于最低列的高度。109.具体地，判断在当前页面中最高列去除末尾条目时，该列的总高度是否还大于当前页面中最低列的总高度，若判断结果为是，则执行步骤s806，若判断结果为否，则执行步骤s807。110.步骤s806，将最高列的末尾条目移动到最低列的末尾。111.具体地，将最高列的末尾条目移动到最低列的末尾；若当前页面中存在大于两列的待调整展示列，则需循环执行上述查询高度并移动最高列的末尾条目到最低列末尾的步骤。112.步骤s807，已完成最小变更的平衡状态。113.具体地，仅对当前页的末尾条目的位置进行变更，即完成最小变更的平衡状态。114.步骤s808，取出当前页每列最后一个条目，按高度从大到小进行排列；对不包含末尾条目的多个候选展示列，按高度从小到大进行排列；将取出的条目依次放到相应的候选展示列的末尾。115.具体地，将当前页面的多个待展示列的最后一个条目取出，从大到小进行排序，得到第一排序结果；再对不包含末尾条目的所述多个候选展示列进行排序，获得第二排序结果；将第一排序结果中的每个末尾条目，从所述第二排序结果中选取相同排序位置的不包含末尾条目的候选展示列，并将所述末尾条目放置于选取的候选展示列的尾部。116.步骤s809，判断是否触发冒泡操作。117.具体地，查看调整后的每个展示列是否触发冒泡操作，若有，则将触发冒泡操作的到展示列中发生冒泡的相邻两个条目位置进行变换。之后，再次执行步骤s808，直到当前页面中所有待展示列不再触发冒泡操作时，进行下一步骤。118.步骤s810，已完成紧凑型布局。119.具体地，完成紧凑型布局后，需要进行第二次渲染。第二次渲染的具体实现方法为：将实现最小变更的平衡操作和紧凑型布局的过程中，位置发生改变的条目数据发送至vue，利用vue框架的domdiff的双指针循环检测算法，以最小开销的渲染方式进行差异更新，即只对第一次渲染后位置发生变动的条目进行第二次渲染。120.步骤s811，用户触发切换操作。121.具体地，在上述所有步骤流程中，只要用户操作页面的切换键，即发生多列切换操作时，都需要返回到第一页面，重新进行加载、排列、第一次渲染、最小变更、紧凑型布局操作、第二次渲染。122.步骤s812，结束。123.以最小的变更来平衡多个展示列的高低，提高了用户的视觉体验感；并且通过本技术的页面布局方法以实现目标页面的条目紧凑型布局排版，提高了目标页面的美观程度。124.基于相同的技术构思，本技术实施例提供了一种页面布局装置结构示意图，如图9所示，该装置900包括：125.获取模块901，用于获取待调整页面，所述待调整页面中包括多个待调整展示列，每个待调整展示列中包括至少一个条目；126.处理模块902，用于循环执行从多个待调整展示列中选取最高列和最低列，并在不包含末尾条目的所述最高列的高度大于所述最低列的高度时，将所述末尾条目移动到所述最低列的尾部的步骤，直到不包含末尾条目的所述最高列的高度小于等于所述最低列的高度时停止，获得多个候选展示列；127.所述处理模块902，还用于基于所述多个候选展示列的末尾至少一个条目的条目高度，以及不包含末尾至少一个条目的所述多个候选展示列的展示列高度，对所述多个候选展示列的末尾至少一个条目进行展示位置调整，获得目标页面。128.可选地，所述获取模块901具体用于：129.每个候选展示列中的多个条目是按照条目索引从小到大的顺序排列的。130.可选地，所述处理模块902具体用于：131.循环执行基于多个候选展示列的末尾至少一个条目的条目高度，以及不包含末尾至少一个条目的所述多个候选展示列的展示列高度，对所述多个候选展示列的末尾至少一个条目进行展示位置调整的步骤，直到调整后的多个候选展示列不再触发条目冒泡操作，获得目标页面。132.可选地，所述处理模块902具体用于：133.按照条目高度从大到小的顺序，对所述多个候选展示列的末尾至少一个条目进行排序，获得第一排序结果；134.按照展示列高度从小到大的顺序，对不包含末尾至少一个条目的所述多个候选展示列进行排序，获得第二排序结果；135.基于所述第一排序结果和所述第二排序结果，将每个候选展示列的末尾至少一个条目，依次放置于相应的不包含末尾至少一个条目的候选展示列的尾部。136.可选地，所述处理模块902具体用于：137.针对所述第一排序结果中的每个末尾至少一个条目，从所述第二排序结果中选取相同排序位置的不包含末尾至少一个条目的候选展示列，并将所述末尾至少一个条目放置于选取的候选展示列的尾部。138.可选地，所述处理模块902具体用于：139.所述条目冒泡操作包括替换候选展示列中末尾条目与相应的相邻条目的位置，所述条目冒泡操作是在末尾条目的推荐指数大于所述相邻条目的推荐指数时触发的。140.所述处理模块902具体用于：141.响应于在所述目标页面触发的展示列切换操作，重新渲染并展示首页，其中，所述首页中包括切换后的多个展示列。142.本技术基于vue或uni-app的前端开发框架，将调整展示列中条目的页面布局方法封装成vue组件，该组件会先对待调整页面中的多个条目进行简单的分组排列渲染，再将条目数据给到该组件，该组件对多个待调整展示列的末尾条目进行调整，以最小的变更来平衡多个展示列的高低，提高了用户的视觉体验感；并且通过本技术的页面布局方法以实现目标页面的条目紧凑型布局排版，提高了目标页面的美观程度。143.基于相同的技术构思，本技术实施例提供了一种计算机设备，该计算机设备可以是图1所示的终端设备或者服务端，如图10所示，包括至少一个处理器1001，以及与至少一个处理器连接的存储器1002，本技术实施例中不限定处理器1001与存储器1002之间的具体连接介质，图10中处理器1001和存储器1002之间通过总线连接为例。总线可以分为地址总线、数据总线、控制总线等。144.在本技术实施例中，存储器1002存储有可被至少一个处理器1001执行的指令，至少一个处理器1001通过执行存储器1002存储的指令，可以执行上述页面布局方法的步骤。145.其中，处理器1001是计算机设备的控制中心，可以利用各种接口和线路连接计算机设备的各个部分，通过运行或执行存储在存储器1002内的指令以及调用存储在存储器1002内的数据，从而实现对待调整页面中条目的位置进行调整。可选的，处理器1001可包括一个或多个处理单元，处理器1001可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器1001中。在一些实施例中，处理器1001和存储器1002可以在同一芯片上实现，在一些实施例中，它们也可以在独立的芯片上分别实现。146.处理器1001可以是通用处理器，例如中央处理器(cpu)、数字信号处理器、专用集成电路(application specific integrated circuit，asic)、现场可编程门阵列或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件，可以实现或者执行本技术实施例中公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合本技术实施例所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。147.存储器1002作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块。存储器1002可以包括至少一种类型的存储介质，例如可以包括闪存、硬盘、多媒体卡、卡型存储器、随机访问存储器(random access memory，ram)、静态随机访问存储器(static random access memory，sram)、可编程只读存储器(programmable read only memory，prom)、只读存储器(read only memory，rom)、带电可擦除可编程只读存储器(electrically erasable programmable read-only memory，eeprom)、磁性存储器、磁盘、光盘等等。存储器1002是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机设备存取的任何其他介质，但不限于此。本技术实施例中的存储器1002还可以是电路或者其它任意能够实现存储功能的装置，用于存储程序指令和/或数据。148.基于同一发明构思，本技术实施例提供了一种计算机可读存储介质，其存储有可由计算机设备执行的计算机程序，当程序在计算机设备上运行时，使得计算机设备执行上述页面布局方法的步骤。149.本技术基于vue或uni-app的前端开发框架，将调整展示列中条目的页面布局方法封装成vue组件，该组件会先对待调整页面中的多个条目进行简单的分组排列渲染，再将条目数据给到该组件，该组件对多个待调整展示列的末尾条目进行调整，以最小的变更来平衡多个展示列的高低，提高了用户的视觉体验感；并且通过本技术的页面布局方法以实现目标页面的条目紧凑型布局排版，提高了目标页面的美观程度。150.本领域内的技术人员应明白，本技术的实施例可提供为方法、系统、或计算机程序产品。因此，本技术可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。151.本技术是参照根据本技术的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。152.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。153.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。154.显然，本领域的技术人员可以对本技术进行各种改动和变型而不脱离本技术的精神和范围。这样，倘若本技术的这些修改和变型属于本技术权利要求及其等同技术的范围之内，则本技术也意图包含这些改动和变型在内。









图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!




内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,发布内容不收取任何费用也不接任何广告!




免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理，本文部分文字与图片资源来自于网络，部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!的,若有来源标注错误或侵犯了您的合法权益，请立即通知我们，情况属实，我们会第一时间予以删除，并同时向您表示歉意,谢谢!