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

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

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