一种基于移动搜索的加载瀑布流的方法和装置技术领域
本发明涉及移动设备的技术领域，特别是涉及一种基于移动搜索的加载
瀑布流的方法和一种基于移动搜索的加载瀑布流的装置。
背景技术
网络的迅猛发展将人们带入了信息社会和网络经济时代，信息量也随之
迅猛增长，对企业的发展和个人生活都产生了深刻的影响。
在这些海量的信息中，包含了大量的图片资源，例如，新闻组图、摄像
组图等等。
在各大网站中，瀑布流是常用的其中一种图片资源的展示方式。
瀑布流，又称瀑布流式布局，视觉表现为参差不齐的多栏布局，随着页
面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
目前，在移动设备中，通常是由一个瀑布流组件实现瀑布流的功能，耦
合度很高，不便于维护和迭代。
发明内容
鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分
地解决上述问题的一种基于移动搜索的加载瀑布流的方法和相应的一种基
于移动搜索的加载瀑布流的装置。
依据本发明的一个方面，提供了一种基于移动搜索的加载瀑布流的方
法，包括：
在移动设备中向服务器发送图像数据的搜索请求；
调用瀑布流加载器从所述服务器加载、依据所述搜索请求查找的多帧图
像数据；
调用列向瀑布流渲染器将所述多帧图像数据以一列或多列瀑布流的形
式显示在移动设备的搜索结果页面中。
可选地，所述在移动设备中向服务器发送图像数据的搜索请求的步骤包
括：
在移动设备中接收到搜索关键词时，基于所述搜索关键词生成搜索请
求；
将所述搜索请求发送至服务器。
可选地，所述在移动设备中向服务器发送图像数据的搜索请求的步骤包
括：
在移动设备中检测到图片类型被触发时，基于所述图片类型生成搜索请
求；
将所述搜索请求发送至服务器。
可选地，所述调用瀑布流加载器从所述服务器加载、依据所述搜索请求
查找的多帧图像数据的步骤包括：
调用瀑布流加载器从所述服务器加载、依据所述搜索请求查找的、与所
述搜索关键词匹配的多帧图像数据。
可选地，所述调用瀑布流加载器从所述服务器加载、依据所述搜索请求
查找的多帧图像数据的步骤包括：
调用瀑布流加载器从所述服务器加载、依据所述搜索请求查找的、属于
所述图片类型的多帧图像数据。
可选地，所述调用瀑布流加载器从所述服务器加载、依据所述搜索请求
查找的多帧图像数据的步骤包括：
调用瀑布流加载器，按照预设的加载方式从所述服务器加载、依据所述
搜索请求查找的多帧图像数据；
其中，所述加载方式包括如下的一种或多种：
随屏幕滚动时自动加载、手动加载、手动加载n次之后自动加载、m次
自动加载之后手动加载。
可选地，还包括：
调用数据管理器将所述多帧图像数据转换成统一的格式；
调用数据管理器存储转换格式转换的多帧图像数据。
可选地，还包括：
调用数据管理器去除所述多帧图像数据中重复的图像数据。
可选地，所述调用列向瀑布流渲染器将所述多帧图像数据以一列或多列
瀑布流的形式显示在移动设备的搜索结果页面中的步骤包括：
调用列向瀑布流渲染器按照瀑布流对所述多帧图像数据进行排列，将排
列之后的多列图像数据在移动设备的搜索结果页面中进行渲染。
可选地，所述调用列向瀑布流渲染器将所述多帧图像数据以一列或多列
瀑布流的形式显示在移动设备的搜索结果页面中的步骤还包括：
当检测到显示图像数据的窗口大小缩放时，调用列向瀑布流渲染器按照
缩放的信息对所述多帧图像数据重新进行排列。
可选地，所述调用列向瀑布流渲染器将所述多帧图像数据以一列或多列
瀑布流的形式显示在移动设备的搜索结果页面中的步骤还包括：
调用列向瀑布流渲染器隐藏在搜索结果页面之外的图像数据。
根据本发明的另一方面，提供了一种基于移动搜索的加载瀑布流的装
置，包括：
搜索请求器，适于在移动设备中向服务器发送图像数据的搜索请求；
瀑布流加载器，适于从所述服务器加载、依据所述搜索请求查找的多帧
图像数据；
列向瀑布流渲染器，适于将所述多帧图像数据以一列或多列瀑布流的形
式显示在移动设备的搜索结果页面中。
可选地，所述搜索请求器还适于：
在移动设备中接收到搜索关键词时，基于所述搜索关键词生成搜索请
求；
将所述搜索请求发送至服务器。
可选地，所述搜索请求器还适于：
在移动设备中检测到图片类型被触发时，基于所述图片类型生成搜索请
求；
将所述搜索请求发送至服务器。
可选地，所述瀑布流加载器还适于：
调用瀑布流加载器从所述服务器加载、依据所述搜索请求查找的、与所
述搜索关键词匹配的多帧图像数据。
可选地，所述瀑布流加载器还适于：
调用瀑布流加载器从所述服务器加载、依据所述搜索请求查找的、属于
所述图片类型的多帧图像数据。
可选地，所述瀑布流加载器还适于：
调用瀑布流加载器，按照预设的加载方式从所述服务器加载、依据所述
搜索请求查找的多帧图像数据；
其中，所述加载方式包括如下的一种或多种：
随屏幕滚动时自动加载、手动加载、手动加载n次之后自动加载、m次
自动加载之后手动加载。
可选地，还包括数据管理器，适于：
将所述多帧图像数据转换成统一的格式；
存储转换格式转换的多帧图像数据。
可选地，还包括：
数据管理器，适于去除所述多帧图像数据中重复的图像数据。
可选地，所述列向瀑布流渲染器还适于：
调用列向瀑布流渲染器按照瀑布流对所述多帧图像数据进行排列，将排
列之后的多列图像数据在移动设备的搜索结果页面中进行渲染。
可选地，所述列向瀑布流渲染器还适于：
当检测到显示图像数据的窗口大小缩放时，调用列向瀑布流渲染器按照
缩放的信息对所述多帧图像数据重新进行排列。
可选地，所述列向瀑布流渲染器还适于：
调用列向瀑布流渲染器隐藏在搜索结果页面之外的图像数据。
本发明实施例将瀑布流的功能拆分成瀑布流加载器、列向瀑布流渲染
器、数据管理器等各个组件，降低了耦合度，单一组件功能单一且轻量化，
易维护和迭代。
上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技
术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它
目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本
领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，
而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示
相同的部件。在附图中：
图1示出了根据本发明一个实施例的一种基于移动搜索的加载瀑布流的
方法实施例1的步骤流程图；
图2示出了根据本发明一个实施例的一种瀑布流组件的架构示意图；
图3示出了根据本发明一个实施例的一种基于移动搜索的加载瀑布流的
方法实施例2的步骤流程图；
图4示出了根据本发明一个实施例的一种基于移动搜索的加载瀑布流的
装置实施例1的结构框图；以及
图5示出了根据本发明一个实施例的一种基于移动搜索的加载瀑布流的
装置实施例2的结构框图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示
了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不
应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地
理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
参照图1，示出了根据本发明一个实施例的一种基于移动搜索的加载瀑
布流的方法实施例1的步骤流程图，具体可以包括如下步骤：
步骤101，在移动设备中向服务器发送图像数据的搜索请求；
需要说明的是，本发明实施例可以应用在各种移动设备中，例如，手机、
平板电脑、个人数字助理、穿戴设备(如眼镜、手表等)等等。
该移动设备的操作系统可以包括Android(安卓)、IOS、WindowsPhone、
Windows等等，可以安装有可连接搜索引擎的应用，如浏览器、内置微型浏
览器的应用、搜索引擎客户端等等。
在实际应用中，该应用可以将请求头信息通过HTTP(Hypertext
transferprotocol，超文本传送协议)协议向搜索引擎所在的服务器发起搜
索请求。
例如，用户可以通过在搜索引擎的网页中针对某个搜索对象发起搜
索请求，或者在浏览器的搜索插件(plug-ins，可以通过与浏览器、搜索引
擎等进行交互，在浏览器中增加搜索功能)等方式针对某个搜索对象发起
搜索请求等等。
在本发明实施例中，如图2所示，可以具有两种瀑布流的调用逻辑。
在一种调用逻辑中，搜索对象为搜索关键词，即搜索瀑布流调用逻辑
(search/waterfall_render.js)。
在此方式中，用户可以输入搜索关键词，在移动设备中接收到搜索关键
词时，基于搜索关键词生成搜索请求，将搜索请求发送至服务器，请求服务
器搜索与该搜索关键词相关的图像数据。
在另一种搜索方式中，搜索对象为图片类型，即频道瀑布流调用逻辑
(channel/waterfall_render.js)。
在此方式中，用户可以点击图片类型，如汽车、风景、明星等等，在移
动设备中检测到图片类型被触发时，基于图片类型生成搜索请求，将搜索请
求发送至服务器，请求服务器查找属于该图片类型的图像数据。
若搜索引擎的服务器接收到搜索请求之后，可以根据该搜索对象在数
据库中快速检出相关的信息，获得图像数据。
以搜索关键词为例，可以基于倒排索引等方式搜索相关的图像数据。
搜索引擎的搜索流程分为二个部分，一是前端用户请求过程，二是后端
制作数据过程。
一、前端用户请求过程：
1.接收请求：接收用户在搜索引擎输入的搜索关键词；
2.查询词分析：对搜索关键词进行分词处理；
3.检索：根据分词结果，从预先制作的倒排索引中，查找与分词结果相
关的候选的网页；
4.排序：针对候选的图像数据，根据内容相关性、时效性等维度进行排
序。
二、后端制作数据过程：
1.网页抓取：采用爬虫技术，通过网页间的链接关系，抓取互联网的图
像数据并保存。
2.索引制作：对已抓取保存的图像数据进行分析，例如对标题和介绍文
本进行分词处理，根据分词结果制作倒排索引，供前端用户请求过程使用。
步骤102，调用瀑布流加载器从所述服务器加载、依据所述搜索请求查
找的多帧图像数据；
在本发明实施例中，如图2所示，瀑布流加载器(waterfall_loader.js)
为独立的组件，用于从服务器加载图像数据。
相对于搜索瀑布流调用逻辑(search/waterfall_render.js)和频道瀑布流
调用逻辑(channel/waterfall_render.js)而言，瀑布流加载器
(waterfall_loader.js)是公共组件。
在HTTP协议下，应用可以从搜索引擎的服务器接收到HTML
(HypertextMarkupLanguage，超文本标记语言)类型的文档。
应用可以解析该HTML文档，生成树状结构的对象，即DOM
(DocumentObjectModel，文件对象模型)，每个对象是DOM上的一个结
点，而这些对象可以代表文字、图片等网页资源。
应用可以开始显示此HTML文档，并获取其中内嵌的网页资源的地
址，然后再向服务器(如搜索引擎)发起请求来获取这些网页资源，并
在应用的HTML文档中显示。
若搜索请求基于搜索关键词生成，则可以调用瀑布流加载器从服务器加
载、依据搜索请求查找的、与该搜索关键词匹配的多帧图像数据。
若搜索请求基于图片类型生成，则可以调用瀑布流加载器从服务器加
载、依据搜索请求查找的、属于该图片类型的多帧图像数据。
对于自身的加载逻辑，可以调用瀑布流加载器，按照预设的加载方式从
所述服务器加载、依据搜索请求查找的多帧图像数据；
其中，该加载方式可以包括如下的一种或多种：
随屏幕滚动时自动加载、手动加载、手动加载n次之后自动加载、m次
自动加载之后手动加载。
当然，上述加载方式只是作为示例，在实施本发明实施例时，可以根据
实际情况设置其他加载方式，本发明实施例对此不加以限制。另外，除了上
述加载方式外，本领域技术人员还可以根据实际需要采用其它加载方式，本
发明实施例对此也不加以限制。
步骤103，调用列向瀑布流渲染器将所述多帧图像数据以一列或多列瀑
布流的形式显示在移动设备的搜索结果页面中。
在本发明实施例中，如图2所示，列向瀑布流渲染器
(waterfall_multiple_column.js)为独立的组件，用于以瀑布流的布局方式显
示图像数据。
相对于搜索瀑布流调用逻辑(search/waterfall_render.js)和频道瀑布流
调用逻辑(channel/waterfall_render.js)而言，列向瀑布流渲染器
(waterfall_multiple_column.js)是公共组件。
在具体实现中，可以调用列向瀑布流渲染器按照瀑布流对多帧图像数据
进行排列，将排列之后的多列图像数据在移动设备的搜索结果页面中进行渲
染。
其中，在排列时，可以指定图像数据的容器的列个数、列间距、列中间
边框、列宽度等等。
而在列向瀑布流中，列中的图像数据的宽度是一致的，长度不一定是一
致的。
需要说明的是，在一个容器中显示的图像数据，可以为一帧图像数据，
也可以为一组图像数据，本发明实施例对此不加以限制。
当检测到显示图像数据的窗口大小缩放时，调用列向瀑布流渲染器按照
缩放的信息对多帧图像数据重新进行排列。
该窗口可以之搜索结果页面，即显示全部图像数据的窗口，在用户更改
显示规则等情况下会发生变化，如在先显示3列，窗口较大，现在修改为显
示5列，窗口变小，因此，可以对图像数据重新进行排列。
该窗口还可以是单个显示图像数据的窗口，在用户点击某个图像数据
时，会对该图像数据进行放大，窗口变大，可以对图像数据进行重排。
当然，点击某个图像数据时，也可以重新加载一个全屏的窗口显示该图
像数据，不需要进行重排，本发明实施例对此不加以限制。
此外，为提升页面的性能，可以调用列向瀑布流渲染器隐藏在搜索结果
页面之外的图像数据。
本发明实施例将瀑布流的功能拆分成瀑布流加载器、列向瀑布流渲染
器、数据管理器等各个组件，降低了耦合度，单一组件功能单一且轻量化，
易维护和迭代。
参照图3，示出了根据本发明一个实施例的一种基于移动搜索的加载瀑
布流的方法实施例2的步骤流程图，具体可以包括如下步骤：
步骤301，在移动设备中向服务器发送图像数据的搜索请求；
步骤302，调用瀑布流加载器从所述服务器加载、依据所述搜索请求查
找的多帧图像数据；
步骤303，调用列向瀑布流渲染器将所述多帧图像数据以一列或多列瀑
布流的形式显示在移动设备的搜索结果页面中；
步骤304，调用数据管理器将所述多帧图像数据转换成统一的格式；
如图2所示，在本发明实施例中，数据管理器(data_manager.js)为一
个独立的组件，可以用于对图像数据进行管理。
相对于搜索瀑布流调用逻辑(search/waterfall_render.js)和频道瀑布流
调用逻辑(channel/waterfall_render.js)而言，数据管理器(data_manager.js)
是公共组件。
由于搜索引擎搜索到的图像数据来源较广，其格式可能较多，如jpg、
jpeg、png、gif、bmp等等。
为方便管理，可以将图像数据转换为统一的格式，如jpeg等。
步骤305，调用数据管理器存储转换格式转换的多帧图像数据；
图像数据在转换格式之后，可以进行缓存，待显示时调用。
步骤306，调用数据管理器去除所述多帧图像数据中重复的图像数据。
在本发明实施例中，可以预先设定不可重复的字段。
因此，可以调用数据管理器安装该字段对多帧图像数据进行排重处理。
对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，
但是本领域技术人员应该知悉，本发明实施例并不受所描述的动作顺序的限
制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时进行。其
次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施
例，所涉及的动作并不一定是本发明实施例所必须的。
参照图4，示出了根据本发明一个实施例的一种基于移动搜索的加载瀑
布流的装置实施例1的结构框图，具体可以包括如下模块：
搜索请求器401，适于在移动设备中向服务器发送图像数据的搜索请求；
瀑布流加载器402，适于从所述服务器加载、依据所述搜索请求查找的
多帧图像数据；
列向瀑布流渲染器403，适于将所述多帧图像数据以一列或多列瀑布流
的形式显示在移动设备的搜索结果页面中。
在本发明的一种可选实施例中，所述搜索请求器401还可以适于：
在移动设备中接收到搜索关键词时，基于所述搜索关键词生成搜索请
求；
将所述搜索请求发送至服务器。
在本发明的另一种可选实施例中，所述搜索请求器401还可以适于：
在移动设备中检测到图片类型被触发时，基于所述图片类型生成搜索请
求；
将所述搜索请求发送至服务器。
在本发明的一种可选实施例中，所述瀑布流加载器402还可以适于：
调用瀑布流加载器从所述服务器加载、依据所述搜索请求查找的、与所
述搜索关键词匹配的多帧图像数据。
在本发明的另一种可选实施例中，所述瀑布流加载器402还可以适于：
调用瀑布流加载器从所述服务器加载、依据所述搜索请求查找的、属于
所述图片类型的多帧图像数据。
在本发明的一种可选实施例中，所述瀑布流加载器402还可以适于：
调用瀑布流加载器，按照预设的加载方式从所述服务器加载、依据所述
搜索请求查找的多帧图像数据；
其中，所述加载方式包括如下的一种或多种：
随屏幕滚动时自动加载、手动加载、手动加载n次之后自动加载、m次
自动加载之后手动加载。
在本发明的一种可选实施例中，所述列向瀑布流渲染器403还可以适于：
调用列向瀑布流渲染器按照瀑布流对所述多帧图像数据进行排列，将排
列之后的多列图像数据在移动设备的搜索结果页面中进行渲染。
在本发明的一种可选实施例中，所述列向瀑布流渲染器403还可以适于：
当检测到显示图像数据的窗口大小缩放时，调用列向瀑布流渲染器按照
缩放的信息对所述多帧图像数据重新进行排列。
在本发明的一种可选实施例中，所述列向瀑布流渲染器403还可以适于：
调用列向瀑布流渲染器隐藏在搜索结果页面之外的图像数据。
参照图5，示出了根据本发明一个实施例的一种基于移动搜索的加载瀑
布流的装置实施例2的结构框图，具体可以包括如下模块：
搜索请求器501，适于在移动设备中向服务器发送图像数据的搜索请求；
瀑布流加载器502，适于从所述服务器加载、依据所述搜索请求查找的
多帧图像数据；
列向瀑布流渲染器503，适于将所述多帧图像数据以一列或多列瀑布流
的形式显示在移动设备的搜索结果页面中；
数据管理器504，适于将所述多帧图像数据转换成统一的格式；
存储转换格式转换的多帧图像数据；
去除所述多帧图像数据中重复的图像数据。
对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较
简单，相关之处参见方法实施例的部分说明即可。
在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固
有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，
构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定
编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，
并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。
在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本
发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未
详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。
类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个
或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时
被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开
的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求
中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映
的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循
具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利
要求本身都作为本发明的单独实施例。
本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自
适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以
把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可
以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者
单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴
随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或
者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴
随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相
似目的的替代特征来代替。
此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其
它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组
合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权
利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使
用。
本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理
器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当
理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据
本发明实施例的基于移动搜索的加载瀑布流的设备中的一些或者全部部件
的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一
部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。
这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个
或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载
体信号上提供，或者以任何其他形式提供。
应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，
并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换
实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利
要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位
于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可
以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。
在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一
个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。
可将这些单词解释为名称。