CN107577757A - 页面瀑布流布局优化方法、存储介质、电子设备及*** - Google Patents
页面瀑布流布局优化方法、存储介质、电子设备及*** Download PDFInfo
- Publication number
- CN107577757A CN107577757A CN201710775600.9A CN201710775600A CN107577757A CN 107577757 A CN107577757 A CN 107577757A CN 201710775600 A CN201710775600 A CN 201710775600A CN 107577757 A CN107577757 A CN 107577757A
- Authority
- CN
- China
- Prior art keywords
- page
- picture
- array
- html tag
- pictures
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明涉及计算机控制领域，公开了一种页面瀑布流布局优化方法、存储介质、电子设备及***，该方法包括S1：预设一页面最多图片数和一屏幕最多图片显示数；S2：新建上部数组和下部数组；S3：判断当前为页面上拉操作还是页面下拉操作；S4：判断下部数组中是否保存有图片的HTML标签数据；S5：加载新的图片，同时相应进行页面顶部部分图片的移除；S6：加载下部数组中最后一组HTML标签数据对应的图片至页面底部；S7：当页面下拉至页面顶部时，判断上部数组中是否保存有图片的HTML标签数据；S8：加载上部数组中最后一组HTML标签数据对应的图片至页面顶部，同时相应进行页面底部相应图片的移除。本发明能够有效提高页面浏览的流畅性。
Description
技术领域
本发明涉及计算机控制领域，具体涉及一种页面瀑布流布局优化方法、存储介质、电子设备及***。
背景技术
当前，在HTML5页面上实现上拉无限加载文字、图片等数据的瀑布流布局，基本上应用的均是基本的瀑布流实现原理，即上拉到窗口底部时请求接口数据，进行数据加载，当数据加载完成后，将所有已加载的DOM(Document Object Model，文档对象模型)结构进行重绘和重排，从而得到整个页面的瀑布流排版效果。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标签数据作为一组数据保存于下部数组中，当页面中当前已加载的总的图片数不大于预设的页面最多图片数，则不做处理。
在上述技术方案的基础上，所述上部数组和下部数组中保存的每一组HTML标签数据按照加入的先后时间顺序排列。
在上述技术方案的基础上，所述页面的顶部指页面加载渲染完成且未加载新图片或未从上部数组中加载HTML标签对应图片时，页面的最上部；所述页面的底部指页面加载完成且未加载新图片或未从上部数组中加载HTML标签对应图片时，页面的最下部。
与现有技术相比，本发明的优点在于：通过预设页面最多图片数和屏幕最多图片显示数，在进行页面拉动需在页面中加载图片时，对当前页面中总的图片数进行判断，当超过预设页面最多图片数时，则移除页面顶部或底部的部分图片，使页面中的图片数保持在一合理的范围内，较少渲染加载页面上图片时，计算机的资源消耗，保证页面浏览的流畅度，且移除的图片对应的HTML标签数据保存于上部数组或下部数组中，从而在上下滚动页面，加载该部分移除的图片时，能够根据HTML标签数据达到快速加载图片的目的，提高页面浏览的流畅性。
附图说明
图1为本发明实施例的一种页面瀑布流布局优化方法的流程图；
图2为本发明实施例的一种电子设备的结构示意图。
具体实施方式
以下结合附图及实施例对本发明作进一步详细说明。
参见图1所示，本发明实施例提供一种页面瀑布流布局优化方法，用于对页面上以瀑布流布局加载图片的方式进行优化，本发明的页面指HTML5页面，具体的如直播网站用于显示多个直播房间缩略图的页面，当用户点击缩略图则进入对应的直播间，缩略图在页面上呈瀑布流的方式排布。本发明实施例的页面瀑布流布局优化方法具体包括：
S1：预设一页面最多图片数，并基于显示屏的面积，预设一屏幕最多图片显示数，即根据用于显示页面的设备的性能，页面一般在设备的浏览器或程序中显示，因此根据设备的性能，提前预设一页面最多图片数，即能同时存在于页面中的图片的个数，同时，不同设备的显示屏有大小之分，因此基于显示屏的大小，预设一屏幕最多图片显示数，即能够同时在屏幕中存在并完整显示的图片的个数。对于预设的屏幕最多图片显示数，对于具体的数值，可以采用以下计算方法，先计算出屏幕高度SH和宽度SW，并计算出页面中第一排图片中高度最小的图片的高度MINH和宽度MINW，则预设的屏幕最多图片显示数为屏幕高度和宽度的乘积(SW*SH)/(MINH*MINW)，因为瀑布流排布方式中每个图片的宽度相同、高度不同，故这里求得仅为一极限值。预设的页面最多图片数一般为屏幕最多图片显示数的4倍。
页面图片显示瀑布流的实现方式为：
1、用JavaScript(直译式脚本语言)方法先计算出页面的宽度SW，同时计算出待瀑布流排版的图片的宽度PW，因为瀑布流中每个图片的宽度是一致的，所以页面中每一排能够放置的图片的列数PN＝SW/PW；
2、定义一个空数组HARR，用以存储第一排每一列图片的高度，将第一排所有的图片的高度存在数组HARR中，假设PN＝3，则HARR＝[height1,height2,height3]；
3、计算出数组HARR中最小的高度MH，假定MH＝height2；
4、设置下一张(第4张图片)需要被排版的图片的定位方式position为absolute，其top值为数组中的最小高度MH，则下一张图片就被放到了第一列高度最小的图片下面，即第2列图片的下面，此时第4张图片位于第2排；
5、设置好第4张图片的位置后，将第4张图片的高度height4与第一排高度最小图片的高度height2加在一起，合成一个新的高度NEWH＝height2+height4，用NEWH替换之前数组中最小高度height2，更新数组HARR的值为HARR＝[height1,NEWH,height3]；
6、依次循环步骤3、4和5，直至所有的图片都瀑布流排版完毕。
在一种实时方式中，当页面上拉到页面底部时，按照分页加载的原理，通过相应接口请求数据，加载新的图片至页面中，此时加载的图片按照上述的页面图片显示瀑布流实现方式进行排版，此时新建一个数组NEWARR，将上述数组赋值给NEWARR，即NEWARR＝HARR，这样的目的是页面每一次初始化完成后均得到最后一排每一列图片的高度，然后将数组NEWARR中的高度当做初始高度，将新加载的图片按照上述方式进行瀑布流排版，从而避免对之前已经排列过的图片进行二次计算、重绘和重排，很大程度低降低计算机的内存消耗，同时还能提高页面的加载渲染速度。
S2：新建上部数组和下部数组，上部数组用于保存移除的页面上部图片的HTML标签，下部数组用于保存移除的页面下部图片的HTML标签，通过保存HTML标签的方式，便于后续往页面中加载HTML标签对应的图片时，无需使用上述瀑布流排版的方法重新计算便能直接定位好图片位于页面的位置，从而快速渲染页面，完成页面的加载。
S3：当进行页面拉动操作时，判断当前为页面上拉操作还是页面下拉操作，若为上拉操作，则转到S4，若为下拉操作，则转到S7。其中，页面上拉操作为页面在屏幕上由下往上移动，上拉操作为页面在屏幕上由上往下移动。
S4：当页面上拉至页面底部时，判断下部数组中是否保存有图片的HTML标签数据，若否，则转到S5，若是，则转到S6。本发明实施例中，页面的顶部指页面加载渲染完成且未加载新图片或未从上部数组中加载HTML标签对应图片时，页面的最上部，页面的底部指页面加载完成且未加载新图片或未从上部数组中加载HTML标签对应图片时，页面的最下部，即页面每一次加载图片形成的一个新页面，均存在顶部和底部。
S5：加载新的图片，并将新加载的图片以瀑布流形式排版至页面底部，同时移除位于页面顶部且未在显示屏中显示的部分图片，并将移除的图片对应的HTML标签数据作为一组数据保存于上部数组中，具体的，当页面中当前已加载的总的图片数大于预设的页面最多图片数时，判断当前新加载的图片数是否大于或等于预设的屏幕最多图片显示数，若是，则移除页面顶部与新加载图片数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于上部数组中，若当前新加载的图片数小于预设的屏幕最多图片显示数，则移除页面顶部与预设屏幕最多图片显示数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于上部数组中，当页面中当前已加载的总的图片数不大于预设的页面最多图片数，则不做处理。
S6：根据下部数组中保存的最后一组HTML标签数据，加载下部数组中最后一组HTML标签数据对应的图片至页面底部；
S7：当页面下拉至页面顶部时，判断上部数组中是否保存有图片的HTML标签数据，若否，则不做处理，若是，则转到S8；
S8：根据上部数组中保存的最后一组HTML标签数据，加载上部数组中最后一组HTML标签数据对应的图片至页面顶部，同时移除位于页面底部且未在显示屏中显示的部分图片，并将移除的图片对应的HTML标签数据作为一组数据保存于下部数组中，具体的，当页面中当前已加载的总的图片数大于预设的页面最多图片数时，判断页面中当前新加载的图片数是否大于或等于预设的屏幕最多图片显示数，若是，则移除页面底部与新加载图片数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于下部数组中，若页面中当前新加载的图片数小于预设的屏幕最多图片显示数，则移除页面底部与预设屏幕最多图片显示数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于下部数组中，当页面中当前已加载的总的图片数不大于预设的页面最多图片数，则不做处理。
对于页面顶部或底部图片的移除，当需要从页面顶部移除图片时，则从第一个图片开始，正着开始计数(先数第一排，再第二排的顺序)，数至需要移除的图片数并移除，当需要从页面的底部移除图片时，则从页面上最后一个图片开始，倒着计数，数至需要移除的图片数并移除。
上部数组和下部数组中保存的每一组HTML标签数据按照加入的先后时间顺序排列，则每次从上部数组和下部数组中加载HTML标签对应的图片时，则按照时间顺序加载最后一组保存于上部数组或下部数组的HTML标签对应的图片。
同时，本发明实施例的页面瀑布流布局优化方法还创建有位置数组；位置数组用于对应记录每一次进行移除图片操作时当前移除图片位于页面的位置；位置数组中每一组位置数据对应一组HTML标签数据。当进行加载上部数组和下部数组中HTML标签数据对应图片至页面的操作时，根据位置数组记录的位置数据确定HTML标签数据对应图片位于页面的位置，且当一组HTML标签数据对应图片加载完成，删除位置数组中相对应的一组位置数据。
在一种实施方式中，还能够设置一高度数组，高度数组用于记录进行页面的滚动操作时当前页面的滚动高度，当进行页面底部图片的移除操作时，判断移除的图片是否在屏幕中显示，若是，则在图片中显示的图片不进行移除，仅移除未在屏幕中显示的图片部分，避免影响用户的使用体验。
本发明实施例的页面瀑布流布局优化方法的原理在于，通过预设页面最多图片数和屏幕最多图片显示数，在进行页面拉动需在页面中加载图片时，对当前页面中总的图片数进行判断，当超过预设页面最多图片数时，进行页面上拉时，则移除页面顶部的部分图片，进行页面下拉时，则移除页面底部的部分图片，使页面中的图片数保持在一合理的范围内，较少渲染加载页面上图片时，计算机的资源消耗，保证页面浏览的流畅度，且移除的图片对应的HTML标签数据保存于上部数组或下部数组中，从而在上下滚动页面，加载该部分移除的图片时，能够根据HTML标签数据达到快速加载图片的目的，提高页面浏览的流畅性。
另外，对应上述页面瀑布流布局优化方法，本发明还提供一种存储介质，存储介质上存储有计算机程序，计算机程序被处理器执行时实现上述各实施例所述的页面瀑布流布局优化方法的步骤。需要说明的是，所述存储介质包括U盘、移动硬盘、ROM(Read-OnlyMemory，只读存储器)、RAM(Random Access Memory，随机存取存储器)、磁碟或者光盘等各种可以存储程序代码的介质。
参见图2所示，对应上述页面瀑布流布局优化方法，本发明还提供一种电子设备，包括存储器和处理器，存储器上储存有在处理器上运行的计算机程序，处理器执行计算机程序时实现上述各实施例的页面瀑布流布局优化方法。
本发明实施例还提供一种基于上述页面瀑布流布局优化方法的页面瀑布流布局优化***，包括设置模块、创建模块、判断模块和执行模块。
创建模块用于新建上部数组和下部数组，所述上部数组用于保存移除的页面上部图片的HTML标签，所述下部数组用于保存移除的页面下部图片的HTML标签；判断模块用于当进行页面拉动操作时，判断当前为页面上拉操作还是页面下拉操作，以及进一步的当为页面上拉操作且当页面上拉至页面底部时，判断下部数组中是否保存有图片的HTML标签数据，当为页面下拉操作且页面下拉至页面顶部时，判断上部数组中是否保存有图片的HTML标签数据。
执行模块用于当下部数组中没有保存图片的HTML标签数据时，加载新的图片，并将新加载的图片以瀑布流形式排版至页面底部，同时当页面中当前已加载的总的图片数大于预设的页面最多图片数时，判断当前新加载的图片数是否大于或等于预设的屏幕最多图片显示数，若是，则移除页面顶部与新加载图片数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于上部数组中，若当前新加载的图片数小于预设的屏幕最多图片显示数，则移除页面顶部与预设屏幕最多图片显示数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于上部数组中，当页面中当前已加载的总的图片数不大于预设的页面最多图片数，则不做处理，以及，当上部数组中保存有图片的HTML标签数据，根据上部数组中保存的最后一组HTML标签数据，加载上部数组中最后一组HTML标签数据对应的图片至页面顶部，同时当页面中当前已加载的总的图片数大于预设的页面最多图片数时，判断页面中当前新加载的图片数是否大于或等于预设的屏幕最多图片显示数，若是，则移除页面底部与新加载图片数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于下部数组中，若页面中当前新加载的图片数小于预设的屏幕最多图片显示数，则移除页面底部与预设屏幕最多图片显示数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于下部数组中，当页面中当前已加载的总的图片数不大于预设的页面最多图片数，则不做处理。
其中，上部数组和下部数组中保存的每一组HTML标签数据按照加入的先后时间顺序排列。页面的顶部指页面加载渲染完成且未加载新图片或未从上部数组中加载HTML标签对应图片时，页面的最上部；页面的底部指页面加载完成且未加载新图片或未从上部数组中加载HTML标签对应图片时，页面的最下部。
本发明的页面瀑布流布局优化***的原理在于，设置模块预设页面最多图片数和屏幕最多图片显示数，通过判断模块，在进行页面拉动需在页面中加载图片时，对当前页面中总的图片数进行判断，当超过预设页面最多图片数时，进行页面上拉时，则移除页面顶部的部分图片，进行页面下拉时，则移除页面底部的部分图片，使页面中的图片数保持在一合理的范围内，较少渲染加载页面上图片时，计算机的资源消耗，保证页面浏览的流畅度，且移除的图片对应的HTML标签数据保存于上部数组或下部数组中，从而在上下滚动页面，加载该部分移除的图片时，能够根据HTML标签数据达到快速加载图片的目的。
本发明不局限于上述实施方式，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围之内。本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。
Claims (10)
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所述的一种页面瀑布流布局优化方法，其特征在于：
还创建有位置数组；
所述位置数组用于对应记录每一次进行移除图片操作时当前移除图片位于页面的位置；
所述位置数组中每一组位置数据对应一组HTML标签数据；
当进行加载上部数组和下部数组中HTML标签数据对应图片至页面的操作时，根据位置数组记录的位置数据确定HTML标签数据对应图片位于页面的位置，且当一组HTML标签数据对应图片加载完成，删除位置数组中相对应的一组位置数据。
6.一种存储介质，该存储介质上存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现权利要求1至5任一项所述的方法。
7.一种电子设备，包括存储器和处理器，存储器上储存有在处理器上运行的计算机程序，其特征在于：所述处理器执行所述计算机程序时实现权利要求1至5任一项所述的方法。
8.一种页面瀑布流布局优化***，其特征在于，包括：
设置模块，其用于预设一页面最多图片数，并基于显示屏的面积，预设一屏幕最多图片显示数；
创建模块，其用于新建上部数组和下部数组，所述上部数组用于保存移除的页面上部图片的HTML标签，所述下部数组用于保存移除的页面下部图片的HTML标签；
判断模块，其用于当进行页面拉动操作时，判断当前为页面上拉操作还是页面下拉操作，以及进一步的当为页面上拉操作且当页面上拉至页面底部时，判断下部数组中是否保存有图片的HTML标签数据，当为页面下拉操作且页面下拉至页面顶部时，判断上部数组中是否保存有图片的HTML标签数据；
执行模块，其用于当下部数组中没有保存图片的HTML标签数据时，加载新的图片，并将新加载的图片以瀑布流形式排版至页面底部，同时当页面中当前已加载的总的图片数大于预设的页面最多图片数时，判断当前新加载的图片数是否大于或等于预设的屏幕最多图片显示数，若是，则移除页面顶部与新加载图片数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于上部数组中，若当前新加载的图片数小于预设的屏幕最多图片显示数，则移除页面顶部与预设屏幕最多图片显示数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于上部数组中，当页面中当前已加载的总的图片数不大于预设的页面最多图片数，则不做处理，以及，当上部数组中保存有图片的HTML标签数据，根据上部数组中保存的最后一组HTML标签数据，加载上部数组中最后一组HTML标签数据对应的图片至页面顶部，同时当页面中当前已加载的总的图片数大于预设的页面最多图片数时，判断页面中当前新加载的图片数是否大于或等于预设的屏幕最多图片显示数，若是，则移除页面底部与新加载图片数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于下部数组中，若页面中当前新加载的图片数小于预设的屏幕最多图片显示数，则移除页面底部与预设屏幕最多图片显示数相同数目的图片，并将当前移除的所有图片对应的HTML标签数据作为一组数据保存于下部数组中，当页面中当前已加载的总的图片数不大于预设的页面最多图片数，则不做处理。
9.如权利要求8所述的一种页面瀑布流布局优化***，其特征在于：所述上部数组和下部数组中保存的每一组HTML标签数据按照加入的先后时间顺序排列。
10.如权利要求8所述的一种页面瀑布流布局优化***，其特征在于：所述页面的顶部指页面加载渲染完成且未加载新图片或未从上部数组中加载HTML标签对应图片时，页面的最上部；所述页面的底部指页面加载完成且未加载新图片或未从上部数组中加载HTML标签对应图片时，页面的最下部。
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710775600.9A CN107577757B (zh) | 2017-08-31 | 2017-08-31 | 页面瀑布流布局优化方法、存储介质、电子设备及*** |
| PCT/CN2017/117374 WO2019041666A1 (zh) | 2017-08-31 | 2017-12-20 | 页面瀑布流布局优化方法、存储介质、电子设备及*** |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710775600.9A CN107577757B (zh) | 2017-08-31 | 2017-08-31 | 页面瀑布流布局优化方法、存储介质、电子设备及*** |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107577757A true CN107577757A (zh) | 2018-01-12 |
| CN107577757B CN107577757B (zh) | 2018-09-04 |
Family
ID=61031021
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710775600.9A Active CN107577757B (zh) | 2017-08-31 | 2017-08-31 | 页面瀑布流布局优化方法、存储介质、电子设备及*** |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN107577757B (zh) |
| WO (1) | WO2019041666A1 (zh) |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108550112A (zh) * | 2018-04-13 | 2018-09-18 | 广东星外星文化传播有限公司 | 九宫格视频合成方法及装置 |
| CN108875085A (zh) * | 2018-07-18 | 2018-11-23 | 平安科技（深圳）有限公司 | 混合应用的图片处理方法、装置、计算机设备及存储介质 |
| CN109408162A (zh) * | 2018-09-03 | 2019-03-01 | 平安普惠企业管理有限公司 | 一种显示页面的方法及终端 |
| CN109710865A (zh) * | 2018-12-06 | 2019-05-03 | 天津字节跳动科技有限公司 | 开放式自动布局方法、装置、电子设备和存储介质 |
| CN109753333A (zh) * | 2019-01-11 | 2019-05-14 | 广州视源电子科技股份有限公司 | 一种界面布局方法、装置、设备及介质 |
| WO2020006859A1 (zh) * | 2018-07-06 | 2020-01-09 | 平安科技（深圳）有限公司 | 一种图片缓存清理方法、装置、终端设备及介质 |
| CN110727893A (zh) * | 2019-10-11 | 2020-01-24 | 北京齐尔布莱特科技有限公司 | 一种瀑布流图片的加载方法、装置和移动终端 |
| CN110809185A (zh) * | 2019-10-22 | 2020-02-18 | 四川长虹电器股份有限公司 | 一种智能电视基于Web化视频预览的主页呈现方法 |
| CN111125571A (zh) * | 2018-10-11 | 2020-05-08 | 杭州海康存储科技有限公司 | 图片显示方法及装置 |
| CN113794723A (zh) * | 2021-09-15 | 2021-12-14 | 北京快来文化传播集团有限公司 | 直播图片懒加载方法和*** |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150095836A1 (en) * | 2012-06-13 | 2015-04-02 | Tencent Technology (Shenzhen) Company Limited | Method, apparatus and computer storage medium for switching pages |
| CN105095200A (zh) * | 2014-04-16 | 2015-11-25 | 北大方正集团有限公司 | 以瀑布流方式显示图片的方法和设备 |
| CN105871945A (zh) * | 2015-01-19 | 2016-08-17 | 阿里巴巴集团控股有限公司 | 图片信息发送方法和装置、瀑布流布局方法和装置 |
-
2017
- 2017-08-31 CN CN201710775600.9A patent/CN107577757B/zh active Active
- 2017-12-20 WO PCT/CN2017/117374 patent/WO2019041666A1/zh active Application Filing
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150095836A1 (en) * | 2012-06-13 | 2015-04-02 | Tencent Technology (Shenzhen) Company Limited | Method, apparatus and computer storage medium for switching pages |
| CN105095200A (zh) * | 2014-04-16 | 2015-11-25 | 北大方正集团有限公司 | 以瀑布流方式显示图片的方法和设备 |
| CN105871945A (zh) * | 2015-01-19 | 2016-08-17 | 阿里巴巴集团控股有限公司 | 图片信息发送方法和装置、瀑布流布局方法和装置 |
Cited By (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108550112A (zh) * | 2018-04-13 | 2018-09-18 | 广东星外星文化传播有限公司 | 九宫格视频合成方法及装置 |
| WO2020006859A1 (zh) * | 2018-07-06 | 2020-01-09 | 平安科技（深圳）有限公司 | 一种图片缓存清理方法、装置、终端设备及介质 |
| CN108875085B (zh) * | 2018-07-18 | 2023-04-07 | 平安科技（深圳）有限公司 | 混合应用的图片处理方法、装置、计算机设备及存储介质 |
| CN108875085A (zh) * | 2018-07-18 | 2018-11-23 | 平安科技（深圳）有限公司 | 混合应用的图片处理方法、装置、计算机设备及存储介质 |
| CN109408162A (zh) * | 2018-09-03 | 2019-03-01 | 平安普惠企业管理有限公司 | 一种显示页面的方法及终端 |
| CN111125571B (zh) * | 2018-10-11 | 2024-02-20 | 杭州海康存储科技有限公司 | 图片显示方法及装置 |
| CN111125571A (zh) * | 2018-10-11 | 2020-05-08 | 杭州海康存储科技有限公司 | 图片显示方法及装置 |
| CN109710865A (zh) * | 2018-12-06 | 2019-05-03 | 天津字节跳动科技有限公司 | 开放式自动布局方法、装置、电子设备和存储介质 |
| CN109753333A (zh) * | 2019-01-11 | 2019-05-14 | 广州视源电子科技股份有限公司 | 一种界面布局方法、装置、设备及介质 |
| CN110727893A (zh) * | 2019-10-11 | 2020-01-24 | 北京齐尔布莱特科技有限公司 | 一种瀑布流图片的加载方法、装置和移动终端 |
| CN110727893B (zh) * | 2019-10-11 | 2022-03-18 | 北京齐尔布莱特科技有限公司 | 一种瀑布流图片的加载方法、装置和移动终端 |
| CN110809185B (zh) * | 2019-10-22 | 2021-06-22 | 四川长虹电器股份有限公司 | 一种智能电视基于Web化视频预览的主页呈现方法 |
| CN110809185A (zh) * | 2019-10-22 | 2020-02-18 | 四川长虹电器股份有限公司 | 一种智能电视基于Web化视频预览的主页呈现方法 |
| CN113794723A (zh) * | 2021-09-15 | 2021-12-14 | 北京快来文化传播集团有限公司 | 直播图片懒加载方法和*** |
Also Published As
| Publication number | Publication date |
|---|---|
| WO2019041666A1 (zh) | 2019-03-07 |
| CN107577757B (zh) | 2018-09-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107577757B (zh) | 页面瀑布流布局优化方法、存储介质、电子设备及*** | |
| US8171401B2 (en) | Resizing an editable area in a web page | |
| CN102508826B (zh) | 一种文档中的表格显示方法及装置 | |
| JP2010187376A5 (zh) | ||
| KR101414195B1 (ko) | 복수의 아이템들을 공간 내에 자동으로 배치하는 장치, 방법 및 컴퓨터 판독 가능한 기록 매체 | |
| CN105069060B (zh) | 一种html文档分页排版方法 | |
| US8793572B2 (en) | Positioning graphical objects within previously formatted text | |
| CN105335445A (zh) | 布局显示方法和装置 | |
| CN110163030A (zh) | 一种基于图像信息的pdf有边框表格抽取方法 | |
| CN103020237A (zh) | 一种网页更新方法和装置 | |
| TW201617940A (zh) | 資料壓縮方法和裝置 | |
| CN107092655A (zh) | 用于Android宽屏设备中组图的循环展示方法及*** | |
| CN106446139A (zh) | 一种提取网页内容的方法及装置 | |
| CN106886398A (zh) | 一种层叠样式表的提取方法和设备 | |
| CN106339496A (zh) | 用于对照片进行清理的方法和装置 | |
| CN105989166A (zh) | 瀑布流式显示对象的方法、装置、***及电子设备 | |
| JP2009519516A (ja) | ワードプロセッサ文書を開くスピードを高める方法 | |
| CN106844606A (zh) | 网页的焦点处理方法及装置 | |
| CN106998489B (zh) | 一种焦点越界搜索方法及装置 | |
| CN109002505A (zh) | 一种目标字符串的显示方法及相关装置 | |
| DE102015008380A1 (de) | Implementierung von verbesserter Leistungsfähigkeit mit Lesen vor Schreiben in Phasenänderungsspeicher, um Schreibabbrüche zu vermeiden | |
| CN112749538A (zh) | 一种智能排版方法及终端 | |
| CN107656908A (zh) | 占位符的实现方法和*** | |
| CN107463696A (zh) | 一种网页页面最大块提取的方法 | |
| CN111460764A (zh) | 电子书籍标注方法、电子设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |