一种以对比瀑布流方式显示图片的方法及系统与流程

1.本发明涉及一种以对比瀑布流方式显示图片的方法及系统，属于浏览器显示技术领域。


背景技术：

2.随着互联网技术与信息技术的发展，在网页上浏览大量图片的情况越来越多，浏览器显示图片的技术多种多样，传统的图片显示方法和系统以瀑布流方式为主，例如专利cn105183474a中记载的瀑布流式图片显示的方法和系统。
3.现有技术是通过拉动的形式展示图片，当图片过多时，上方图片被释放，导致前后图片无法进行同列比对，需来回移动查看，不仅增加浏览时间，还无法进行有效的对比查看。
4.基于上述缺点，本技术提供以对比瀑布流方式显示图片的方法和系统，不仅能够快速展示图片，还能响应于用户选择，比对浏览图片。


技术实现要素：

5.本发明的目的在于克服现有技术中的不足，提供一种以对比瀑布流方式显示图片的方法及系统，既能够实现图片普通浏览，还能够实现图片比对浏览。
6.为达到上述目的，本发明是采用下述技术方案实现的：一方面，本发明提供一种以对比瀑布流方式显示图片的方法，包括以下步骤：获取多张待显示的图片；每张待显示的图片关联一个预设的图片控件；依次将待显示的图片和对应的图片控件加载到预设的瀑布流展示区域中；获取瀑布流展示区域中图片的点击信号ⅰ,响应于获取到所述点击信号ⅰ, 复制被点击图片和对应的图片控件,并在预设的图片对比区域中加载复制的图片和图片控件，获得对应的对比图片和对比图片控件，对比图片控件上加载关闭控件，在瀑布流展示区域中被点击图片及其对应图片控件的最上方加载半透明灰色遮罩；获取图片对比区域中关闭控件的点击信号ⅱ，响应于获取到所述点击信号ⅱ，移除图片对比区域中点击信号ⅱ对应的对比图片、对比图片控件和关闭控件，移除瀑布流展示区域中对应的图片和图片控件的最上方的半透明灰色遮罩。
7.进一步地，所述预设的图片控件包括多个图片控件，每个图片控件设有编码参数，其中，第一个图片控件的编码参数设为x，随后每个图片控件的编码参数为前一个图片控件的编码参数加1。
8.进一步地，所述各图片控件与对应的对比图片控件的编码参数相同。
9.进一步地，所述点击信号ⅰ为鼠标点击信号ⅰ；所述获取瀑布流展示区域中图片的点击信号ⅰ，响应于获取到所述点击信号ⅰ包括:当检测到鼠标点击瀑布流展示区域中图片，将所述鼠标点击时鼠标的光标所在区域的
图片以及对应的图片控件作为待关联图片和图片控件，将所述待关联图片和图片控件与所述鼠标点击瀑布流展示区域中图片的动作进行关联。
10.进一步地，所述点击信号ⅱ为鼠标点击信号ⅱ；所述获取图片对比区域中关闭控件的点击信号ⅱ，响应于获取到所述点击信号ⅱ包括：当检测到鼠标点击关闭控件，将所述鼠标点击时鼠标的光标所在区域的关闭控件以及对应的对比图片和对比图片控件作为待关联关闭控件、对比图片和对比图片控件，将所述待关联关闭控件、对比图片和对比图片控件与所述鼠标点击图片对比区域中关闭控件的动作进行关联。
11.进一步地，所述依次将待显示的图片和对应的图片控件加载到预设的瀑布流展示区域中包括：根据预设的瀑布流展示区域的高度和图片行数计算图片平均高度，并将各待显示的图片和对应的图片控件的高度均缩放至图片平均高度大小；判断待显示的图片张数与图片行数的大小；根据判断的结果和预设的加载规则ⅰ，依次将缩放后的待显示的图片和对应的图片控件加载到预设的瀑布流展示区域。
12.进一步地，所述预设的加载规则ⅰ包括：当待显示的图片张数小于等于图片行数时：在瀑布流展示区域左侧按照从上至下的顺序依次加载各图片控件；当待显示的图片张数大于图片行数时：比较瀑布流展示区域各行的各图片控件的总行宽度值，其中，当各行的各图片控件的总行宽度值的最小值唯一时：第n个图片控件加载到瀑布流展示区域总行宽度值最小的行；当各行的各图片控件的总行宽度值的最小值不唯一时：将第n个图片控件加载到瀑布流展示区域总行宽度值最小的行序号最小的行。
13.进一步地，所述在预设的图片对比区域中加载复制的图片和图片控件，获得对应的对比图片和对比图片控件包括以下步骤：根据预设的图片对比区域宽度和对比图片列数计算对比图片平均宽度，并将复制的图片和图片控件宽度均缩放至图片平均宽度大小；判断图片对比区域中对比图片张数与对比图片列数的大小；根据判断的结果和预设的加载规则ⅱ，将缩放后的复制图片和图片控件加载到预设的图片对比区域；进一步地，所述预设的加载规则ⅱ包括：当图片对比区域中对比图片张数小于对比图片列数时：在图片对比区域首行按照从左至右顺序依次加载复制的图片控件；当图片对比区域中对比图片张数大于等于对比图片列数时：比较图片对比区域中各列的各对比图片控件的总列高度值，其中，当各列的各对比图片控件总列高度值的最小值唯一时：将复制的图片控件加载到图片对比区域中总列高度值最小的列；当各列的各对比图片控件的总列高度值的最小值不唯一时：
将复制的图片控件加载到图片对比区域中总列高度值最小的列序号最小的列。
14.另一方面，本发明提供一种以对比瀑布流方式显示图片的系统，包括以下模块：获取模块，用于获取多张待显示的图片；关联模块，用于每张待显示的图片关联一个预设的图片控件；展示区域加载模块，用于依次将待显示的图片和对应的图片控件加载到预设的瀑布流展示区域中；信号ⅰ触发模块，用于获取瀑布流展示区域中图片的点击信号ⅰ,响应于获取到所述点击信号ⅰ, 复制被点击图片和对应的图片控件,并在预设的图片对比区域中加载复制的图片和图片控件，获得对应的对比图片和对比图片控件，对比图片控件上加载关闭控件，在瀑布流展示区域中被点击图片及其对应图片控件的最上方加载半透明灰色遮罩；信号ⅱ触发模块，用于获取图片对比区域中关闭控件的点击信号ⅱ，响应于获取到所述点击信号ⅱ，移除图片对比区域中点击信号ⅱ对应的对比图片、对比图片控件和关闭控件，移除瀑布流展示区域中对应的图片和图片控件的最上方的半透明灰色遮罩与现有技术相比，本发明所达到的有益效果：本发明通过预设的瀑布流展示区域和图片对比区域，能够实现图片普通浏览和对比浏览；通过设置半透明灰色遮罩，能够将瀑布流展示区域的图片区分成被对比和未对比两类图片，避免用户在一次比对时，重复选取相同的图片进行对比；通过响应点击信号ⅰ的设置，实现将瀑布流展示区域普通浏览的图片加载至图片对比区域进行对比浏览；通过响应点击信号ⅱ的设置，实现释放图片对比区域中对比浏览的图片，并恢复瀑布流展示区域对应图片未对比的状态，以供下次对比选择备用；本发明不仅能够提高用户使用的舒适度，还能提高用户的工作效率。
附图说明
15.图1所示为本发明以对比瀑布流方式显示图片的方法的一种实施例流程图。
具体实施方式
16.下面结合附图对本发明作进一步描述。以下实施例仅用于更加清楚地说明本发明的技术方案，而不能以此来限制本发明的保护范围。
17.实施例1本实施例提供一种以对比瀑布流方式显示图片的方法，参考图1，包括以下步骤：获取多张待显示的图片；每张待显示的图片关联一个预设的图片控件；依次将待显示的图片和对应的图片控件加载到预设的瀑布流展示区域中；获取瀑布流展示区域中图片的点击信号ⅰ,响应于获取到所述点击信号ⅰ, 复制被点击图片和对应的图片控件,并在预设的图片对比区域中加载复制的图片和图片控件，获得对应的对比图片和对比图片控件，对比图片控件上加载关闭控件，在瀑布流展示区域中被点击图片及其对应图片控件的最上方加载半透明灰色遮罩；获取图片对比区域中关闭控件的点击信号ⅱ，响应于获取到所述点击信号ⅱ，移除图片对比区域中点击信号ⅱ对应的对比图片、对比图片控件和关闭控件，移除瀑布流展
示区域中对应的图片和图片控件的最上方的半透明灰色遮罩。
18.本实施例应用时，预先构建图片浏览显示页，图片浏览显示页设置有瀑布流展示区域和图片对比区域。
19.本发明通过预设的瀑布流展示区域和图片对比区域，能够实现图片普通浏览和对比浏览；通过获取并响应点击信号ⅰ，从而实现将瀑布流展示区域普通浏览的图片加载至图片对比区域进行对比浏览；通过获取并响应点击信号ⅱ，从而实现将图片对比区域中对比浏览的图片移除，以及瀑布流展示区域对应图片的灰置状态的解除；本发明通过设置半透明灰色遮罩，能够将瀑布流展示区域的图片区分成被对比和未对比两类图片，避免用户重复点击需对比的图片，提高工作效率。
20.实施例2在实施例1的基础上，本实施例详细介绍了点击信号ⅰ、点击信号ⅱ和预设的图片控件。
21.2.1点击信号ⅰ点击信号ⅰ为鼠标点击信号ⅰ，获取瀑布流展示区域中图片的点击信号ⅰ，响应于获取到所述点击信号ⅰ，即：当检测到鼠标点击瀑布流展示区域中图片，将鼠标点击时鼠标的光标所在区域的图片以及对应的图片控件作为待关联图片和图片控件，将待关联图片和图片控件与鼠标点击瀑布流展示区域中图片的动作进行关联。
22.2.2点击信号ⅱ点击信号ⅱ为鼠标点击信号ⅱ，获取图片对比区域中关闭控件的点击信号ⅱ，响应于获取到所述点击信号ⅱ，即：当检测到鼠标点击关闭控件，将鼠标点击时鼠标的光标所在区域的关闭控件以及对应的对比图片和对比图片控件作为待关联关闭控件、对比图片和对比图片控件，将待关联关闭控件、对比图片和对比图片控件与鼠标点击图片对比区域中关闭控件的动作进行关联。
23.2.3预设的图片控件预设的图片控件包括多个图片控件，每个图片控件设有编码参数，其中，第一个图片控件的编码参数设为x，随后每个图片控件的编码参数为前一个图片控件的编码参数加1。
24.此外，各图片控件与对应的对比图片控件的编码参数相同。
25.本实施例应用时，预设图片控件时，为每个图片控件设有唯一的编码参数，第一个图片控件的编码参数设为1，随后每个图片控件的编码参数为前一个图片控件的编码参数加1，保证每个编码参数的唯一性。
26.应用中，获取图片对比区域中关闭控件的点击信号ⅱ，响应于获取到所述点击信号ⅱ，移除图片对比区域中点击信号ⅱ对应的对比图片、对比图片控件和关闭控件，并根据对比图片控件对应的编码参数，在瀑布流展示区域中找到相同编码参数的图片控件及对应的图片，并将找到的图片控件及对应的图片的最上方的半透明灰色遮罩移除。
27.实施例3在实施例1或2的基础上，本实施例详细介绍了依次将待显示的图片和对应的图片控件加载到预设的瀑布流展示区域中的方法，具体步骤如下：s31根据预设的瀑布流展示区域的高度和图片行数计算图片平均高度，并将各待
显示的图片和对应的图片控件的高度均缩放至图片平均高度大小；s32 判断待显示的图片张数与图片行数的大小；s33根据判断的结果和预设的加载规则ⅰ，依次将缩放后的待显示的图片和对应的图片控件加载到预设的瀑布流展示区域。
28.其中，s33中的预设的加载规则ⅰ包括以下内容：当待显示的图片张数小于等于图片行数时：在瀑布流展示区域左侧按照从上至下的顺序依次加载各图片控件；当待显示的图片张数大于图片行数时：比较瀑布流展示区域各行的各图片控件的总行宽度值。
29.应用中，当各行的各图片控件的总行宽度值的最小值唯一时：第n个图片控件加载到瀑布流展示区域总行宽度值最小的行；当各行的各图片控件的总行宽度值的最小值不唯一时：将第n个图片控件加载到瀑布流展示区域总行宽度值最小的行序号最小的行。
30.实施例4在实施例1、2或3的基础上，本实施例详细介绍了在预设的图片对比区域中加载复制的图片和图片控件，获得对应的对比图片和对比图片控件的方法，包括以下步骤：s41根据预设的图片对比区域宽度和对比图片列数计算对比图片平均宽度，并将复制的图片和图片控件宽度均缩放至图片平均宽度大小；s42判断图片对比区域中对比图片张数与对比图片列数的大小；s43根据判断的结果和预设的加载规则ⅱ，将缩放后的复制图片和图片控件加载到预设的图片对比区域；其中s43中的预设的加载规则ⅱ包括以下内容：当图片对比区域中对比图片张数小于对比图片列数时：在图片对比区域首行按照从左至右顺序依次加载复制的图片控件；当图片对比区域中对比图片张数大于等于对比图片列数时：比较图片对比区域中各列的各对比图片控件的总列高度值。
31.应用中，当各列的各对比图片控件总列高度值的最小值唯一时：将复制的图片控件加载到图片对比区域中总列高度值最小的列；当各列的各对比图片控件的总列高度值的最小值不唯一时：将复制的图片控件加载到图片对比区域中总列高度值最小的列序号最小的列。
32.实施例5在实施例1-4任一实时例的基础上，本实施例获取图片对比区域中关闭控件的点击信号ⅱ，响应于获取到所述点击信号ⅱ，移除图片对比区域中点击信号ⅱ对应的对比图片、对比图片控件和关闭控件后，图片对比区域重新逐一加载剩余的对比图片及对应的对比图片控件，具体如下：判断图片对比区域中剩余的对比图片张数与预设的对比图片列数的大小：当图片对比区域中剩余的对比图片张数小于等于对比图片列数时，在图片对比区域首行按照从左至右顺序依次加载各剩余的对比图片控件；当图片对比区域中剩余的对比图片张数大于对比图片列数时，比较图片对比区域中各列的各对比图片控件的总列高度值。
33.其中，当各列的各对比图片控件总列高度值的最小值唯一时：将剩余的对比图片控件加载到图片对比区域中总列高度值最小的列；当各列的各对比图片控件的总列高度值的最小值不唯一时：将剩余的对比图片控件加载到图片对比区域中总列高度值最小的列序号最小的列。
34.实时例6本实施例介绍一种以对比瀑布流方式显示图片的系统，包括以下模块：获取模块，用于获取多张待显示的图片；关联模块，用于每张待显示的图片关联一个预设的图片控件；展示区域加载模块，用于依次将待显示的图片和对应的图片控件加载到预设的瀑布流展示区域中；信号ⅰ触发模块，用于获取瀑布流展示区域中图片的点击信号ⅰ,响应于获取到所述点击信号ⅰ, 复制被点击图片和对应的图片控件,并在预设的图片对比区域中加载复制的图片和图片控件，获得对应的对比图片和对比图片控件，对比图片控件上加载关闭控件，在瀑布流展示区域中被点击图片及其对应图片控件的最上方加载半透明灰色遮罩；信号ⅱ触发模块，用于获取图片对比区域中关闭控件的点击信号ⅱ，响应于获取到所述点击信号ⅱ，移除图片对比区域中点击信号ⅱ对应的对比图片、对比图片控件和关闭控件，移除瀑布流展示区域中对应的图片和图片控件的最上方的半透明灰色遮罩。
35.上述各功能模块的具体功能实现参照实施例2-5方法中的相关内容。
36.本领域内的技术人员应明白，本技术的实施例可提供为方法、系统、或计算机程序产品。因此，本技术可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器、cd-rom、光学存储器等）上实施的计算机程序产品的形式。
37.本技术是参照根据本技术实施例的方法、设备（系统）、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。
38.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。
39.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。
40.以上结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员
在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，这些均属于本发明的保护之内。