以瀑布流方式顯示圖片的方法和設(shè)備的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及顯示技術(shù)領(lǐng)域，尤其涉及一種以瀑布流方式顯示圖片的方法和設(shè)備。
【背景技術(shù)】
[0002]瀑布流，又稱瀑布流式布局。是一種網(wǎng)站頁面布局方式，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。
[0003]瀑布流對于圖片的展現(xiàn)，是高效而具有吸引力的，用戶一眼掃過的快速閱讀模式可以在短時間內(nèi)獲得更多的信息量，而瀑布流里懶加載模式又避免了用戶鼠標點擊的翻頁操作，瀑布流的主要特性便是錯落有致，定寬而不定高的設(shè)計讓頁面區(qū)別于傳統(tǒng)的矩陣式圖片布局模式，巧妙的利用視覺層級，視線的任意流動又緩解了視覺疲勞。
[0004]瀑布流的方式最早是用在網(wǎng)頁上的，因為電腦的CPU速度快，內(nèi)存也較大，所以顯示起來比較流暢。但是移動設(shè)備由于體積和續(xù)航的限制，CPU和內(nèi)存都跟普通電腦有很大差距，所以在移動設(shè)備上想要以瀑布流的布局顯示圖片，如果不進行優(yōu)化的話，在頁面滾動的時候會明顯感覺到卡頓，用戶體驗非常不好。

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

[0005]本發(fā)明的目的在于提供一種能夠在移動終端上以瀑布流方式顯示圖片時不會造成卡頓的方法和設(shè)備。
[0006]為了達到上述目的，本發(fā)明提供了一種以瀑布流方式顯示圖片的方法，包括:
[0007]獲取需要顯示的多個圖片,初始化當(dāng)前顯示頁面；
[0008]在顯示頁面被拖動的過程中，依次將圖片控件和對應(yīng)的圖片加載到瀑布流中，并回收移出屏幕的圖片對應(yīng)的圖片控件。
[0009]優(yōu)選的,在初始化當(dāng)前顯示頁面之前,所述方法還包括:
[0010]建立包含預(yù)設(shè)數(shù)量的圖片控件的數(shù)據(jù)池；
[0011]所述初始化當(dāng)前顯示頁面具體包括:
[0012]從所述數(shù)據(jù)池中取出圖片控件初始化當(dāng)前顯示界面；
[0013]所述將圖片控件加載到瀑布流中具體包括:
[0014]從所述數(shù)據(jù)池中取出圖片控件加載到瀑布流中；
[0015]所述回收移出屏幕的圖片對應(yīng)的圖片控件，具體包括:
[0016]將移出屏幕的圖片對應(yīng)的圖片控件放回到數(shù)據(jù)池中。
[0017]優(yōu)選的，在初始化顯示頁面之前，所述方法還包括:
[0018]對各個圖片進行排版得到各個圖片在瀑布流中的位置信息；
[0019]所述初始化當(dāng)前顯示頁面,具體包括:
[0020]根據(jù)所述各個圖片的位置信息選取對應(yīng)的圖片初始化當(dāng)前頁面；
[0021]所述依次將圖片控件和對應(yīng)的圖片加載到瀑布流中，包括:
[0022]根據(jù)所述待加載的圖片的位置信息將待加載的圖片及其對應(yīng)的圖片控件加載到瀑布流中。
[0023]優(yōu)選的，所述對各個圖片進行排版得到各個圖片在瀑布流中的位置信息，具體包括:
[0024]根據(jù)屏幕的寬度和圖片需要顯示的寬度確定瀑布流的圖片列數(shù)L ；
[0025]建立一個大小為L的數(shù)組，并將數(shù)組中的各個元素初始化為第一預(yù)設(shè)值；
[0026]按照各個圖片的顯示順序依次對各個圖片進行排版，并保存各個圖片對應(yīng)的位置信息；其中，對于當(dāng)前待排版的圖片，將當(dāng)前數(shù)組中取值最小的元素在數(shù)組中的位置和取值作為當(dāng)前待排版的圖片在瀑布流中的位置信息，并將所述當(dāng)前待排版的圖片的高度值與數(shù)組中取值最小的元素的和作為該元素的取值。
[0027]優(yōu)選的，所述依次將圖片控件和對應(yīng)的圖片加載到瀑布流中包括:
[0028]對瀑布流待滑入到屏幕中的部分加載圖片控件；或，對瀑布流待滑入到屏幕中的部分加載圖片控件和對應(yīng)的圖片。
[0029]優(yōu)選的，所述依次將圖片控件和對應(yīng)的圖片加載到瀑布流中還包括:
[0030]對已下載的圖片中待加載的圖片進行預(yù)渲染。
[0031]優(yōu)選的，所述對已下載的圖片中待加載的圖片進行預(yù)渲染具體包括:
[0032]在判斷所述顯示界面的滾動速度小于第二預(yù)設(shè)值時，對已下載的圖片中待加載的圖片進行預(yù)渲染。
[0033]優(yōu)選的，所述方法還包括:
[0034]在判斷所述顯示界面的滾動速度達到第二預(yù)設(shè)值時，加載默認圖片。
[0035]本發(fā)明提供了一種以瀑布流方式顯示圖片的設(shè)備，包括:
[0036]初始化模塊，用于獲取需要顯示的多個圖片，初始化當(dāng)前顯示頁面；
[0037]顯示模塊，用于在顯示頁面被拖動的過程中，依次將圖片控件和對應(yīng)的圖片加載到瀑布流中，并回收移出屏幕的圖片對應(yīng)的圖片控件。
[0038]優(yōu)選的，所述設(shè)備還包括:數(shù)據(jù)池建立模塊，用于在初始化當(dāng)前顯示頁面之前，建立包含預(yù)設(shè)數(shù)量的圖片控件的數(shù)據(jù)池；
[0039]初始化模塊，具體用于從所述數(shù)據(jù)池建立模塊建立的數(shù)據(jù)池中取出圖片控件初始化當(dāng)前顯示界面；
[0040]顯示模塊，具體用于從所述數(shù)據(jù)池中取出圖片控件加載到瀑布流中，并將移出屏幕的圖片對應(yīng)的圖片控件放回到數(shù)據(jù)池中。
[0041]優(yōu)選的，所述設(shè)備還包括:排版模塊，用于在初始化顯示頁面之前，對各個圖片進行排版得到各個圖片在瀑布流中的位置信息；
[0042]所述初始化模塊，具體用于根據(jù)所述各個圖片的位置信息選取對應(yīng)的圖片初始化當(dāng)前頁面；
[0043]所述顯示模塊，具體用于根據(jù)所述待加載的圖片的位置信息將待加載的圖片及其對應(yīng)的圖片控件加載到瀑布流中。
[0044]優(yōu)選的，所述排版模塊具體用于執(zhí)行:
[0045]根據(jù)屏幕的寬度和圖片需要顯示的寬度確定瀑布流的圖片列數(shù)L ；
[0046]建立一個大小為L的數(shù)組，并將數(shù)組中的各個元素初始化為第一預(yù)設(shè)值；
[0047]按照各個圖片的顯示順序依次對各個圖片進行排版，并保存各個圖片對應(yīng)的位置信息；其中，對于當(dāng)前待排版的圖片，將當(dāng)前數(shù)組中取值最小的元素在數(shù)組中的位置和取值作為當(dāng)前待排版的圖片在瀑布流中的位置信息，并將所述當(dāng)前待排版的圖片的高度值與數(shù)組中取值最小的元素的和作為該元素的取值。
[0048]優(yōu)選的，所述顯示模塊還用于對瀑布流待滑入到屏幕中的部分加載圖片控件；或，對瀑布流待滑入到屏幕中的部分加載圖片控件和對應(yīng)的圖片。
[0049]優(yōu)選的，所述顯示模塊還用于對已下載的圖片中待加載的圖片進行預(yù)渲染。
[0050]優(yōu)選的，所述顯示模塊還用于在所述設(shè)備判斷所述顯示界面的滾動速度小于第二預(yù)設(shè)值時，對已下載的圖片中待加載的圖片進行預(yù)渲染。
[0051]優(yōu)選的，所述顯示模塊還用于在判斷所述顯示界面的滾動速度達到第二預(yù)設(shè)值時，加載默認圖片。
[0052]本發(fā)明提供的圖片顯示方法中，獲取需要顯示的多個圖片，初始化當(dāng)前顯示頁面；在顯示頁面被拖動的過程中，依次將圖片控件和對應(yīng)的圖片加載到瀑布流中，并回收移出屏幕的圖片對應(yīng)的圖片控件。由于對移出屏幕的圖片所對應(yīng)的圖片控件進行回收，可以避免在瀑布流顯示過程中，占用過多的圖片控件，從而減少對CPU和內(nèi)存的占用，避免在移動設(shè)備進行瀑布流顯示時的卡頓現(xiàn)象。
【附圖說明】
[0053]圖1為本發(fā)明實施例提供的一種以瀑布流方式顯示圖片的方法的流程示意圖；
[0054]圖2為本發(fā)明實施例提供的以瀑布流方式顯示圖片的方法中一種優(yōu)選的圖片排版方法的流程示意圖；
[0055]圖3為本發(fā)明實施例提供的以瀑布流方式顯示圖片的設(shè)備結(jié)構(gòu)示意圖。
【具體實施方式】
[0056]下面結(jié)合附圖和實施例，對本發(fā)明的【具體實施方式】作進一步描述。以下實施例僅用于更加清楚地說明本發(fā)明的技術(shù)方案，而不能以此來限制本發(fā)明的保護范圍。
[0057]本發(fā)明提供了一種圖片顯示方法，如圖1所述，該方法包括如下流程:
[0058]步驟1