瀑布流式圖片顯示的方法和裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及瀏覽器技術(shù)領(lǐng)域，特別是涉及一種瀑布流式圖片顯示的方法和系統(tǒng)。
【背景技術(shù)】
[0002]瀑布流，又稱(chēng)瀑布流式布局。它是目前比較流行的一種網(wǎng)站頁(yè)面布局，視覺(jué)表現(xiàn)為參差不齊的多欄布局，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)并添加至當(dāng)前尾部。用戶只需要輕輕滑動(dòng)一下鼠標(biāo)滾輪，就會(huì)有大量的圖片呈現(xiàn)在眼前。
[0003]瀑布流可以使用戶以一眼掃過(guò)的快速閱讀模式在短時(shí)間內(nèi)獲得更多的信息量，且其懶加載的模式又避免了用戶點(diǎn)擊鼠標(biāo)進(jìn)行翻頁(yè)的操作。但是正是因?yàn)槠湟淮涡缘某尸F(xiàn)大量的圖片信息，所以很難抓住用戶對(duì)某一個(gè)應(yīng)用圖標(biāo)或圖片的注意，不能引導(dǎo)用戶去關(guān)注特定的信息。

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

[0004]基于此，有必要針對(duì)上述技術(shù)問(wèn)題，提供一種能夠使某些特定信息突出顯示的瀑布流式圖片顯示的方法。
[0005]—種瀑布流式圖片顯示的方法，所述方法包括:將圖片加載到頁(yè)面可視區(qū)域中；獲取所述頁(yè)面可視區(qū)域中的圖片的屬性信息；獲取具有預(yù)設(shè)的動(dòng)畫(huà)屬性的目標(biāo)圖片；根據(jù)所述動(dòng)畫(huà)屬性對(duì)所述目標(biāo)圖片執(zhí)行相應(yīng)的突出顯示的動(dòng)畫(huà)效果。
[0006]在其中一個(gè)實(shí)施例中，所述獲取具有預(yù)設(shè)的動(dòng)畫(huà)屬性的目標(biāo)圖片的步驟包括:實(shí)時(shí)檢測(cè)頁(yè)面可視區(qū)域內(nèi)是否有具有動(dòng)畫(huà)屬性的圖片；若有，則將所述圖片作為目標(biāo)圖片。
[0007]在其中一個(gè)實(shí)施例中，所述獲取具有預(yù)設(shè)的動(dòng)畫(huà)屬性的目標(biāo)圖片的步驟包括:每隔預(yù)設(shè)的時(shí)間間隔在頁(yè)面可視區(qū)域內(nèi)隨機(jī)抽取一張圖片；判斷所述圖片是否具有動(dòng)畫(huà)屬性；若有，則將所述圖片作為目標(biāo)圖片。
[0008]在其中一個(gè)實(shí)施例中，在所述根據(jù)所述動(dòng)畫(huà)屬性對(duì)所述目標(biāo)圖片執(zhí)行突出顯示的動(dòng)畫(huà)效果的步驟之前，還包括:判斷目標(biāo)圖片與頁(yè)面可視區(qū)域邊緣的距離是否大于預(yù)設(shè)長(zhǎng)度；若所述目標(biāo)圖片與所述頁(yè)面可視區(qū)域邊緣的距離大于預(yù)設(shè)長(zhǎng)度，則進(jìn)入所述根據(jù)所述動(dòng)畫(huà)屬性對(duì)所述目標(biāo)圖片執(zhí)行相應(yīng)的突出顯示的動(dòng)畫(huà)效果的步驟。
[0009]在其中一個(gè)實(shí)施例中，所述動(dòng)畫(huà)屬性為翻轉(zhuǎn)屬性或放大屬性。
[0010]—種瀑布流式圖片顯示的裝置，所述裝置包括:加載模塊，用于將圖片加載到頁(yè)面可視區(qū)域中；屬性獲取模塊，用于獲取所述頁(yè)面可視區(qū)域中的圖片的屬性信息；圖片獲取模塊，用于獲取具有預(yù)設(shè)的動(dòng)畫(huà)屬性的目標(biāo)圖片；動(dòng)畫(huà)執(zhí)行模塊，用于根據(jù)所述動(dòng)畫(huà)屬性對(duì)所述目標(biāo)圖片執(zhí)行相應(yīng)的突出顯示的動(dòng)畫(huà)效果。
[0011]在其中一個(gè)實(shí)施例中，所述圖片獲取模塊用于實(shí)時(shí)檢測(cè)頁(yè)面可視區(qū)域內(nèi)是否有具有動(dòng)畫(huà)屬性的圖片，若有，則將所述圖片作為目標(biāo)圖片。
[0012]在其中一個(gè)實(shí)施例中，所述圖片獲取模塊每隔預(yù)設(shè)的時(shí)間間隔在頁(yè)面可視區(qū)域內(nèi)隨機(jī)抽取一張圖片；判斷所述圖片是否具有動(dòng)畫(huà)屬性，若有，則將所述圖片作為目標(biāo)圖片。
[0013]在其中一個(gè)實(shí)施例中，所述裝置還包括:距離判斷模塊，用于判斷目標(biāo)圖片與頁(yè)面可視區(qū)域邊緣的距離是否大于預(yù)設(shè)長(zhǎng)度；若是，則通知所述動(dòng)畫(huà)執(zhí)行模塊根據(jù)所述動(dòng)畫(huà)屬性對(duì)所述目標(biāo)圖片執(zhí)行相應(yīng)的突出顯示的動(dòng)畫(huà)效果。
[0014]在其中一個(gè)實(shí)施例中，所述動(dòng)畫(huà)屬性為翻轉(zhuǎn)屬性或放大屬性。
[0015]上述瀑布流式圖片顯示的方法和裝置，通過(guò)將圖片加載到頁(yè)面可視區(qū)域中，獲取所述頁(yè)面可視區(qū)域中的圖片的屬性信息，獲取具有預(yù)設(shè)的動(dòng)畫(huà)屬性的目標(biāo)圖片，根據(jù)所述動(dòng)畫(huà)屬性對(duì)所述目標(biāo)圖片執(zhí)行相應(yīng)的突出顯示的動(dòng)畫(huà)效果。通過(guò)讓某些圖片信息進(jìn)行突出顯示，可以引導(dǎo)用戶去關(guān)注特定的信息。
【附圖說(shuō)明】
[0016]圖1為一個(gè)實(shí)施例中瀑布流式圖片顯示方法的流程圖；
[0017]圖2為一個(gè)實(shí)施例中獲取目標(biāo)圖片的方法流程圖；
[0018]圖3為另一個(gè)實(shí)施例中獲取目標(biāo)圖片的方法流程圖；
[0019]圖4為另一個(gè)實(shí)施例中瀑布流式圖片顯示方法的流程圖；
[0020]圖5為一個(gè)實(shí)施例中瀑布流式圖片顯示裝置的結(jié)構(gòu)框圖；
[0021]圖6為另一個(gè)實(shí)施例中瀑布流式圖片顯示裝置的結(jié)構(gòu)框圖。
【具體實(shí)施方式】
[0022]為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點(diǎn)更加清楚明白，以下結(jié)合附圖及實(shí)施例，對(duì)本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說(shuō)明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0023]如圖1所示，在一個(gè)實(shí)施例中，提供了一種瀑布流式圖片顯示的方法，該方法包括:
[0024]步驟102，將圖片加載到頁(yè)面可視區(qū)域中。
[0025]具體的，圖片可以是圖畫(huà)、照片、應(yīng)用圖標(biāo)等以圖的形式在網(wǎng)頁(yè)上呈現(xiàn)的信息。頁(yè)面可視區(qū)域是指當(dāng)前可觀看到的網(wǎng)頁(yè)區(qū)域，也即是在終端屏幕上顯示的區(qū)域。終端可以是智能手機(jī)、平板電腦、筆記本電腦等具有顯示屏幕的電子設(shè)備。根據(jù)用戶的瀏覽網(wǎng)頁(yè)的請(qǐng)求，將圖片加載到當(dāng)前頁(yè)面的可視區(qū)域供用戶瀏覽觀看。
[0026]步驟104，獲取頁(yè)面可視區(qū)域中的圖片的屬性信息。
[0027]具體的，圖片的屬性信息包括圖片的大小、位置、像素等信息，也包括為某些圖片預(yù)先特別設(shè)置的動(dòng)畫(huà)屬性信息。
[0028]步驟106，獲取具有預(yù)設(shè)的動(dòng)畫(huà)屬性的目標(biāo)圖片。
[0029]在本實(shí)施例中，動(dòng)畫(huà)屬性可以是翻轉(zhuǎn)屬性，也可以是放大屬性或其他。為了突出顯示某些圖片的信息，提前為某些特定的圖片設(shè)置動(dòng)畫(huà)屬性，根據(jù)其動(dòng)畫(huà)屬性，可以進(jìn)行相應(yīng)的動(dòng)畫(huà)顯示(翻轉(zhuǎn)或放大)。
[0030]步驟108，根據(jù)所述動(dòng)畫(huà)屬性對(duì)所述目標(biāo)圖片執(zhí)行相應(yīng)的突出顯示的動(dòng)畫(huà)效果。
[0031]具體的，執(zhí)行相應(yīng)的突出顯示動(dòng)畫(huà)效果的程序是寫(xiě)入圖片顯示方式數(shù)據(jù)包中的，不同的動(dòng)畫(huà)屬性對(duì)應(yīng)執(zhí)行不同的動(dòng)畫(huà)效果，比如，若圖片具有的是翻轉(zhuǎn)屬性，則對(duì)應(yīng)的執(zhí)行圖片的翻轉(zhuǎn)效果，其基于Camera算法用二維模擬三維，讓圖片能夠看起來(lái)更立體更形象；若圖片具有的是放大的屬性，則對(duì)應(yīng)的執(zhí)行圖片的放大效果。
[0032]在本實(shí)施例中，通過(guò)將圖片加載到頁(yè)面可視區(qū)域中，獲取所述頁(yè)面可視區(qū)域中的圖片的屬性信息，獲取具有預(yù)設(shè)的動(dòng)畫(huà)屬性的目標(biāo)圖片，根據(jù)所述動(dòng)畫(huà)屬性對(duì)所述目標(biāo)圖片執(zhí)行相應(yīng)的突出顯示的動(dòng)畫(huà)效果。通過(guò)讓某些圖片信息進(jìn)行突出顯示，可以引導(dǎo)用戶去關(guān)注特定的信息。
[0033]如圖2所示，在一個(gè)實(shí)施例中，獲取具有預(yù)設(shè)的動(dòng)畫(huà)屬性的目標(biāo)圖片的步驟包括:
[0034]步驟106a，實(shí)時(shí)檢測(cè)頁(yè)面可視區(qū)域內(nèi)是否有具有動(dòng)畫(huà)屬性的圖片，若有，則進(jìn)入步驟106b，若無(wú)，則結(jié)束。
[0035]在本實(shí)施例中，對(duì)網(wǎng)頁(yè)可視區(qū)域內(nèi)的圖片進(jìn)行實(shí)時(shí)檢測(cè)，查找具有動(dòng)畫(huà)屬性的圖片。若查找到具有動(dòng)畫(huà)屬性的圖片，則將該圖片作為目標(biāo)圖片。
[0036]步驟106b，將上述圖片作為目標(biāo)圖片。
[0037]在本實(shí)施例中，將檢測(cè)到的具有動(dòng)畫(huà)屬性的圖片作為目標(biāo)圖片，根據(jù)目標(biāo)圖片的動(dòng)畫(huà)屬性執(zhí)行相應(yīng)