图片信息发送方法和装置、瀑布流布局方法和装置的制造方法
【专利摘要】本发明提供一种图片信息发送方法和装置、瀑布流布局方法和装置，其中，图片信息发送方法包括：接收客户端发送的请求图片的图片标识；根据所述图片标识获取所述请求图片的地址信息和高度信息，将所述地址信息和高度信息返回至所述客户端，以使得客户端实现请求图片的瀑布流布局。本发明使得客户端对图片高度的获取摆脱了对图片加载的依赖，大大提高了瀑布流布局的效率，并且整个网页的显示效率也会得到提高。
【专利说明】
图片信息发送方法和装置、瀑布流布局方法和装置
技术领域
[0001]本发明涉及网络技术，特别涉及一种图片信息发送方法和装置、瀑布流布局方法和装置。
【背景技术】
[0002]瀑布流布局是当下非常流行的一种用于展现图片列表的网页布局结构，图片在网页中分为几列进行展示，每列中包括由上到下依次排布的各个展示图片，形成视觉上瀑布的效果。其中，每个图片位于对应该图片的一个瀑布流区块中，在瀑布流布局的实现中，实际上是在每列中逐个增加包含展示图片的瀑布流区块，该增加瀑布流区块的过程可以称为“瀑布流区块的渲染”。
[0003]上述的瀑布流区块的渲染，需要确定瀑布流区块中包含的图片的高度，进而才能确定包含该图片的瀑布流区块的高度，才能够在将瀑布流区块加入到列中时，根据瀑布流区块的高度更新列高度，该列高度用于作为确定其他瀑布流区块添加位置的依据(瀑布流区块要添加在各列中列高度最小的一列)。可见，获取瀑布流区块中包含的图片的高度是瀑布流区块渲染的重要步骤，而当前技术中，需要将图片加载在瀑布流区块中之后才能获取图片高度，但是图片的加载速度较慢，从而降低了瀑布流区块渲染的效率以及网页的显示效率。
【发明内容】
[0004]有鉴于此，本发明提供一种图片信息发送方法和装置、瀑布流布局方法和装置，以提高瀑布流布局的效率。
[0005]具体地，本发明是通过如下技术方案实现的:
[0006]第一方面，提供一种图片信息发送方法，包括:
[0007]接收客户端发送的请求图片的图片标识；
[0008]根据所述图片标识获取所述请求图片的地址信息和高度信息，将所述地址信息和高度信息返回至所述客户端，以使得客户端实现请求图片的瀑布流布局。
[0009]第二方面，提供一种瀑布流布局方法，包括:
[0010]向服务器发送请求图片的图片标识，并接收所述服务器返回的根据所述图片标识获取的请求图片的地址信息和高度信息；
[0011]根据所述地址信息和高度信息，实现所述请求图片的瀑布流布局。
[0012]第三方面，提供一种图片信息发送装置，包括:
[0013]请求接收模块，用于接收客户端发送的请求图片的图片标识；
[0014]信息反馈模块，用于根据所述图片标识获取所述请求图片的地址信息和高度信息，将所述地址信息和高度信息返回至所述客户端，以使得客户端实现请求图片的瀑布流布局。
[0015]第四方面，提供一种瀑布流布局装置，包括:
[0016]信息获取模块，用于向服务器发送请求图片的图片标识，并接收所述服务器返回的根据所述图片标识获取的请求图片的地址信息和高度信息；
[0017]布局处理模块，用于根据所述地址信息和高度信息，实现所述请求图片的瀑布流布局。
[0018]本申请实施例通过由服务器将请求图片的高度信息反馈至客户端，使得客户端对图片高度的获取摆脱了对图片加载的依赖，即使客户端不加载图片，仅根据服务器返回的图片高度信息就可以确定瀑布流区块的高度，从而不必等待图片加载就可以进行瀑布流的渲染，大大提高了瀑布流布局的效率，并且整个网页的显示效率也会得到提高，用户体验更好。
【附图说明】
[0019]图1是本发明实施例提供的一种瀑布流布局的页面示意图；
[0020]图2是本发明实施例提供的瀑布流区块增加原理图；
[0021]图3是本发明实施例提供的瀑布流布局方法的应用场景图；
[0022]图4是本发明实施例提供的一种图片信息发送方法的流程图；
[0023]图5是本发明实施例提供的一种瀑布流布局方法的流程图；
[0024]图6是本发明实施例提供的另一种瀑布流布局方法的流程图；
[0025]图7是本发明实施例提供的图片信息发送装置的结构示意图；
[0026]图8是本发明实施例提供的瀑布流布局装置的结构示意图。
【具体实施方式】
[0027]“瀑布流布局”是当下非常流行的一种用于展现图片列表的网页布局结构，图1示例性的显示了一种采用瀑布流布局的网页(仅示例了网页的一部分)。如图1所示，以在浏览器中打开某个使用了瀑布流布局的网站为例，在该网站显示的网页中，包括多个图片展示列，例如图片展示列11 ;在每个图片展示列中包括由上到下依次排布的各个展示图片(例如，图1中阴影填充的图片12)。在浏览器中，用户可以通过拉动滚动条13，来使得图片展示列中显示的图片越来越多，形成瀑布的视觉效果。
[0028]在描述本申请实施例的瀑布流布局方法之前，为使得该方法更容易理解，首先以图1为例，简单说明下“瀑布流布局”的实现:
[0029]如图1所示，页面中的各个图片实际上是位于对应该图片的一个瀑布流区块中，例如图片12位于瀑布流区块14中，该瀑布流区块14相当于用于容纳图片12的一个容器，该容器中可以仅包括图片12，或者还可以包括与图片12相关的其他内容，比如对于图片12的说明性文字。瀑布流布局的实现，实际上就是在每个图片展示列中逐个增加瀑布流区块，以形成瀑布式的效果。
[0030]瀑布流区块在增加时，可以遵循如下原则“新的瀑布流区块要增加在各列中列高度最小的一列”。结合图1的示例，以图片展示列11为例，L表示该列的列高度，其他列的列高度含义类似。因此，要实现瀑布流布局，就要确定列高度，而列高度的确定需要依据瀑布流区块的高度，更进一步的，瀑布流区块高度的确定又要以区块中的图片高度的确定为前提，图2示意了该原理。本申请实施例中，将生成与要展示的图片对应的瀑布流区块，并对该瀑布流区块执行图2所示的处理的过程，称为“瀑布流区块的渲染”。
[0031]基于上述瀑布流布局的实现原理，如下说明本申请的瀑布流布局方法:
[0032]图3示例了该瀑布流布局方法所涉及到的客户端31和服务器32，以打开某个使用了瀑布流布局的网站为例，该网站的页面可以是运行在PC的浏览器中，本申请实施例可以将运行在浏览器中的网站称为“客户端”，需要说明的是，在后续实施例中所涉及到的客户端执行的处理步骤，包括客户端通过浏览器来执行的动作，比如客户端通过浏览器的javascript接口获取瀑布流区块的高度。此外，网站的页面中显示的各个图片是存储在该网站对应的服务器中，即图3中示意的服务器32，客户端31要从服务器32请求图片，获取到图片后在浏览器中以图1所示的瀑布流的页面布局方式显示这些图片。
[0033]图4示例了本申请实施例提供的一种图片信息发送方法的流程图，该流程可以是服务器执行，包括:
[0034]401、接收客户端发送的请求图片的图片标识；
[0035]402、根据图片标识获取请求图片的地址信息和高度信息，将地址信息和高度信息返回至客户端，以使得客户端实现请求图片的瀑布流布局。
[0036]图5示例了本申请实施例提供的一种瀑布流布局方法的流程图，该流程可以是客户端执行，包括:
[0037]501、向服务器发送请求图片的图片标识，并接收服务器返回的根据图片标识获取的请求图片的地址信息和高度信息；
[0038]502、根据地址信息和高度信息，实现请求图片的瀑布流布局。
[0039]其中，在步骤501中，客户端向服务器发送请求图片的图片标识，仍以打开某个使用了瀑布流布局的网站为例，当用户要浏览该网站中的展示图片时，客户端要从服务器获取该图片。本申请实施例中，可以将要在页面进行显示的图片称为“请求图片”，即要从服务器请求获取的图片；客户端在请求时，可以是请求多个数量的一批图片。上述的图片标识，作用是用于使得服务器获知客户端请求的是哪些图片，该图标标识的具体形式包括但不限于某个参数或某个特定接口 ；示例性的，该标识可以是“I号女装”，以使得服务器据此将I号女装对应的一系列图片反馈至客户端。
[0040]在步骤402中，服务器将根据图片标识获取请求图片的地址信息和高度信息。其中，地址信息是请求图片在服务器中的存储地址，用于客户端根据该地址下载对应的请求图片。所述的高度信息是请求图片的高度，例如，图1中示例的图片12的高度S。服务器将该地址信息和高度信息都返回至客户端。
[0041]在步骤502中，客户端根据服务器返回的地址信息和高度信息，实现所述请求图片的瀑布流布局。需要说明的是，由于在上述的步骤402中，服务器不仅向客户端返回该图片的地址信息，并且还向客户端返回该图片的高度信息，相对于传统方式中的服务器不会向客户端返回高度信息(比如，仅返回地址信息)来说，服务器返回信息具有很大不同，也使得在步骤502中的客户端实现瀑布流布局的处理过程也有了较大的区别。
[0042]参见图6的示例，客户端可以按照图6所示的流程进行瀑布流的布局，需要说明的是，本实施例并不限制图6的各流程步骤之间的执行顺序:
[0043]601、客户端根据图片的地址信息，生成对应的瀑布流区块；
[0044]例如，对于图1中示例的图片12来说，客户端在获取到服务器返回的该图12的地址信息后，将生成与该图片12对应的瀑布流区块14。生成瀑布流区块的方式可以采用常规方式，比如，可以在一个框架式的瀑布流区块14中设定图片12的占据位置，并且，将图片12的地址信息与该占据位置对应，以使得在根据地址信息下载图片12后，图片12能够直接加载在该占据位置的地方。
[0045]具体实现时，瀑布流区块的生成，例如是客户端通过浏览器的JAVASCRIPT接口生成相应的HTML元素(对应瀑布流区块)的结构(html元素是构建网页的一种单位)，其中包括用于承载待展示的图片的IMG元素(对应区块中包括的图片)。此外，为了提高性能，服务器可能会一次返回多个图片的地址信息和高度信息，客户端逐个对每个图片执行该图6所示的流程即可。
[0046]602、客户端将该瀑布流区块，添加到各图片展示列中列高度最小的一列；
[0047]其中，图片展示列的列高度的含义，可以参见图1中示例的图片展示列11的列高度L，客户端将比较各个图片展示列的列高度，选择出列高度最小的一列，将待添加的瀑布流区块添加在该列的末尾(比如是由上到下排布式的最下端)。具体实现时，可以是客户端通过浏览器的JAVASCRIPT接口将瀑布流区块对应的HTML元素结构，添加到目标列(即列高度最小列)的HTML元素结构中。
[0048]603、客户端根据图片的高度信息，确定瀑布流区块的高度；
[0049]其中，客户端可以根据服务器返回的图片的高度信息，确定包含该图片的瀑布流区块的高度。例如，瀑布流区块中可以包括图片，还可以包括对该图片的说明性文字，那该区块的高度就等于图片的高度与说明性文字所占据的高度之和。具体实现时，客户端可以根据服务器返回的高度信息，设置MG元素的高度值，并通过浏览器的JAVASCRIPT接口获取该瀑布流区块的高度。
[0050]604、客户端根据瀑布流区块的高度，更新该区块所在列的列高度。
[0051]其中，在确定了瀑布流区块的高度后，客户端可以更新该区块所在列的列高度，SP在该区块所在列的原有列高度的基础上，增加该瀑布流区块的高度，如果各个瀑布流区块之间具有间距(如图1中示例的间距J)，可以再增加一个表示该间距的高度数值。更新列高度后，该列高度可以用于后续新的瀑布流区块在添加时的列高度比较。
[0052]由上述的步骤可以看到，客户端在瀑布流区块的渲染过程中，是根据服务器返回的图片高度信息确定MG元素的高度，进而得到包含该頂G元素的瀑布流区块的高度，相比于传统方式，传统方式中需要将图片加载到IMG元素的位置才能得到图片的高度，即图片高度的获取依赖于图片的加载，而本实施例中，图片高度是服务器直接反馈至客户端的，摆脱了对图片加载的依赖。即使客户端不加载图片，仅根据服务器返回的图片高度信息就可以确定爆布流区块的尚度，从而不必等待图片加载，大大提尚了爆布流清染的效率，并且整个网页的显示效率也会得到提高，用户体验更好。
[0053]此外，该方法也使得瀑布流的渲染不会阻碍图片懒加载技术的实施，正是由于可以完全不需要在渲染步骤的确定瀑布流区块的高度时加载图片，客户端就可以将图片的加载时间延后，当某个图片的区域将要进入用户的可视区域时才加载，减少对网页其他内容加载的影响，更好的提高了网页性能。
[0054]本申请实施例中，对于图片的加载时间不做限制，可以根据实际需求灵活设定。例如，可以在瀑布流区块的渲染过程中加载，但是此时加载图片不是为获取图片高度，图片高度的获取也不需要等待至图片加载完成；或者，也可以在将请求图片发送至客户端之前，将请求图片对应的地址信息和高度信息返回至所述客户端，比如在瀑布流区块渲染后，将瀑布流区块加入到图片展示列中之后，再加载图片。
[0055]在一个实施例中，服务器可以是在接收到客户端对于图片的请求之前，就获取该图片的高度信息。例如，服务器可以在接收到上传的图片之后，接收到客户端对于该图片的请求之前的任何时间，获取该图片的高度信息；获取方式可以是通过服务器端的编程语言提供的接口来实现。无论是PHP、JAVA还是其他后端编程接口，通常都会提供类似的接口，例如，PHP语言提供了 getimagesize函数用于获取图片的高度信息。在这种方式中，相当于服务器在接收到客户端对于图片的请求之前，就预先存储了图片的高度信息，当接收到客户端发送的图片请求后，查询图片的高度信息发送至客户端即可。
[0056]在另一个实施例中，服务器也可以是在接收到客户端对于图片的请求时，再获取该图片的高度信息。例如，服务器在接收到图片请求时，通过PHP语言提供的getimagesize函数获取图片的高度信息，并提供给客户端。为了尽可能的减小服务器的性能消耗，这种方式中，服务器可以是在接收到对于某个图片的首次请求时，通过接口函数获取图片的高度信息，并且将该高度信息进行存储，这样以后再接收到对于该图片的请求时，就直接将存储的高度信息反馈即可。
[0057]在本申请实施例中，服务器在将向客户端反馈高度信息时，也可以有多种可选的方式。以服务器将高度信息和地址信息一起反馈至客户端为例:
[0058]例如，服务器可以将地址信息和高度信息作为两个单独的数据项，返回至客户端。也就是说，地址信息和高度信息是分开的两个单独的信息，客户端侧也可以从服务器返回的信息中，分别提取出地址信息和高度信息。具体实施时，服务器可以在获取到图片后，生成与该图片对应的地址信息，并通过接口函数获取到该图片的高度信息，将地址信息和高度信息分别与该图片建立对应关系，当接收到对于该图片的请求时，查询图片对应的地址信息和高度信息反馈。
[0059]又例如，服务器还可以将高度信息作为所述地址信息的一部分，返回至所述客户端。比如，可以将图片的高度信息保存在图片的URL地址里，对于宽240，高220的一张图片，可以为其生成这样的 URL 地址:http://www.example, com/path/filename.240*220.jpg，其中的240*220即用于表示该图片的宽和高的值。这只是一种示例，高度信息设置在地址信息中的方式不局限于此，比如还可以是如下的URL地址:http://www.example, com/path/filename.h220.jpg,其中的“h220”用来指明该图片的高度值。
[0060]需要说明的是，当采用将高度信息作为地址信息的一部分的方式时，可以有效节省服务器的性能开销。例如，如果服务器分别读取图片的地址信息和高度信息，相当于执行两次读取过程，消耗服务器资源；而如果将高度信息设置在地址信息中，那么服务器只需要读取与图片对应的地址信息即可，即获取动作只需要执行一次，从而降低了服务器的性能开销。
[0061]可选的，上述的客户端需要获知每个图片展示列的列高度，以根据该列高度将瀑布流区块添加在列高度最小的一列，而且每个列高度将会在添加了新的瀑布流区块时得到更新。对此，本实施例可以设定为，在将瀑布流区块加入某个图片展示列后，就更新该列的列高度，并将该列高度进行存储以备后续使用，此时可以为每个列维护一个表示此列高度的值，更新该高度值即可；或者，也可以设定为，在将瀑布流区块加入某个图片展示列后，暂时不获取更新的列高度，而是在后续要将添加新的瀑布流区块选择其添加在哪列时，才获取上述更新的列高度，比如可以通过浏览器的JAVASCRIPT接口获取各列的高度值，再选择高度最短的一列。
[0062]本申请实施例的瀑布流布局的实现，在细节上可以有很多可变化的地方，但只要用到了 “服务器端预获取图片的高度信息，并返回给客户端用于瀑布流布局的渲染，从而使瀑布流布局的渲染不需要依赖图片的加载”来实现瀑布流布局的，都是与本申请的瀑布流布局方法相符合的。
[0063]为了实现上述的图片信息发送方法，本申请实施例还提供了一种图片信息发送装置，该装置参见图7，图7所示结构的装置可以应用于服务器端，以使得服务器端执行上述图片信息发送方法，本实施例仅对该装置的结构做简单说明，其具体的工作原理可以结合参见方法实施例。该装置包括:请求接收模块71和信息反馈模块72 ;其中，
[0064]请求接收模块71，用于接收客户端发送的请求图片的图片标识；
[0065]信息反馈模块72，用于根据所述图片标识获取所述请求图片的地址信息和高度信息，将所述地址信息和高度信息返回至所述客户端，以使得客户端实现请求图片的瀑布流布局。
[0066]进一步的，信息反馈模块72，在将所述地址信息和高度信息返回至所述客户端时，具体用于在将所述请求图片发送至所述客户端之前，将所述地址信息和高度信息返回至所述客户端。
[0067]进一步的，信息反馈模块72，在将地址信息和高度信息返回至客户端时，是用于将所述地址信息和高度信息作为两个单独的数据项返回至所述客户端。
[0068]进一步的，信息反馈模块72，在将地址信息和高度信息返回至所述客户端时，是用于将所述高度信息作为所述地址信息的一部分，返回至所述客户端。
[0069]为了实现上述的瀑布流布局方法，本申请实施例还提供了一种瀑布流布局装置，该装置参见图8，图8所示结构的装置可以应用于客户端，以使得客户端执行上述瀑布流布局方法，本实施例仅对该装置的结构做简单说明，其具体的工作原理可以结合参见方法实施例。该装置包括:信息获取模块81和布局处理模块82，其中，
[0070]信息获取模块81，用于向服务器发送请求图片的图片标识，并接收所述服务器返回的根据所述图片标识获取的请求图片的地址信息和高度信息；
[0071]布局处理模块82，用于根据所述地址信息和高度信息，实现所述请求图片的瀑布流布局。
[0072]进一步的，信息获取模块81，在接收服务器返回的根据图片标识获取的请求图片的地址信息和高度信息时，具体是用于在加载所述请求图片之前，接收所述服务器返回的根据所述图片标识获取的请求图片的地址信息和高度信息。
[0073]进一步的，布局处理模块82，具体用于:根据所述高度信息，确定所述请求图片对应的瀑布流区块的高度，根据所述地址信息，将所述请求图片加载至所述瀑布流区块。
[0074]以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。
【主权项】
1.一种图片信息发送方法，其特征在于，包括: 接收客户端发送的请求图片的图片标识； 根据所述图片标识获取所述请求图片的地址信息和高度信息，将所述地址信息和高度信息返回至所述客户端，以使得客户端实现请求图片的瀑布流布局。2.根据权利要求1所述的方法，其特征在于，所述将所述地址信息和高度信息返回至所述客户端，包括: 在将所述请求图片发送至所述客户端之前，将所述地址信息和高度信息返回至所述客户端。3.根据权利要求1所述的方法，其特征在于，所述地址信息和高度信息，是预存储的；或者，是在接收到所述客户端发送的请求图片的图片标识时获取。4.根据权利要求1所述的方法，其特征在于，所述将所述地址信息和高度信息返回至所述客户端，包括: 将所述地址信息和高度信息作为两个单独的数据项，返回至所述客户端。5.根据权利要求1所述的方法，其特征在于，所述将所述地址信息和高度信息返回至所述客户端，包括: 将所述高度信息作为所述地址信息的一部分，返回至所述客户端。6.一种瀑布流布局方法，其特征在于，包括: 向服务器发送请求图片的图片标识，并接收所述服务器返回的根据所述图片标识获取的请求图片的地址信息和高度信息； 根据所述地址信息和高度信息，实现所述请求图片的瀑布流布局。7.根据权利要求6所述的方法，其特征在于，所述接收所述服务器返回的根据所述图片标识获取的请求图片的地址?目息和尚度?目息，包括: 在加载所述请求图片之前，接收所述服务器返回的根据所述图片标识获取的请求图片的地址信息和高度信息。8.根据权利要求6所述的方法，其特征在于，所述根据所述地址信息和高度信息，实现所述请求图片的瀑布流布局，包括: 根据所述高度信息，确定所述请求图片对应的瀑布流区块的高度； 根据所述地址信息，将所述请求图片加载至所述瀑布流区块。9.一种图片信息发送装置，其特征在于，包括: 请求接收模块，用于接收客户端发送的请求图片的图片标识； 信息反馈模块，用于根据所述图片标识获取所述请求图片的地址信息和高度信息，将所述地址信息和高度信息返回至所述客户端，以使得客户端实现请求图片的瀑布流布局。10.根据权利要求9所述的装置，其特征在于， 所述信息反馈模块，在将所述地址信息和高度信息返回至所述客户端时，具体用于在将所述请求图片发送至所述客户端之前，将所述地址信息和高度信息返回至所述客户端。11.根据权利要求9所述的装置，其特征在于， 所述信息反馈模块，在将所述地址信息和高度信息返回至所述客户端时，是用于将所述地址信息和高度信息作为两个单独的数据项返回至所述客户端。12.根据权利要求9所述的装置，其特征在于， 所述信息反馈模块，在将所述地址信息和高度信息返回至所述客户端时，是用于将所述高度信息作为所述地址信息的一部分，返回至所述客户端。13.—种瀑布流布局装置，其特征在于，包括: 信息获取模块，用于向服务器发送请求图片的图片标识，并接收所述服务器返回的根据所述图片标识获取的请求图片的地址信息和高度信息； 布局处理模块，用于根据所述地址信息和高度信息，实现所述请求图片的瀑布流布局。14.根据权利要求13所述装置，其特征在于， 所述信息获取模块，在接收所述服务器返回的根据所述图片标识获取的请求图片的地址信息和高度信息时，具体是用于在加载所述请求图片之前，接收所述服务器返回的根据所述图片标识获取的请求图片的地址信息和高度信息。15.根据权利要求13所述的装置，其特征在于，所述布局处理模块，具体用于:根据所述高度信息，确定所述请求图片对应的瀑布流区块的高度，根据所述地址信息，将所述请求图片加载至所述瀑布流区块。
【文档编号】H04L29/08GK105871945SQ201510026407
【公开日】2016年8月17日
【申请日】2015年1月19日
【发明人】李鹏
【申请人】阿里巴巴集团控股有限公司