一種圖片展示方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001] 本發(fā)明涉及互聯(lián)網(wǎng)應(yīng)用技術(shù)領(lǐng)域，特別涉及一種圖片展示方法及裝置。
【背景技術(shù)】
[0002] 目前，在一些應(yīng)用中，通過(guò)將多張用戶分享的同一場(chǎng)景或地理位置的圖片（如用 戶在旅游景點(diǎn)拍攝的照片等）進(jìn)行展示，以提升用戶分享的圖片之間的關(guān)聯(lián)度，從而增強(qiáng) 用戶體驗(yàn)。
[0003] 然而，目前在獲取用戶上傳的圖片之后，這些圖片通常以列表或圖標(biāo)的形式進(jìn)行 展示，用戶需要通過(guò)點(diǎn)擊或滑動(dòng)操作進(jìn)行圖片的切換展示，展現(xiàn)形式較單一，并且操作較繁 瑣。因而，亟待解決這一問(wèn)題。

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

[0004] 本發(fā)明提供一種圖片展示方法及裝置，用以實(shí)現(xiàn)以圖片墻的布局展示圖片的目 的。
[0005] 本發(fā)明提供一種圖片展示方法，包括：
[0006] 獲得在web頁(yè)面上展示圖片的觸發(fā)；
[0007] 根據(jù)所述觸發(fā)調(diào)用預(yù)設(shè)的圖片墻展示插件；
[0008] 將待展示圖片加載到所述圖片墻展示插件中；
[0009] 利用所述圖片墻展示插件，在所述web頁(yè)面上以圖片墻的布局展示加載后的圖 片。
[0010] 在本發(fā)明一實(shí)施例中，所述圖片墻展示插件內(nèi)設(shè)置有至少一個(gè)圖片布局模板，利 用所述圖片墻展示插件，在所述web頁(yè)面上以圖片墻的布局展示加載后的圖片，包括： [0011] 從所述至少一個(gè)圖片布局模板中選取一圖片布局模板；
[0012] 將加載后的圖片放置在選取的所述圖片布局模板中，生成圖片墻在所述web頁(yè)面 上進(jìn)行展示。
[0013] 在本發(fā)明一實(shí)施例中，將加載后的圖片放置在選取的所述圖片布局模板中，包 括：
[0014] 獲取加載后的圖片的編號(hào)；
[0015] 根據(jù)所述編號(hào)，將加載后的圖片對(duì)應(yīng)放置在選取的所述圖片布局模板中。
[0016] 在本發(fā)明一實(shí)施例中，所述方法還包括：
[0017] 獲取加載后的圖片的尺寸；
[0018] 在將加載后的圖片放置在選取的所述圖片布局模板中時(shí)，若圖片的尺寸與所述圖 片布局模板中模板元素的尺寸不適配，則調(diào)整該圖片的尺寸，以適配該模板元素的尺寸。
[0019] 在本發(fā)明一實(shí)施例中，所述圖片布局模板中模板元素包含圖片圖層和相框圖層， 將加載后的圖片放置在選取的所述圖片布局模板中，包括：
[0020] 將加載后的圖片放置在選取的所述圖片布局模板中的圖片圖層，并與相框圖層疊 加。
[0021 ] 在本發(fā)明一實(shí)施例中，所述方法還包括：
[0022] 當(dāng)需要在所述web頁(yè)面上同時(shí)展示多個(gè)圖片布局模板各自生成的圖片墻時(shí)，確定 各個(gè)圖片布局模板生成的圖片墻對(duì)應(yīng)的時(shí)間點(diǎn)；
[0023] 通過(guò)時(shí)間軸的方式在所述web頁(yè)面上同時(shí)展示各個(gè)圖片布局模板生成的圖片墻。
[0024] 本發(fā)明還提供一種圖片展示裝置，包括：
[0025] 獲取模塊，用于獲得在web頁(yè)面上展示圖片的觸發(fā)；
[0026] 調(diào)用模塊，用于根據(jù)所述觸發(fā)調(diào)用預(yù)設(shè)的圖片墻展示插件；
[0027] 加載模塊，用于將待展示圖片加載到所述圖片墻展示插件中；
[0028] 展示模塊，用于利用所述圖片墻展示插件，在所述web頁(yè)面上以圖片墻的布局展 示加載后的圖片。
[0029] 在本發(fā)明一實(shí)施例中，所述圖片墻展示插件內(nèi)設(shè)置有至少一個(gè)圖片布局模板，所 述展示模塊包括：
[0030] 選取單元，用于從所述至少一個(gè)圖片布局模板中選取一圖片布局模板；
[0031] 展示單元，用于將加載后的圖片放置在選取的所述圖片布局模板中，生成圖片墻 在所述web頁(yè)面上進(jìn)行展示。
[0032] 在本發(fā)明一實(shí)施例中，所述展示單元還用于：
[0033] 獲取加載后的圖片的編號(hào)；
[0034] 根據(jù)所述編號(hào)，將加載后的圖片對(duì)應(yīng)放置在選取的所述圖片布局模板中。
[0035] 在本發(fā)明一實(shí)施例中，所述展示單元還用于：
[0036] 獲取加載后的圖片的尺寸；
[0037] 在將加載后的圖片放置在選取的所述圖片布局模板中時(shí)，若圖片的尺寸與所述圖 片布局模板中模板元素的尺寸不適配，則調(diào)整該圖片的尺寸，以適配該模板元素的尺寸。
[0038] 本發(fā)明實(shí)施例的一些有益效果可以包括：
[0039] 本發(fā)明實(shí)施例中，獲得在web頁(yè)面上展示圖片的觸發(fā)，根據(jù)該觸發(fā)調(diào)用預(yù)設(shè)的圖 片墻展示插件，隨后將待展示圖片加載到圖片墻展示插件中，進(jìn)而利用圖片墻展示插件，在 web頁(yè)面上以圖片墻的布局展示加載后的圖片。由此可知，本發(fā)明實(shí)施例利用圖片墻展示插 件實(shí)現(xiàn)了以圖片墻的布局展示圖片的目的。由于圖片墻能夠充分展示圖片，因而用戶無(wú)需 通過(guò)點(diǎn)擊或滑動(dòng)操作進(jìn)行圖片的切換展示，使得圖片展示更加靈活直觀。
[0040] 此外，本發(fā)明實(shí)施例中還可以以時(shí)間軸的方式展示圖片墻，方便用戶根據(jù)時(shí)間點(diǎn) 查詢圖片，能夠提高查詢速度，為用戶提供更好的展示體驗(yàn)。
[0041] 本發(fā)明的其它特征和優(yōu)點(diǎn)將在隨后的說(shuō)明書中闡述，并且，部分地從說(shuō)明書中變 得顯而易見，或者通過(guò)實(shí)施本發(fā)明而了解。本發(fā)明的目的和其他優(yōu)點(diǎn)可通過(guò)在所寫的說(shuō)明 書、權(quán)利要求書、以及附圖中所特別指出的結(jié)構(gòu)來(lái)實(shí)現(xiàn)和獲得。
[0042] 下面通過(guò)附圖和實(shí)施例，對(duì)本發(fā)明的技術(shù)方案做進(jìn)一步的詳細(xì)描述。
【附圖說(shuō)明】
[0043] 附圖用來(lái)提供對(duì)本發(fā)明的進(jìn)一步理解，并且構(gòu)成說(shuō)明書的一部分，與本發(fā)明的實(shí) 施例一起用于解釋本發(fā)明，并不構(gòu)成對(duì)本發(fā)明的限制。在附圖中：
[0044] 圖1所示為本發(fā)明一實(shí)施例中圖片展示方法的流程圖；
[0045] 圖2所示為本發(fā)明一實(shí)施例中以時(shí)間軸展示圖片墻的示意圖；
[0046] 圖3所示為本發(fā)明另一實(shí)施例中圖片展示方法的流程圖；
[0047] 圖4所示為本發(fā)明一實(shí)施例中圖片展示裝置的結(jié)構(gòu)示意圖；以及
[0048] 圖5所示為本發(fā)明一實(shí)施例中展示模塊44的結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0049] 以下結(jié)合附圖對(duì)本發(fā)明的優(yōu)選實(shí)施例進(jìn)行說(shuō)明，應(yīng)當(dāng)理解，此處所描述的優(yōu)選實(shí) 施例僅用于說(shuō)明和解釋本發(fā)明，并不用于限定本發(fā)明。
[0050] 圖1所示為本發(fā)明一實(shí)施例中圖片展示方法的流程圖，該方法包括以下步驟 S11-S14 ：
[0051] 步驟S11，獲得在web頁(yè)面上展示圖片的觸發(fā)。
[0052] 該步驟中，可以在web (網(wǎng)絡(luò)）頁(yè)面上設(shè)置展示圖片的入口，當(dāng)該入口被點(diǎn)擊或雙 擊時(shí)，獲得在web頁(yè)面上展示圖片的觸發(fā)?；蛘撸€可以結(jié)合物理按鍵來(lái)實(shí)現(xiàn)，例如，當(dāng)終端 處于web頁(yè)面上時(shí)，當(dāng)接收到連續(xù)敲擊鍵盤上的空格兩次的操作指令時(shí)，則獲得在web頁(yè)面 上展示圖片的觸發(fā)。當(dāng)然，還可以通過(guò)其他方式獲得該觸發(fā)。
[0053] 步驟S12,根據(jù)該觸發(fā)調(diào)用預(yù)設(shè)的圖片墻展示插件。
[0054] 步驟S13,將待展不圖片加載到圖片墻展不插件中。
[0055] 步驟S14,利用圖片墻展示插件，在web頁(yè)面上以圖片墻的布局展示加載后的圖 片。
[0056] 本發(fā)明實(shí)施例中，獲得在web頁(yè)面上展示圖片的觸發(fā)，根據(jù)該觸發(fā)調(diào)用預(yù)設(shè)的圖 片墻展示插件，隨后將待展示圖片加載到圖片墻展示插件中，進(jìn)而利用圖片墻展示插件，在 web頁(yè)面上以圖片墻的布局展示加載后的圖片。由此可知，本發(fā)明實(shí)施例利用圖片墻展示插 件實(shí)現(xiàn)了以圖片墻的布局展示圖片的目的。由于圖片墻能夠充分展示圖片，因而用戶無(wú)需 通過(guò)點(diǎn)擊或滑動(dòng)操作進(jìn)行圖片的切換展示，使得圖片展示更加靈活直觀。
[0057] 在本發(fā)明一實(shí)施例中，圖片墻展示插件內(nèi)設(shè)置有至少一個(gè)圖片布局模板，每個(gè)圖 片布局模板定義了模板元素（即圖片）的尺寸、模板元素之間的位置關(guān)系、模板元素的邊框 的邊緣到背景邊緣的距離等等。
[0058] 在本發(fā)明的另一實(shí)施例中，每個(gè)圖片布局模板中的模板元素，即圖片，可以采用 DIV來(lái)實(shí)現(xiàn)。DIV元素是用來(lái)為HTML(Hypertext Markup Language，超文本標(biāo)記語(yǔ)言）文檔 內(nèi)大塊（block-level)的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的 所有內(nèi)容都是用來(lái)構(gòu)成這個(gè)塊的，其中所包含元素的特性由DIV標(biāo)簽的屬性來(lái)控制，或者 是通過(guò)使用樣式表格式化這個(gè)塊來(lái)進(jìn)行控制。
[0059] 此時(shí)，上文步驟S14可以實(shí)施為以下步驟A1-A2 :
[0060] 步驟A1，從至少一個(gè)圖片布局模板中選取一圖片布局模板。
[0061] 該步驟中，可以根據(jù)用戶的選取操作，從至少一個(gè)圖片布局模板中選取一圖片布 局模板。也可以根據(jù)待展示圖片的類型，從至少一個(gè)圖片布局模板中匹配到一圖片布局模 板，例如，將待展示圖片的類型與圖片布局模板的名稱進(jìn)行匹配等。
[0062] 步驟A2,將加載后的圖片放置在選取的圖片布局模板中，生成圖片墻在web頁(yè)面 上進(jìn)行展示。
[0063] 該步驟中，可以將加載后的圖片的地址放置在選取的圖片布局模板中，在后續(xù)展 示的時(shí)候根據(jù)地址獲取圖片，這樣可以節(jié)約系統(tǒng)存儲(chǔ)資源。
[0064] 進(jìn)一步，可以獲取加載后的圖片的編號(hào)，進(jìn)而根據(jù)這些編號(hào)，將加載后的圖片對(duì)應(yīng) 放置在選取的圖片布局模板中。例如，在將待展示圖片加載到圖片墻展示插件時(shí)，用戶選取 的順序就形成了編號(hào)，則將待展示圖片加載到圖片墻展示插件之后，可以按照?qǐng)D片的編號(hào) 對(duì)應(yīng)放置在選取的圖片布局模板中。
[0065] 在本發(fā)明的又一實(shí)施例中，圖片布局模板中模板元素包含圖片圖層和相框圖層， 則將加載后的圖片放置在選取的圖片布局模板中的圖片圖層，并與相框圖層疊加進(jìn)行展 示，從而使得圖片墻展示更加逼真，實(shí)現(xiàn)更好的展示效果。
[0066] 此外，在將加載后的圖片放置在選取的圖片布局模板中時(shí)，若圖片的尺寸與圖片 布局模板中模板元素的尺寸不適配，則可以調(diào)整該圖片的尺寸，以適配該模板元素的尺寸， 也就是說(shuō)，使得該圖片能夠填充滿整個(gè)圖片圖層。
[0067] 在本發(fā)明的再一實(shí)施例中，當(dāng)需要在web頁(yè)面上同時(shí)展示多個(gè)圖片布局模板各自 生成的圖片墻時(shí)，可以確定各個(gè)圖片布局模板生成的圖片墻對(duì)應(yīng)的時(shí)間點(diǎn)，通過(guò)時(shí)間軸的 方式在web頁(yè)面上同時(shí)展示各個(gè)圖片布局模板生成的圖片墻。本發(fā)明實(shí)施例中，時(shí)間軸從 低到高可以包括秒、分、時(shí)、日、月、年、十年和百年這些層級(jí)，當(dāng)然也可以根據(jù)實(shí)際需求進(jìn)行 劃分，本發(fā)明不作限制。例如，以年份為時(shí)間軸的圖片墻展示方式，如圖2所示。
[0068] 下面通過(guò)一具體實(shí)施例詳細(xì)介紹本發(fā)明的圖片展示方法的實(shí)現(xiàn)過(guò)程。
[0069] 圖3所示為本發(fā)