CN105183474B - 瀑布流式图片显示的方法和装置 - Google Patents

Abstract

本发明提供了一种瀑布流式图片显示的方法，所述方法包括：将图片加载到页面可视区域中，获取所述页面可视区域中的图片的属性信息，获取具有预设的动画属性的目标图片，根据所述动画属性对所述目标图片执行相应的突出显示的动画效果。通过让某些图片信息进行突出显示，可以引导用户去关注特定的信息。此外，还提供了一种瀑布流式图片显示的装置。

Description

瀑布流式图片显示的方法和装置

技术领域

本发明涉及浏览器技术领域，特别是涉及一种瀑布流式图片显示的方法和系统。

背景技术

瀑布流，又称瀑布流式布局。它是目前比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据并添加至当前尾部。用户只需要轻轻滑动一下鼠标滚轮，就会有大量的图片呈现在眼前。

瀑布流可以使用户以一眼扫过的快速阅读模式在短时间内获得更多的信息量，且其懒加载的模式又避免了用户点击鼠标进行翻页的操作。但是正是因为其一次性的呈现大量的图片信息，所以很难抓住用户对某一个应用图标或图片的注意，不能引导用户去关注特定的信息。

发明内容

基于此，有必要针对上述技术问题，提供一种能够使某些特定信息突出显示的瀑布流式图片显示的方法。

一种瀑布流式图片显示的方法，所述方法包括：将图片加载到页面可视区域中；获取所述页面可视区域中的图片的属性信息；获取具有预设的动画属性的目标图片；根据所述动画属性对所述目标图片执行相应的突出显示的动画效果。

在其中一个实施例中，所述获取具有预设的动画属性的目标图片的步骤包括：实时检测页面可视区域内是否有具有动画属性的图片；若有，则将所述图片作为目标图片。

在其中一个实施例中，所述获取具有预设的动画属性的目标图片的步骤包括：每隔预设的时间间隔在页面可视区域内随机抽取一张图片；判断所述图片是否具有动画属性；若有，则将所述图片作为目标图片。

在其中一个实施例中，在所述根据所述动画属性对所述目标图片执行突出显示的动画效果的步骤之前，还包括：判断目标图片与页面可视区域边缘的距离是否大于预设长度；若所述目标图片与所述页面可视区域边缘的距离大于预设长度，则进入所述根据所述动画属性对所述目标图片执行相应的突出显示的动画效果的步骤。

在其中一个实施例中，所述动画属性为翻转属性或放大属性。

一种瀑布流式图片显示的装置，所述装置包括：加载模块，用于将图片加载到页面可视区域中；属性获取模块，用于获取所述页面可视区域中的图片的属性信息；图片获取模块，用于获取具有预设的动画属性的目标图片；动画执行模块，用于根据所述动画属性对所述目标图片执行相应的突出显示的动画效果。

在其中一个实施例中，所述图片获取模块用于实时检测页面可视区域内是否有具有动画属性的图片，若有，则将所述图片作为目标图片。

在其中一个实施例中，所述图片获取模块每隔预设的时间间隔在页面可视区域内随机抽取一张图片；判断所述图片是否具有动画属性，若有，则将所述图片作为目标图片。

在其中一个实施例中，所述装置还包括：距离判断模块，用于判断目标图片与页面可视区域边缘的距离是否大于预设长度；若是，则通知所述动画执行模块根据所述动画属性对所述目标图片执行相应的突出显示的动画效果。

在其中一个实施例中，所述动画属性为翻转属性或放大属性。

上述瀑布流式图片显示的方法和装置，通过将图片加载到页面可视区域中，获取所述页面可视区域中的图片的属性信息，获取具有预设的动画属性的目标图片，根据所述动画属性对所述目标图片执行相应的突出显示的动画效果。通过让某些图片信息进行突出显示，可以引导用户去关注特定的信息。

附图说明

图1为一个实施例中瀑布流式图片显示方法的流程图；

图2为一个实施例中获取目标图片的方法流程图；

图3为另一个实施例中获取目标图片的方法流程图；

图4为另一个实施例中瀑布流式图片显示方法的流程图；

图5为一个实施例中瀑布流式图片显示装置的结构框图；

图6为另一个实施例中瀑布流式图片显示装置的结构框图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图1所示，在一个实施例中，提供了一种瀑布流式图片显示的方法，该方法包括：

步骤102，将图片加载到页面可视区域中。

具体的，图片可以是图画、照片、应用图标等以图的形式在网页上呈现的信息。页面可视区域是指当前可观看到的网页区域，也即是在终端屏幕上显示的区域。终端可以是智能手机、平板电脑、笔记本电脑等具有显示屏幕的电子设备。根据用户的浏览网页的请求，将图片加载到当前页面的可视区域供用户浏览观看。

步骤104，获取页面可视区域中的图片的属性信息。

具体的，图片的属性信息包括图片的大小、位置、像素等信息，也包括为某些图片预先特别设置的动画属性信息。

步骤106，获取具有预设的动画属性的目标图片。

在本实施例中，动画属性可以是翻转属性，也可以是放大属性或其他。为了突出显示某些图片的信息，提前为某些特定的图片设置动画属性，根据其动画属性，可以进行相应的动画显示(翻转或放大)。

步骤108，根据所述动画属性对所述目标图片执行相应的突出显示的动画效果。

具体的，执行相应的突出显示动画效果的程序是写入图片显示方式数据包中的，不同的动画属性对应执行不同的动画效果，比如，若图片具有的是翻转属性，则对应的执行图片的翻转效果，其基于Camera算法用二维模拟三维，让图片能够看起来更立体更形象；若图片具有的是放大的属性，则对应的执行图片的放大效果。

在本实施例中，通过将图片加载到页面可视区域中，获取所述页面可视区域中的图片的属性信息，获取具有预设的动画属性的目标图片，根据所述动画属性对所述目标图片执行相应的突出显示的动画效果。通过让某些图片信息进行突出显示，可以引导用户去关注特定的信息。

如图2所示，在一个实施例中，获取具有预设的动画属性的目标图片的步骤包括：

步骤106a，实时检测页面可视区域内是否有具有动画属性的图片，若有，则进入步骤106b，若无，则结束。

在本实施例中，对网页可视区域内的图片进行实时检测，查找具有动画属性的图片。若查找到具有动画属性的图片，则将该图片作为目标图片。

步骤106b，将上述图片作为目标图片。

在本实施例中，将检测到的具有动画属性的图片作为目标图片，根据目标图片的动画属性执行相应的动画效果。

如图3所示，在一个实施例中，获取具有预设的动画属性的目标图片的步骤包括：

步骤106A，每隔预设的时间间隔在页面可视区域内随机抽取一张图片。

具体的，图片的选取可以根据Java伪随机算法，从进入页面可视状态开始计时，每隔设定时间(比如5秒)在页面可视区域随机抽取一张图片。

步骤106B，判断上述图片是否具有动画属性，若有，则进入步骤106C，若无，则结束。

具体的，判断随机抽取的图片是否具有动画属性，即判断图片是否是要进行突出显示的图片，若抽取到的图片具有动画属性则将该图片作为目标图片，若抽取到的图片不具有动画属性则结束。

步骤106C，将上述图片作为目标图片。

具体的，将抽取到的具有动画属性的图片作为目标图片，根据目标图片的动画属性执行相应的动画效果。

如图4所示，在一个实施例中，在根据动画属性对目标图片执行突出显示的动画效果的步骤之前，还包括：

步骤107，判断目标图片与页面可视区域边缘的距离是否大于预设长度，若是，则进入步骤108，若否，则结束。

具体的，页面可视区域边缘即为显示屏幕的边缘，当目标图片与屏幕的四周边缘的距离都大于预设长度(比如1mm)时，此时图片完全处于屏幕中，则根据目标图片所具有的动画属性执行相应的动画效果。若目标图片与屏幕的四周边缘的距离小于预设长度时，则不显示动画效果。

在本实施例中，通过判断目标图片与页面可视区域边缘的距离是否大于预设长度，若是，才根据动画属性对目标图片执行相应的突出显示的动画效果。也就是说，需要突出显示的图片当其整个图片完全在可视区域的范围内才开始进行突出显示，这样能够更容易的吸引用户的关注。

在一个实施例中，上述动画属性可以为翻转属性或放大属性。

具体的，若图片具有的动画属性为翻转属性，图片将进行翻转的突出显示，同理，若图片具有的是放大属性，图片将进行放大的突出显示效果。

如图5所示，在一个实施例中，提供了一种瀑布流式图片显示的装置，该装置包括：

加载模块502，用于将图片加载到页面可视区域中。

属性获取模块504，用于获取页面可视区域中的图片的属性信息。

图片获取模块506，用于获取具有预设的动画属性的目标图片。

动画执行模块508，用于根据动画属性对目标图片执行相应的突出显示的动画效果。

在一个实施例中，图片获取模块用于实时检测页面可视区域内是否有具有动画属性的图片，若有，则将该图片作为目标图片。

在一个实施例中，图片获取模块每隔预设的时间间隔在页面可视区域内随机抽取一张图片；判断该图片是否具有动画属性，若有，则将该图片作为目标图片。

如图6所示，在一个实施例中，上述装置还包括：

距离判断模块507，用于判断目标图片与页面可视区域边缘的距离是否大于预设长度；若是，则通知所述动画执行模块根据所述动画属性对所述目标图片执行相应的突出显示的动画效果。

在一个实施例中，动画属性为翻转属性或放大属性。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (8)

1.一种瀑布流式图片显示的方法，所述方法包括：

将图片加载到页面可视区域中；

获取所述页面可视区域中的图片的属性信息；

获取具有预设的动画属性的目标图片，包括：每隔预设的时间间隔在页面可视区域内随机抽取一张图片；判断所述图片是否具有动画属性；若有，则将所述图片作为目标图片；

根据所述动画属性对所述目标图片执行相应的突出显示的动画效果。

2.根据权利要求1所述的方法，其特征在于，所述获取具有预设的动画属性的目标图片的步骤包括：

实时检测页面可视区域内是否有具有动画属性的图片；

若有，则将所述图片作为目标图片。

3.根据权利要求1所述的方法，其特征在于，在所述根据所述动画属性对所述目标图片执行突出显示的动画效果的步骤之前，还包括：

判断目标图片与页面可视区域边缘的距离是否大于预设长度；

若所述目标图片与所述页面可视区域边缘的距离大于预设长度，则进入所述根据所述动画属性对所述目标图片执行相应的突出显示的动画效果的步骤。

4.根据权利要求1所述的方法，其特征在于，所述动画属性为翻转属性或放大属性。

5.一种瀑布流式图片显示的装置，其特征在于，所述装置包括：

加载模块，用于将图片加载到页面可视区域中；

属性获取模块，用于获取所述页面可视区域中的图片的属性信息；

图片获取模块，用于获取具有预设的动画属性的目标图片；

动画执行模块，用于根据所述动画属性对所述目标图片执行相应的突出显示的动画效果；

所述图片获取模块还用于每隔预设的时间间隔在页面可视区域内随机抽取一张图片；判断所述图片是否具有动画属性，若有，则将所述图片作为目标图片。

6.根据权利要求5所述的装置，其特征在于，所述图片获取模块用于实时检测页面可视区域内是否有具有动画属性的图片，若有，则将所述图片作为目标图片。

7.根据权利要求5所述的装置，其特征在于，所述装置还包括：

距离判断模块，用于判断目标图片与页面可视区域边缘的距离是否大于预设长度；若是，则通知所述动画执行模块根据所述动画属性对所述目标图片执行相应的突出显示的动画效果。

8.根据权利要求5所述的装置，其特征在于，所述动画属性为翻转属性或放大属性。