页面瀑布流布局优化方法、存储介质、电子设备及系统技术方案

本发明专利技术涉及计算机控制领域，公开了一种页面瀑布流布局优化方法、存储介质、电子设备及系统，该方法包括S1：预设一页面最多图片数和一屏幕最多图片显示数；S2：新建上部数组和下部数组；S3：判断当前为页面上拉操作还是页面下拉操作；S4：判断下部数组中是否保存有图片的HTML标签数据；S5：加载新的图片，同时相应进行页面顶部部分图片的移除；S6：加载下部数组中最后一组HTML标签数据对应的图片至页面底部；S7：当页面下拉至页面顶部时，判断上部数组中是否保存有图片的HTML标签数据；S8：加载上部数组中最后一组HTML标签数据对应的图片至页面顶部，同时相应进行页面底部相应图片的移除。本发明专利技术能够有效提高页面浏览的流畅性。

【技术实现步骤摘要】
页面瀑布流布局优化方法、存储介质、电子设备及系统
本专利技术涉及计算机控制领域，具体涉及一种页面瀑布流布局优化方法、存储介质、电子设备及系统。
技术介绍
当前，在HTML5页面上实现上拉无限加载文字、图片等数据的瀑布流布局，基本上应用的均是基本的瀑布流实现原理，即上拉到窗口底部时请求接口数据，进行数据加载，当数据加载完成后，将所有已加载的DOM(DocumentObjectModel，文档对象模型)结构进行重绘和重排，从而得到整个页面的瀑布流排版效果。HTML5是标准通用标记语言下的应用超文本标记语言的第五次重大修改标准。此种瀑布流实现方式因每次新加载数据后均需要对所有已加载数据进行重绘和重排，从而导致程序每次加载完数据后均需要进行大量的计算工作，当数据量非常庞大时，此时计算机的计算处理量将会非常巨大，且需要消耗大量内存，同时程序的运行会变得缓慢，并且页面加载更多数据后，页面总的DOM数增加，页面浏览时变得卡顿，导致用户的体验大打折扣。
技术实现思路
针对现有技术中存在的缺陷，本专利技术的目的在于提供一种页面瀑布流布局优化方法，能够有效提高页面浏览的流畅性。为达到以上目的，本专利技术采取的技术方案是，包括：S1：预设一页面最多图片数，并基于显示屏的面积，预设一屏幕最多图片显示数；S2：新建上部数组和下部数组，所述上部数组用于保存移除的页面上部图片的HTML标签，所述下部数组用于保存移除的页面下部图片的HTML标签；S3：当进行页面拉动操作时，判断当前为页面上拉操作还是页面下拉操作，若为上拉操作，则转到S4，若为下拉操作，则转到S7；S4：当页面上拉至页面底部时，判断下部数组中是否保存有图片的HTML标签数据，若否，则转到S5，若是，则转到S6；S5：加载新的图片，并将新加载的图片以瀑布流形式排版至页面底部，同时移除位于页面顶部且未在显示屏中显示的部分图片，并将移除的图片对应的HTML标签数据作为一组数据保存于上部数组中；S6：根据下部数组中保存的最后一组HTML标签数据，加载下部数组中最后一组HTML标签数据对应的图片至页面底部；S7：当页面下拉至页面顶部时，判断上部数组中是否保存有图片的HTML标签数据，若否，则不做处理，若是，则转到S8；S8：根据上部数组中保存的最后一组HTML标签数据，加载上部数组中最后一组HTML标签数据对应的图片至页面顶部，同时移除位于页面底部且未在显示屏中显示的部分图片，并将移除的图片对应的HTML标签数据作为一组数据保存于下部数组中。在上述技术方案的基础上，S5中，对于页面顶部且未在显示屏中显示的图片的移除，具体为：当页面中当前已加载的总的图片数大于预设的页面最多图片数时，判断当前新加载的图片数是否大于或等于预设的屏幕最多图片显示数，若是，则移除页面顶部与新加载图片数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于上部数组中，若当前新加载的图片数小于预设的屏幕最多图片显示数，则移除页面顶部与预设屏幕最多图片显示数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于上部数组中，当页面中当前已加载的总的图片数不大于预设的页面最多图片数，则不做处理。在上述技术方案的基础上，S8中，对于页面底部且未在显示屏中显示的图片的移除，具体为：当页面中当前已加载的总的图片数大于预设的页面最多图片数时，判断页面中当前新加载的图片数是否大于或等于预设的屏幕最多图片显示数，若是，则移除页面底部与新加载图片数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于下部数组中，若页面中当前新加载的图片数小于预设的屏幕最多图片显示数，则移除页面底部与预设屏幕最多图片显示数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于下部数组中，当页面中当前已加载的总的图片数不大于预设的页面最多图片数，则不做处理。在上述技术方案的基础上，所述上部数组和下部数组中保存的每一组HTML标签数据按照加入的先后时间顺序排列；所述页面的顶部指页面加载渲染完成且未加载新图片或未从上部数组中加载HTML标签对应图片时，页面的最上部；所述页面的底部指页面加载完成且未加载新图片或未从上部数组中加载HTML标签对应图片时，页面的最下部。在上述技术方案的基础上，还创建有位置数组；所述位置数组用于对应记录每一次进行移除图片操作时当前移除图片位于页面的位置；所述位置数组中每一组位置数据对应一组HTML标签数据；当进行加载上部数组和下部数组中HTML标签数据对应图片至页面的操作时，根据位置数组记录的位置数据确定HTML标签数据对应图片位于页面的位置，且当一组HTML标签数据对应图片加载完成，删除位置数组中相对应的一组位置数据。本专利技术还提供一种存储介质，该存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述所述的方法。本专利技术还提供一种电子设备，包括存储器和处理器，存储器上储存有在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述所述的方法。本专利技术还提供一种页面瀑布流布局优化系统，包括：设置模块，其用于预设一页面最多图片数，并基于显示屏的面积，预设一屏幕最多图片显示数；创建模块，其用于新建上部数组和下部数组，所述上部数组用于保存移除的页面上部图片的HTML标签，所述下部数组用于保存移除的页面下部图片的HTML标签；判断模块，其用于当进行页面拉动操作时，判断当前为页面上拉操作还是页面下拉操作，以及进一步的当为页面上拉操作且当页面上拉至页面底部时，判断下部数组中是否保存有图片的HTML标签数据，当为页面下拉操作且页面下拉至页面顶部时，判断上部数组中是否保存有图片的HTML标签数据；执行模块，其用于当下部数组中没有保存图片的HTML标签数据时，加载新的图片，并将新加载的图片以瀑布流形式排版至页面底部，同时当页面中当前已加载的总的图片数大于预设的页面最多图片数时，判断当前新加载的图片数是否大于或等于预设的屏幕最多图片显示数，若是，则移除页面顶部与新加载图片数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于上部数组中，若当前新加载的图片数小于预设的屏幕最多图片显示数，则移除页面顶部与预设屏幕最多图片显示数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于上部数组中，当页面中当前已加载的总的图片数不大于预设的页面最多图片数，则不做处理，以及，当上部数组中保存有图片的HTML标签数据，根据上部数组中保存的最后一组HTML标签数据，加载上部数组中最后一组HTML标签数据对应的图片至页面顶部，同时当页面中当前已加载的总的图片数大于预设的页面最多图片数时，判断页面中当前新加载的图片数是否大于或等于预设的屏幕最多图片显示数，若是，则移除页面底部与新加载图片数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于下部数组中，若页面中当前新加载的图片数小于预设的屏幕最多图片显示数，则移除页面底部与预设屏幕最多图片显示数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于下部数组中，当页面中当前已加载的总的图片数不大于预设的页面最多图片数本文档来自技高网...

【技术保护点】
一种页面瀑布流布局优化方法，用于对页面上以瀑布流布局加载图片的方式进行优化，其特征在于，包括：S1：预设一页面最多图片数，并基于显示屏的面积，预设一屏幕最多图片显示数；S2：新建上部数组和下部数组，所述上部数组用于保存移除的页面上部图片的HTML标签，所述下部数组用于保存移除的页面下部图片的HTML标签；S3：当进行页面拉动操作时，判断当前为页面上拉操作还是页面下拉操作，若为上拉操作，则转到S4，若为下拉操作，则转到S7；S4：当页面上拉至页面底部时，判断下部数组中是否保存有图片的HTML标签数据，若否，则转到S5，若是，则转到S6；S5：加载新的图片，并将新加载的图片以瀑布流形式排版至页面底部，同时移除位于页面顶部且未在显示屏中显示的部分图片，并将移除的图片对应的HTML标签数据作为一组数据保存于上部数组中；S6：根据下部数组中保存的最后一组HTML标签数据，加载下部数组中最后一组HTML标签数据对应的图片至页面底部；S7：当页面下拉至页面顶部时，判断上部数组中是否保存有图片的HTML标签数据，若否，则不做处理，若是，则转到S8；S8：根据上部数组中保存的最后一组HTML标签数据，加载上部数组中最后一组HTML标签数据对应的图片至页面顶部，同时移除位于页面底部且未在显示屏中显示的部分图片，并将移除的图片对应的HTML标签数据作为一组数据保存于下部数组中。...

【技术特征摘要】
1.一种页面瀑布流布局优化方法，用于对页面上以瀑布流布局加载图片的方式进行优化，其特征在于，包括：S1：预设一页面最多图片数，并基于显示屏的面积，预设一屏幕最多图片显示数；S2：新建上部数组和下部数组，所述上部数组用于保存移除的页面上部图片的HTML标签，所述下部数组用于保存移除的页面下部图片的HTML标签；S3：当进行页面拉动操作时，判断当前为页面上拉操作还是页面下拉操作，若为上拉操作，则转到S4，若为下拉操作，则转到S7；S4：当页面上拉至页面底部时，判断下部数组中是否保存有图片的HTML标签数据，若否，则转到S5，若是，则转到S6；S5：加载新的图片，并将新加载的图片以瀑布流形式排版至页面底部，同时移除位于页面顶部且未在显示屏中显示的部分图片，并将移除的图片对应的HTML标签数据作为一组数据保存于上部数组中；S6：根据下部数组中保存的最后一组HTML标签数据，加载下部数组中最后一组HTML标签数据对应的图片至页面底部；S7：当页面下拉至页面顶部时，判断上部数组中是否保存有图片的HTML标签数据，若否，则不做处理，若是，则转到S8；S8：根据上部数组中保存的最后一组HTML标签数据，加载上部数组中最后一组HTML标签数据对应的图片至页面顶部，同时移除位于页面底部且未在显示屏中显示的部分图片，并将移除的图片对应的HTML标签数据作为一组数据保存于下部数组中。2.如权利要求1所述的一种页面瀑布流布局优化方法，其特征在于，S5中，对于页面顶部且未在显示屏中显示的图片的移除，具体为：当页面中当前已加载的总的图片数大于预设的页面最多图片数时，判断当前新加载的图片数是否大于或等于预设的屏幕最多图片显示数，若是，则移除页面顶部与新加载图片数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于上部数组中，若当前新加载的图片数小于预设的屏幕最多图片显示数，则移除页面顶部与预设屏幕最多图片显示数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于上部数组中，当页面中当前已加载的总的图片数不大于预设的页面最多图片数，则不做处理。3.如权利要求2所述的一种页面瀑布流布局优化方法，其特征在于，S8中，对于页面底部且未在显示屏中显示的图片的移除，具体为：当页面中当前已加载的总的图片数大于预设的页面最多图片数时，判断页面中当前新加载的图片数是否大于或等于预设的屏幕最多图片显示数，若是，则移除页面底部与新加载图片数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于下部数组中，若页面中当前新加载的图片数小于预设的屏幕最多图片显示数，则移除页面底部与预设屏幕最多图片显示数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于下部数组中，当页面中当前已加载的总的图片数不大于预设的页面最多图片数，则不做处理。4.如权利要求1所述的一种页面瀑布流布局优化方法，其特征在于：所述上部数组和下部数组中保存的每一组HTML标签数据按照加入的先后时间顺序排列；所述页面的顶部指页面加载渲染完成且未加载新图片或未从上部数组中加载HTML标签对应图片时，页面的最上部；所述页面的底部指页面加载完成且未加载新图片或未从上部数组中加载HTML标签对应图片时，页面的最下部。5.如权利要求1所述的一种页面瀑布流布局优化方法，其特征在于：还创建有位置数组；所述位置数组...

【专利技术属性】
技术研发人员：陈北侠，陈少杰，张文明，
申请(专利权)人：武汉斗鱼网络科技有限公司，
类型：发明
国别省市：湖北,42