圖片信息發(fā)送方法和裝置、瀑布流布局方法和裝置的制造方法
【專(zhuān)利摘要】本發(fā)明提供一種圖片信息發(fā)送方法和裝置、瀑布流布局方法和裝置，其中，圖片信息發(fā)送方法包括：接收客戶端發(fā)送的請(qǐng)求圖片的圖片標(biāo)識(shí)；根據(jù)所述圖片標(biāo)識(shí)獲取所述請(qǐng)求圖片的地址信息和高度信息，將所述地址信息和高度信息返回至所述客戶端，以使得客戶端實(shí)現(xiàn)請(qǐng)求圖片的瀑布流布局。本發(fā)明使得客戶端對(duì)圖片高度的獲取擺脫了對(duì)圖片加載的依賴(lài)，大大提高了瀑布流布局的效率，并且整個(gè)網(wǎng)頁(yè)的顯示效率也會(huì)得到提高。
【專(zhuān)利說(shuō)明】
圖片信息發(fā)送方法和裝置、瀑布流布局方法和裝置
技術(shù)領(lǐng)域
[0001]本發(fā)明涉及網(wǎng)絡(luò)技術(shù)，特別涉及一種圖片信息發(fā)送方法和裝置、瀑布流布局方法和裝置。
【背景技術(shù)】
[0002]瀑布流布局是當(dāng)下非常流行的一種用于展現(xiàn)圖片列表的網(wǎng)頁(yè)布局結(jié)構(gòu)，圖片在網(wǎng)頁(yè)中分為幾列進(jìn)行展示，每列中包括由上到下依次排布的各個(gè)展示圖片，形成視覺(jué)上瀑布的效果。其中，每個(gè)圖片位于對(duì)應(yīng)該圖片的一個(gè)瀑布流區(qū)塊中，在瀑布流布局的實(shí)現(xiàn)中，實(shí)際上是在每列中逐個(gè)增加包含展示圖片的瀑布流區(qū)塊，該增加瀑布流區(qū)塊的過(guò)程可以稱(chēng)為“瀑布流區(qū)塊的渲染”。
[0003]上述的瀑布流區(qū)塊的渲染，需要確定瀑布流區(qū)塊中包含的圖片的高度，進(jìn)而才能確定包含該圖片的瀑布流區(qū)塊的高度，才能夠在將瀑布流區(qū)塊加入到列中時(shí)，根據(jù)瀑布流區(qū)塊的高度更新列高度，該列高度用于作為確定其他瀑布流區(qū)塊添加位置的依據(jù)(瀑布流區(qū)塊要添加在各列中列高度最小的一列)。可見(jiàn)，獲取瀑布流區(qū)塊中包含的圖片的高度是瀑布流區(qū)塊渲染的重要步驟，而當(dāng)前技術(shù)中，需要將圖片加載在瀑布流區(qū)塊中之后才能獲取圖片高度，但是圖片的加載速度較慢，從而降低了瀑布流區(qū)塊渲染的效率以及網(wǎng)頁(yè)的顯示效率。

【發(fā)明內(nèi)容】

[0004]有鑒于此，本發(fā)明提供一種圖片信息發(fā)送方法和裝置、瀑布流布局方法和裝置，以提高瀑布流布局的效率。
[0005]具體地，本發(fā)明是通過(guò)如下技術(shù)方案實(shí)現(xiàn)的:
[0006]第一方面，提供一種圖片信息發(fā)送方法，包括:
[0007]接收客戶端發(fā)送的請(qǐng)求圖片的圖片標(biāo)識(shí)；
[0008]根據(jù)所述圖片標(biāo)識(shí)獲取所述請(qǐng)求圖片的地址信息和高度信息，將所述地址信息和高度信息返回至所述客戶端，以使得客戶端實(shí)現(xiàn)請(qǐng)求圖片的瀑布流布局。
[0009]第二方面，提供一種瀑布流布局方法，包括:
[0010]向服務(wù)器發(fā)送請(qǐng)求圖片的圖片標(biāo)識(shí)，并接收所述服務(wù)器返回的根據(jù)所述圖片標(biāo)識(shí)獲取的請(qǐng)求圖片的地址信息和高度信息；
[0011]根據(jù)所述地址信息和高度信息，實(shí)現(xiàn)所述請(qǐng)求圖片的瀑布流布局。
[0012]第三方面，提供一種圖片信息發(fā)送裝置，包括:
[0013]請(qǐng)求接收模塊，用于接收客戶端發(fā)送的請(qǐng)求圖片的圖片標(biāo)識(shí)；
[0014]信息反饋模塊，用于根據(jù)所述圖片標(biāo)識(shí)獲取所述請(qǐng)求圖片的地址信息和高度信息，將所述地址信息和高度信息返回至所述客戶端，以使得客戶端實(shí)現(xiàn)請(qǐng)求圖片的瀑布流布局。
[0015]第四方面，提供一種瀑布流布局裝置，包括:
[0016]信息獲取模塊，用于向服務(wù)器發(fā)送請(qǐng)求圖片的圖片標(biāo)識(shí)，并接收所述服務(wù)器返回的根據(jù)所述圖片標(biāo)識(shí)獲取的請(qǐng)求圖片的地址信息和高度信息；
[0017]布局處理模塊，用于根據(jù)所述地址信息和高度信息，實(shí)現(xiàn)所述請(qǐng)求圖片的瀑布流布局。
[0018]本申請(qǐng)實(shí)施例通過(guò)由服務(wù)器將請(qǐng)求圖片的高度信息反饋至客戶端，使得客戶端對(duì)圖片高度的獲取擺脫了對(duì)圖片加載的依賴(lài)，即使客戶端不加載圖片，僅根據(jù)服務(wù)器返回的圖片高度信息就可以確定瀑布流區(qū)塊的高度，從而不必等待圖片加載就可以進(jìn)行瀑布流的渲染，大大提高了瀑布流布局的效率，并且整個(gè)網(wǎng)頁(yè)的顯示效率也會(huì)得到提高，用戶體驗(yàn)更好。
【附圖說(shuō)明】
[0019]圖1是本發(fā)明實(shí)施例提供的一種瀑布流布局的頁(yè)面示意圖；
[0020]圖2是本發(fā)明實(shí)施例提供的瀑布流區(qū)塊增加原理圖；
[0021]圖3是本發(fā)明實(shí)施例提供的瀑布流布局方法的應(yīng)用場(chǎng)景圖；
[0022]圖4是本發(fā)明實(shí)施例提供的一種圖片信息發(fā)送方法的流程圖；
[0023]圖5是本發(fā)明實(shí)施例提供的一種瀑布流布局方法的流程圖；
[0024]圖6是本發(fā)明實(shí)施例提供的另一種瀑布流布局方法的流程圖；
[0025]圖7是本發(fā)明實(shí)施例提供的圖片信息發(fā)送裝置的結(jié)構(gòu)示意圖；
[0026]圖8是本發(fā)明實(shí)施例提供的瀑布流布局裝置的結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0027]“瀑布流布局”是當(dāng)下非常流行的一種用于展現(xiàn)圖片列表的網(wǎng)頁(yè)布局結(jié)構(gòu)，圖1示例性的顯示了一種采用瀑布流布局的網(wǎng)頁(yè)(僅示例了網(wǎng)頁(yè)的一部分)。如圖1所示，以在瀏覽器中打開(kāi)某個(gè)使用了瀑布流布局的網(wǎng)站為例，在該網(wǎng)站顯示的網(wǎng)頁(yè)中，包括多個(gè)圖片展示列，例如圖片展示列11 ;在每個(gè)圖片展示列中包括由上到下依次排布的各個(gè)展示圖片(例如，圖1中陰影填充的圖片12)。在瀏覽器中，用戶可以通過(guò)拉動(dòng)滾動(dòng)條13，來(lái)使得圖片展示列中顯示的圖片越來(lái)越多，形成瀑布的視覺(jué)效果。
[0028]在描述本申請(qǐng)實(shí)施例的瀑布流布局方法之前，為使得該方法更容易理解，首先以圖1為例，簡(jiǎn)單說(shuō)明下“瀑布流布局”的實(shí)現(xiàn):
[0029]如圖1所示，頁(yè)面中的各個(gè)圖片實(shí)際上是位于對(duì)應(yīng)該圖片的一個(gè)瀑布流區(qū)塊中，例如圖片12位于瀑布流區(qū)塊14中，該瀑布流區(qū)塊14相當(dāng)于用于容納圖片12的一個(gè)容器，該容器中可以僅包括圖片12，或者還可以包括與圖片12相關(guān)的其他內(nèi)容，比如對(duì)于圖片12的說(shuō)明性文字。瀑布流布局的實(shí)現(xiàn)，實(shí)際上就是在每個(gè)圖片展示列中逐個(gè)增加瀑布流區(qū)塊，以形成瀑布式的效果。
[0030]瀑布流區(qū)塊在增加時(shí)，可以遵循如下原則“新的瀑布流區(qū)塊要增加在各列中列高度最小的一列”。結(jié)合圖1的示例，以圖片展示列11為例，L表示該列的列高度，其他列的列高度含義類(lèi)似。因此，要實(shí)現(xiàn)瀑布流布局，就要確定列高度，而列高度的確定需要依據(jù)瀑布流區(qū)塊的高度，更進(jìn)一步的，瀑布流區(qū)塊高度的確定又要以區(qū)塊中的圖片高度的確定為前提，圖2示意了該原理。本申請(qǐng)實(shí)施例中，將生成與要展示的圖片對(duì)應(yīng)的瀑布流區(qū)塊，并對(duì)該瀑布流區(qū)塊執(zhí)行圖2所示的處理的過(guò)程，稱(chēng)為“瀑布流區(qū)塊的渲染”。
[0031]基于上述瀑布流布局的實(shí)現(xiàn)原理，如下說(shuō)明本申請(qǐng)的瀑布流布局方法:
[0032]圖3示例了該瀑布流布局方法所涉及到的客戶端31和服務(wù)器32，以打開(kāi)某個(gè)使用了瀑布流布局的網(wǎng)站為例，該網(wǎng)站的頁(yè)面可以是運(yùn)行在PC的瀏覽器中，本申請(qǐng)實(shí)施例可以將運(yùn)行在瀏覽器中的網(wǎng)站稱(chēng)為“客戶端”，需要說(shuō)明的是，在后續(xù)實(shí)施例中所涉及到的客戶端執(zhí)行的處理步驟，包括客戶端通過(guò)瀏覽器來(lái)執(zhí)行的動(dòng)作，比如客戶端通過(guò)瀏覽器的javascript接口獲取瀑布流區(qū)塊的高度。此外，網(wǎng)站的頁(yè)面中顯示的各個(gè)圖片是存儲(chǔ)在該網(wǎng)站對(duì)應(yīng)的服務(wù)器中，即圖3中示意的服務(wù)器32，客戶端31要從服務(wù)器32請(qǐng)求圖片，獲取到圖片后在瀏覽器中以圖1所示的瀑布流的頁(yè)面布局方式顯示這些圖片。
[0033]圖4示例了本申請(qǐng)實(shí)施例提供的一種圖片信息發(fā)送方法的流程圖，該流程可以是服務(wù)器執(zhí)行，包括:
[0034]401、接收客戶端發(fā)送的請(qǐng)求圖片的圖片標(biāo)識(shí)；
[0035]402、根據(jù)圖片標(biāo)識(shí)獲取請(qǐng)求圖片的地址信息和高度信息，將地址信息和高度信息返回至客戶端，以使得客戶端實(shí)現(xiàn)請(qǐng)求圖片的瀑布流布局。
[0036]圖5示例了本申請(qǐng)實(shí)施例提供的一種瀑布流布局方法的流程圖，該流程可以是客戶端執(zhí)行，包括:
[0037]501、向服務(wù)器發(fā)送請(qǐng)求圖片的圖片標(biāo)識(shí)，并接收服務(wù)器返回的根據(jù)圖片標(biāo)識(shí)獲取的請(qǐng)求圖片的地址信息和高度信息；
[0038]502、根據(jù)地址信息和高度信息，實(shí)現(xiàn)請(qǐng)求圖片的瀑布流布局。
[0039]其中，在步驟501中，客戶端向服務(wù)器發(fā)送請(qǐng)求圖片的圖片標(biāo)識(shí)，仍以打開(kāi)某個(gè)使用了瀑布流布局的網(wǎng)站為例，當(dāng)用戶要瀏覽該網(wǎng)站中的展示圖片時(shí)，客戶端要從服務(wù)器獲取該圖片。本申請(qǐng)實(shí)施例中，可以將要在頁(yè)面進(jìn)行顯示的圖片稱(chēng)為“請(qǐng)求圖片”，即要從服務(wù)器請(qǐng)求獲取的圖片；客戶端在請(qǐng)求時(shí)，可以是請(qǐng)求多個(gè)數(shù)量的一批圖片。上述的圖片標(biāo)識(shí)，作用是用于使得服務(wù)器獲知客戶端請(qǐng)求的是哪些圖片，該圖標(biāo)標(biāo)識(shí)的具體形式包括但不限于某個(gè)參數(shù)或某個(gè)特定接口 ；示例性的，該標(biāo)識(shí)可以是“I號(hào)女裝”，以使得服務(wù)器據(jù)此將I號(hào)女裝對(duì)應(yīng)的一系列圖片反饋至客戶端。
[0040]在步驟402中，服務(wù)器將根據(jù)圖片標(biāo)識(shí)獲取請(qǐng)求圖片的地址信息和高度信息。其中，地址信息是請(qǐng)求圖片在服務(wù)器中的存儲(chǔ)地址，用于客戶端根據(jù)該地址下載對(duì)應(yīng)的請(qǐng)求圖片。所述的高度信息是請(qǐng)求圖片的高度，例如，圖1中示例的圖片12的高度S。服務(wù)器將該地址信息和高度信息都返回至客戶端。
[0041]在步驟502中，客戶端根據(jù)服務(wù)器返回的地址信息和高度信息，實(shí)現(xiàn)所述請(qǐng)求圖片的瀑布流布局。需要說(shuō)明的是，由于在上述的步驟402中，服務(wù)器不僅向客戶端返回該圖片的地址信息，并且還向客戶端返回該圖片的高度信息，相對(duì)于傳統(tǒng)方式中的服務(wù)器不會(huì)向客戶端返回高度信息(比如，僅返回地址信息)來(lái)說(shuō)，服務(wù)器返回信息具有很大不同，也使得在步驟502中的客戶端實(shí)現(xiàn)瀑布流布局的處理過(guò)程也有了較大的區(qū)別。
[0042]參見(jiàn)圖6的示例，客戶端可以按照?qǐng)D6所示的流程進(jìn)行瀑布流的布局，需要說(shuō)明的是，本實(shí)施例并不限制圖6的各流程步驟之間的執(zhí)行順序:
[0043]601、客戶端根據(jù)圖片的地址信息，生成對(duì)應(yīng)的瀑布流區(qū)塊；
[0044]例如，對(duì)于圖1中示例的圖片12來(lái)說(shuō)，客戶端在獲取到服務(wù)器返回的該圖12的地址信息后，將生成與該圖片12對(duì)應(yīng)的瀑布流區(qū)塊14。生成瀑布流區(qū)塊的方式可以采用常規(guī)方式，比如，可以在一個(gè)框架式的瀑布流區(qū)塊14中設(shè)定圖片12的占據(jù)位置，并且，將圖片12的地址信息與該占據(jù)位置對(duì)應(yīng)，以使得在根據(jù)地址信息下載圖片12后，圖片12能夠直接加載在該占據(jù)位置的地方。
[0045]具體實(shí)現(xiàn)時(shí)，瀑布流區(qū)塊的生成，例如是客戶端通過(guò)瀏覽器的JAVASCRIPT接口生成相應(yīng)的HTML元素(對(duì)應(yīng)瀑布流區(qū)塊)的結(jié)構(gòu)(html元素是構(gòu)建網(wǎng)頁(yè)的一種單位)，其中包括用于承載待展示的圖片的IMG元素(對(duì)應(yīng)區(qū)塊中包括的圖片)。此外，為了提高性能，服務(wù)器可能會(huì)一次返回多個(gè)圖片的地址信息和高度信息，客戶端逐個(gè)對(duì)每個(gè)圖片執(zhí)行該圖6所示的流程即可。
[0046]602、客戶端將該瀑布流區(qū)塊，添加到各圖片展示列中列高度最小的一列；
[0047]其中，圖片展示列的列高度的含義，可以參見(jiàn)圖1中示例的圖片展示列11的列高度L，客戶端將比較各個(gè)圖片展示列的列高度，選擇出列高度最小的一列，將待添加的瀑布流區(qū)塊添加在該列的末尾(比如是由上到下排布式的最下端)。具體實(shí)現(xiàn)時(shí)，可以是客戶端通過(guò)瀏覽器的JAVASCRIPT接口將瀑布流區(qū)塊對(duì)應(yīng)的HTML元素結(jié)構(gòu)，添加到目標(biāo)列(即列高度最小列)的HTML元素結(jié)構(gòu)中。
[0048]603、客戶端根據(jù)圖片的高度信息，確定瀑布流區(qū)塊的高度；
[0049]其中，客戶端可以根據(jù)服務(wù)器返回的圖片的高度信息，確定包含該圖片的瀑布流區(qū)塊的高度。例如，瀑布流區(qū)塊中可以包括圖片，還可以包括對(duì)該圖片的說(shuō)明性文字，那該區(qū)塊的高度就等于圖片的高度與說(shuō)明性文字所占據(jù)的高度之和。具體實(shí)現(xiàn)時(shí)，客戶端可以根據(jù)服務(wù)器返回的高度信息，設(shè)置MG元素的高度值，并通過(guò)瀏覽器的JAVASCRIPT接口獲取該瀑布流區(qū)塊的高度。
[0050]604、客戶端根據(jù)瀑布流區(qū)塊的高度，更新該區(qū)塊所在列的列高度。
[0051]其中，在確定了瀑布流區(qū)塊的高度后，客戶端可以更新該區(qū)塊所在列的列高度，SP在該區(qū)塊所在列的原有列高度的基礎(chǔ)上，增加該瀑布流區(qū)塊的高度，如果各個(gè)瀑布流區(qū)塊之間具有間距(如圖1中示例的間距J)，可以再增加一個(gè)表示該間距的高度數(shù)值。更新列高度后，該列高度可以用于后續(xù)新的瀑布流區(qū)塊在添加時(shí)的列高度比較。
[0052]由上述的步驟可以看到，客戶端在瀑布流區(qū)塊的渲染過(guò)程中，是根據(jù)服務(wù)器返回的圖片高度信息確定MG元素的高度，進(jìn)而得到包含該頂G元素的瀑布流區(qū)塊的高度，相比于傳統(tǒng)方式，傳統(tǒng)方式中需要將圖片加載到IMG元素的位置才能得到圖片的高度，即圖片高度的獲取依賴(lài)于圖片的加載，而本實(shí)施例中，圖片高度是服務(wù)器直接反饋至客戶端的，擺脫了對(duì)圖片加載的依賴(lài)。即使客戶端不加載圖片，僅根據(jù)服務(wù)器返回的圖片高度信息就可以確定爆布流區(qū)塊的尚度，從而不必等待圖片加載，大大提尚了爆布流清染的效率，并且整個(gè)網(wǎng)頁(yè)的顯示效率也會(huì)得到提高，用戶體驗(yàn)更好。
[0053]此外，該方法也使得瀑布流的渲染不會(huì)阻礙圖片懶加載技術(shù)的實(shí)施，正是由于可以完全不需要在渲染步驟的確定瀑布流區(qū)塊的高度時(shí)加載圖片，客戶端就可以將圖片的加載時(shí)間延后，當(dāng)某個(gè)圖片的區(qū)域?qū)⒁M(jìn)入用戶的可視區(qū)域時(shí)才加載，減少對(duì)網(wǎng)頁(yè)其他內(nèi)容加載的影響，更好的提高了網(wǎng)頁(yè)性能。
[0054]本申請(qǐng)實(shí)施例中，對(duì)于圖片的加載時(shí)間不做限制，可以根據(jù)實(shí)際需求靈活設(shè)定。例如，可以在瀑布流區(qū)塊的渲染過(guò)程中加載，但是此時(shí)加載圖片不是為獲取圖片高度，圖片高度的獲取也不需要等待至圖片加載完成；或者，也可以在將請(qǐng)求圖片發(fā)送至客戶端之前，將請(qǐng)求圖片對(duì)應(yīng)的地址信息和高度信息返回至所述客戶端，比如在瀑布流區(qū)塊渲染后，將瀑布流區(qū)塊加入到圖片展示列中之后，再加載圖片。
[0055]在一個(gè)實(shí)施例中，服務(wù)器可以是在接收到客戶端對(duì)于圖片的請(qǐng)求之前，就獲取該圖片的高度信息。例如，服務(wù)器可以在接收到上傳的圖片之后，接收到客戶端對(duì)于該圖片的請(qǐng)求之前的任何時(shí)間，獲取該圖片的高度信息；獲取方式可以是通過(guò)服務(wù)器端的編程語(yǔ)言提供的接口來(lái)實(shí)現(xiàn)。無(wú)論是PHP、JAVA還是其他后端編程接口，通常都會(huì)提供類(lèi)似的接口，例如，PHP語(yǔ)言提供了 getimagesize函數(shù)用于獲取圖片的高度信息。在這種方式中，相當(dāng)于服務(wù)器在接收到客戶端對(duì)于圖片的請(qǐng)求之前，就預(yù)先存儲(chǔ)了圖片的高度信息，當(dāng)接收到客戶端發(fā)送的圖片請(qǐng)求后，查詢圖片的高度信息發(fā)送至客戶端即可。
[0056]在另一個(gè)實(shí)施例中，服務(wù)器也可以是在接收到客戶端對(duì)于圖片的請(qǐng)求時(shí)，再獲取該圖片的高度信息。例如，服務(wù)器在接收到圖片請(qǐng)求時(shí)，通過(guò)PHP語(yǔ)言提供的getimagesize函數(shù)獲取圖片的高度信息，并提供給客戶端。為了盡可能的減小服務(wù)器的性能消耗，這種方式中，服務(wù)器可以是在接收到對(duì)于某個(gè)圖片的首次請(qǐng)求時(shí)，通過(guò)接口函數(shù)獲取圖片的高度信息，并且將該高度信息進(jìn)行存儲(chǔ)，這樣以后再接收到對(duì)于該圖片的請(qǐng)求時(shí)，就直接將存儲(chǔ)的高度信息反饋即可。
[0057]在本申請(qǐng)實(shí)施例中，服務(wù)器在將向客戶端反饋高度信息時(shí)，也可以有多種可選的方式。以服務(wù)器將高度信息和地址信息一起反饋至客戶端為例:
[0058]例如，服務(wù)器可以將地址信息和高度信息作為兩個(gè)單獨(dú)的數(shù)據(jù)項(xiàng)，返回至客戶端。也就是說(shuō)，地址信息和高度信息是分開(kāi)的兩個(gè)單獨(dú)的信息，客戶端側(cè)也可以從服務(wù)器返回的信息中，分別提取出地址信息和高度信息。具體實(shí)施時(shí)，服務(wù)器可以在獲取到圖片后，生成與該圖片對(duì)應(yīng)的地址信息，并通過(guò)接口函數(shù)獲取到該圖片的高度信息，將地址信息和高度信息分別與該圖片建立對(duì)應(yīng)關(guān)系，當(dāng)接收到對(duì)于該圖片的請(qǐng)求時(shí)，查詢圖片對(duì)應(yīng)的地址信息和高度信息反饋。
[0059]又例如，服務(wù)器還可以將高度信息作為所述地址信息的一部分，返回至所述客戶端。比如，可以將圖片的高度信息保存在圖片的URL地址里，對(duì)于寬240，高220的一張圖片，可以為其生成這樣的 URL 地址:http://www.example, com/path/filename.240*220.jpg，其中的240*220即用于表示該圖片的寬和高的值。這只是一種示例，高度信息設(shè)置在地址信息中的方式不局限于此，比如還可以是如下的URL地址:http://www.example, com/path/filename.h220.jpg,其中的“h220”用來(lái)指明該圖片的高度值。
[0060]需要說(shuō)明的是，當(dāng)采用將高度信息作為地址信息的一部分的方式時(shí)，可以有效節(jié)省服務(wù)器的性能開(kāi)銷(xiāo)。例如，如果服務(wù)器分別讀取圖片的地址信息和高度信息，相當(dāng)于執(zhí)行兩次讀取過(guò)程，消耗服務(wù)器資源；而如果將高度信息設(shè)置在地址信息中，那么服務(wù)器只需要讀取與圖片對(duì)應(yīng)的地址信息即可，即獲取動(dòng)作只需要執(zhí)行一次，從而降低了服務(wù)器的性能開(kāi)銷(xiāo)。
[0061]可選的，上述的客戶端需要獲知每個(gè)圖片展示列的列高度，以根據(jù)該列高度將瀑布流區(qū)塊添加在列高度最小的一列，而且每個(gè)列高度將會(huì)在添加了新的瀑布流區(qū)塊時(shí)得到更新。對(duì)此，本實(shí)施例可以設(shè)定為，在將瀑布流區(qū)塊加入某個(gè)圖片展示列后，就更新該列的列高度，并將該列高度進(jìn)行存儲(chǔ)以備后續(xù)使用，此時(shí)可以為每個(gè)列維護(hù)一個(gè)表示此列高度的值，更新該高度值即可；或者，也可以設(shè)定為，在將瀑布流區(qū)塊加入某個(gè)圖片展示列后，暫時(shí)不獲取更新的列高度，而是在后續(xù)要將添加新的瀑布流區(qū)塊選擇其添加在哪列時(shí)，才獲取上述更新的列高度，比如可以通過(guò)瀏覽器的JAVASCRIPT接口獲取各列的高度值，再選擇高度最短的一列。
[0062]本申請(qǐng)實(shí)施例的瀑布流布局的實(shí)現(xiàn)，在細(xì)節(jié)上可以有很多可變化的地方，但只要用到了 “服務(wù)器端預(yù)獲取圖片的高度信息，并返回給客戶端用于瀑布流布局的渲染，從而使瀑布流布局的渲染不需要依賴(lài)圖片的加載”來(lái)實(shí)現(xiàn)瀑布流布局的，都是與本申請(qǐng)的瀑布流布局方法相符合的。
[0063]為了實(shí)現(xiàn)上述的圖片信息發(fā)送方法，本申請(qǐng)實(shí)施例還提供了一種圖片信息發(fā)送裝置，該裝置參見(jiàn)圖7，圖7所示結(jié)構(gòu)的裝置可以應(yīng)用于服務(wù)器端，以使得服務(wù)器端執(zhí)行上述圖片信息發(fā)送方法，本實(shí)施例僅對(duì)該裝置的結(jié)構(gòu)做簡(jiǎn)單說(shuō)明，其具體的工作原理可以結(jié)合參見(jiàn)方法實(shí)施例。該裝置包括:請(qǐng)求接收模塊71和信息反饋模塊72 ;其中，
[0064]請(qǐng)求接收模塊71，用于接收客戶端發(fā)送的請(qǐng)求圖片的圖片標(biāo)識(shí)；
[0065]信息反饋模塊72，用于根據(jù)所述圖片標(biāo)識(shí)獲取所述請(qǐng)求圖片的地址信息和高度信息，將所述地址信息和高度信息返回至所述客戶端，以使得客戶端實(shí)現(xiàn)請(qǐng)求圖片的瀑布流布局。
[0066]進(jìn)一步的，信息反饋模塊72，在將所述地址信息和高度信息返回至所述客戶端時(shí)，具體用于在將所述請(qǐng)求圖片發(fā)送至所述客戶端之前，將所述地址信息和高度信息返回至所述客戶端。
[0067]進(jìn)一步的，信息反饋模塊72，在將地址信息和高度信息返回至客戶端時(shí)，是用于將所述地址信息和高度信息作為兩個(gè)單獨(dú)的數(shù)據(jù)項(xiàng)返回至所述客戶端。
[0068]進(jìn)一步的，信息反饋模塊72，在將地址信息和高度信息返回至所述客戶端時(shí)，是用于將所述高度信息作為所述地址信息的一部分，返回至所述客戶端。
[0069]為了實(shí)現(xiàn)上述的瀑布流布局方法，本申請(qǐng)實(shí)施例還提供了一種瀑布流布局裝置，該裝置參見(jiàn)圖8，圖8所示結(jié)構(gòu)的裝置可以應(yīng)用于客戶端，以使得客戶端執(zhí)行上述瀑布流布局方法，本實(shí)施例僅對(duì)該裝置的結(jié)構(gòu)做簡(jiǎn)單說(shuō)明，其具體的工作原理可以結(jié)合參見(jiàn)方法實(shí)施例。該裝置包括:信息獲取模塊81和布局處理模塊82，其中，
[0070]信息獲取模塊81，用于向服務(wù)器發(fā)送請(qǐng)求圖片的圖片標(biāo)識(shí)，并接收所述服務(wù)器返回的根據(jù)所述圖片標(biāo)識(shí)獲取的請(qǐng)求圖片的地址信息和高度信息；
[0071]布局處理模塊82，用于根據(jù)所述地址信息和高度信息，實(shí)現(xiàn)所述請(qǐng)求圖片的瀑布流布局。
[0072]進(jìn)一步的，信息獲取模塊81，在接收服務(wù)器返回的根據(jù)圖片標(biāo)識(shí)獲取的請(qǐng)求圖片的地址信息和高度信息時(shí)，具體是用于在加載所述請(qǐng)求圖片之前，接收所述服務(wù)器返回的根據(jù)所述圖片標(biāo)識(shí)獲取的請(qǐng)求圖片的地址信息和高度信息。
[0073]進(jìn)一步的，布局處理模塊82，具體用于:根據(jù)所述高度信息，確定所述請(qǐng)求圖片對(duì)應(yīng)的瀑布流區(qū)塊的高度，根據(jù)所述地址信息，將所述請(qǐng)求圖片加載至所述瀑布流區(qū)塊。
[0074]以上所述僅為本發(fā)明的較佳實(shí)施例而已，并不用以限制本發(fā)明，凡在本發(fā)明的精神和原則之內(nèi)，所做的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本發(fā)明保護(hù)的范圍之內(nèi)。
【主權(quán)項(xiàng)】
1.一種圖片信息發(fā)送方法，其特征在于，包括: 接收客戶端發(fā)送的請(qǐng)求圖片的圖片標(biāo)識(shí)； 根據(jù)所述圖片標(biāo)識(shí)獲取所述請(qǐng)求圖片的地址信息和高度信息，將所述地址信息和高度信息返回至所述客戶端，以使得客戶端實(shí)現(xiàn)請(qǐng)求圖片的瀑布流布局。2.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述將所述地址信息和高度信息返回至所述客戶端，包括: 在將所述請(qǐng)求圖片發(fā)送至所述客戶端之前，將所述地址信息和高度信息返回至所述客戶端。3.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述地址信息和高度信息，是預(yù)存儲(chǔ)的；或者，是在接收到所述客戶端發(fā)送的請(qǐng)求圖片的圖片標(biāo)識(shí)時(shí)獲取。4.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述將所述地址信息和高度信息返回至所述客戶端，包括: 將所述地址信息和高度信息作為兩個(gè)單獨(dú)的數(shù)據(jù)項(xiàng)，返回至所述客戶端。5.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述將所述地址信息和高度信息返回至所述客戶端，包括: 將所述高度信息作為所述地址信息的一部分，返回至所述客戶端。6.一種瀑布流布局方法，其特征在于，包括: 向服務(wù)器發(fā)送請(qǐng)求圖片的圖片標(biāo)識(shí)，并接收所述服務(wù)器返回的根據(jù)所述圖片標(biāo)識(shí)獲取的請(qǐng)求圖片的地址信息和高度信息； 根據(jù)所述地址信息和高度信息，實(shí)現(xiàn)所述請(qǐng)求圖片的瀑布流布局。7.根據(jù)權(quán)利要求6所述的方法，其特征在于，所述接收所述服務(wù)器返回的根據(jù)所述圖片標(biāo)識(shí)獲取的請(qǐng)求圖片的地址?目息和尚度?目息，包括: 在加載所述請(qǐng)求圖片之前，接收所述服務(wù)器返回的根據(jù)所述圖片標(biāo)識(shí)獲取的請(qǐng)求圖片的地址信息和高度信息。8.根據(jù)權(quán)利要求6所述的方法，其特征在于，所述根據(jù)所述地址信息和高度信息，實(shí)現(xiàn)所述請(qǐng)求圖片的瀑布流布局，包括: 根據(jù)所述高度信息，確定所述請(qǐng)求圖片對(duì)應(yīng)的瀑布流區(qū)塊的高度； 根據(jù)所述地址信息，將所述請(qǐng)求圖片加載至所述瀑布流區(qū)塊。9.一種圖片信息發(fā)送裝置，其特征在于，包括: 請(qǐng)求接收模塊，用于接收客戶端發(fā)送的請(qǐng)求圖片的圖片標(biāo)識(shí)； 信息反饋模塊，用于根據(jù)所述圖片標(biāo)識(shí)獲取所述請(qǐng)求圖片的地址信息和高度信息，將所述地址信息和高度信息返回至所述客戶端，以使得客戶端實(shí)現(xiàn)請(qǐng)求圖片的瀑布流布局。10.根據(jù)權(quán)利要求9所述的裝置，其特征在于， 所述信息反饋模塊，在將所述地址信息和高度信息返回至所述客戶端時(shí)，具體用于在將所述請(qǐng)求圖片發(fā)送至所述客戶端之前，將所述地址信息和高度信息返回至所述客戶端。11.根據(jù)權(quán)利要求9所述的裝置，其特征在于， 所述信息反饋模塊，在將所述地址信息和高度信息返回至所述客戶端時(shí)，是用于將所述地址信息和高度信息作為兩個(gè)單獨(dú)的數(shù)據(jù)項(xiàng)返回至所述客戶端。12.根據(jù)權(quán)利要求9所述的裝置，其特征在于， 所述信息反饋模塊，在將所述地址信息和高度信息返回至所述客戶端時(shí)，是用于將所述高度信息作為所述地址信息的一部分，返回至所述客戶端。13.—種瀑布流布局裝置，其特征在于，包括: 信息獲取模塊，用于向服務(wù)器發(fā)送請(qǐng)求圖片的圖片標(biāo)識(shí)，并接收所述服務(wù)器返回的根據(jù)所述圖片標(biāo)識(shí)獲取的請(qǐng)求圖片的地址信息和高度信息； 布局處理模塊，用于根據(jù)所述地址信息和高度信息，實(shí)現(xiàn)所述請(qǐng)求圖片的瀑布流布局。14.根據(jù)權(quán)利要求13所述裝置，其特征在于， 所述信息獲取模塊，在接收所述服務(wù)器返回的根據(jù)所述圖片標(biāo)識(shí)獲取的請(qǐng)求圖片的地址信息和高度信息時(shí)，具體是用于在加載所述請(qǐng)求圖片之前，接收所述服務(wù)器返回的根據(jù)所述圖片標(biāo)識(shí)獲取的請(qǐng)求圖片的地址信息和高度信息。15.根據(jù)權(quán)利要求13所述的裝置，其特征在于，所述布局處理模塊，具體用于:根據(jù)所述高度信息，確定所述請(qǐng)求圖片對(duì)應(yīng)的瀑布流區(qū)塊的高度，根據(jù)所述地址信息，將所述請(qǐng)求圖片加載至所述瀑布流區(qū)塊。
【文檔編號(hào)】H04L29/08GK105871945SQ201510026407
【公開(kāi)日】2016年8月17日
【申請(qǐng)日】2015年1月19日
【發(fā)明人】李鵬
【申請(qǐng)人】阿里巴巴集團(tuán)控股有限公司