一種瀑布流式顯示圖片的方法和裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及通信網(wǎng)絡(luò)技術(shù)領(lǐng)域，尤其涉及一種瀑布流式顯示圖片的方法和裝置。
【背景技術(shù)】
[0002]隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，瀏覽器瀏覽網(wǎng)頁(yè)的方式也呈現(xiàn)出多樣性，豐富的網(wǎng)頁(yè)瀏覽方式便捷了用戶瀏覽網(wǎng)頁(yè)的過程。瀏覽器瀏覽網(wǎng)頁(yè)中的圖片是用戶瀏覽網(wǎng)頁(yè)獲取的主要信息資源之一，為提升瀏覽圖片的效果及便捷瀏覽過程，現(xiàn)有技術(shù)中多數(shù)網(wǎng)站采用瀑布流式實(shí)現(xiàn)網(wǎng)頁(yè)中圖片的加載及呈現(xiàn)。在顯示技術(shù)領(lǐng)域中，當(dāng)一個(gè)頁(yè)面需要同時(shí)顯示大量的圖片、文字和鏈接等對(duì)象時(shí)，尤其在用戶觸發(fā)滾動(dòng)操作較多的情況下，通常采用瀑布流的顯示方式。
[0003]瀑布流，又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁(yè)面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國(guó)內(nèi)流行開來。國(guó)內(nèi)大多數(shù)清新站基本為這類風(fēng)格?，F(xiàn)在包括貼吧，百度圖片，旅游等網(wǎng)站都采用此種方式進(jìn)行圖片呈現(xiàn)。瀑布流效果目前在大多數(shù)網(wǎng)站中可以見到，參差不齊的多欄布局格式，是瀑布流的特點(diǎn)。瀑布流可以通過jQuery插件結(jié)合css代碼來實(shí)現(xiàn)。
[0004]對(duì)于圖片的展現(xiàn)，瀑布流的效果是高效而且獨(dú)具吸引力的。瀑布流里延遲加載模式又避免了用戶鼠標(biāo)點(diǎn)擊的翻頁(yè)操作，瀑布流的主要特性便是錯(cuò)落有致，定寬而不定高的設(shè)計(jì)讓頁(yè)面區(qū)別于傳統(tǒng)的矩陣式圖片布局模式，巧妙的利用視覺層級(jí)，視線的任意流動(dòng)又緩解了視覺疲勞。
[0005]在瀑布流的場(chǎng)景下，相關(guān)技術(shù)中通常采用如下方式:終端獲取瀑布流布局排布的至少一個(gè)待顯示的對(duì)象，該對(duì)象可以包括圖片、文字和鏈接等;通過滾動(dòng)頁(yè)面的方式，終端不斷加載對(duì)象;在頁(yè)面滾動(dòng)的過程中，終端會(huì)保存被移除出顯示區(qū)域的對(duì)象的瀏覽歷史記錄，通常還會(huì)同時(shí)保留這些被移除出顯示區(qū)域的對(duì)象。
[0006]現(xiàn)有技術(shù)的缺陷是:通過一個(gè)瀑布流組件實(shí)現(xiàn)包括加載、渲染和數(shù)據(jù)管理在內(nèi)的所有的功能，其代碼的數(shù)量過大，不易迭代調(diào)用和維護(hù);代碼耦合度高，不利于不同的加載規(guī)則、不同的渲染規(guī)則之間的組合，從而導(dǎo)致大大增加了使用和維護(hù)的成本。

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

[0007]鑒于上述問題，提出了本發(fā)明的技術(shù)方案以便提供一種克服上述問題或者至少部分地解決或者減緩上述問題。
[0008]根據(jù)本發(fā)明的一個(gè)方面，提供了一種以瀑布流方式顯示圖片的方法，包括:
[0009]通過瀑布流加載器選擇瀑布流的加載方式并獲取加載數(shù)據(jù)；
[0010]數(shù)據(jù)管理器將瀑布流加載器獲取的加載數(shù)據(jù)進(jìn)行格式化；
[0011 ]瀑布流渲染器對(duì)數(shù)據(jù)管理器格式化后的數(shù)據(jù)進(jìn)行渲染。
[0012]進(jìn)一步的，通過頻道瀑布流調(diào)用方式或搜索瀑布流調(diào)用方式來調(diào)用不同的瀑布流。
[0013]進(jìn)一步的，所述瀑布流的加載方式包括:自動(dòng)加載、手動(dòng)加載、手動(dòng)加載η次之后自動(dòng)加載、η次自動(dòng)加載之后需手動(dòng)加載一次。
[0014]進(jìn)一步的，所述瀑布流加載器選擇瀑布流的加載方式包括:
[0015]通過傳遞參數(shù)的方式來自動(dòng)選擇不同的加載方式。
[0016]進(jìn)一步的，所述數(shù)據(jù)管理器負(fù)責(zé)將瀑布流加載器獲取的加載數(shù)據(jù)進(jìn)行格式化包括:
[0017]利用數(shù)據(jù)管理器將不同的數(shù)據(jù)類型格式轉(zhuǎn)換成相同的預(yù)定格式。
[0018]進(jìn)一步的，所述利用數(shù)據(jù)管理器將不同的數(shù)據(jù)類型格式轉(zhuǎn)換成相同的預(yù)定格式包括:
[0019]數(shù)據(jù)管理器通過指定不可重復(fù)的字段的方式對(duì)數(shù)據(jù)進(jìn)行自動(dòng)去重。
[0020]進(jìn)一步的，所述瀑布流渲染器對(duì)數(shù)據(jù)管理器格式化后的數(shù)據(jù)進(jìn)行渲染還包括:
[0021 ]對(duì)數(shù)據(jù)管理器格式化后的數(shù)據(jù)進(jìn)行預(yù)渲染。
[0022]進(jìn)一步的，所述對(duì)數(shù)據(jù)管理器格式化后的數(shù)據(jù)進(jìn)行預(yù)渲染包括:
[0023]首先判斷所述格式化后的數(shù)據(jù)是否滿足預(yù)渲染條件；
[0024]如果所述格式化后的數(shù)據(jù)中有至少一個(gè)數(shù)據(jù)滿足所述預(yù)渲染條件，則所述瀑布流渲染器對(duì)所述至少一個(gè)數(shù)據(jù)進(jìn)行預(yù)渲染。
[0025]進(jìn)一步的，所述瀑布流渲染器對(duì)數(shù)據(jù)管理器格式化后的數(shù)據(jù)進(jìn)行渲染包括:
[0026]將數(shù)據(jù)管理器格式化后的數(shù)據(jù)按照瀑布流進(jìn)行排列、隨著窗口大小縮放重排、對(duì)超過預(yù)定數(shù)量的瀑布流節(jié)點(diǎn)進(jìn)行隱藏。
[0027]進(jìn)一步的，所述瀑布流渲染器包括:多列瀑布流渲染器、規(guī)則形狀的瀑布流渲染器和橫向瀑布流渲染器。
[0028]進(jìn)一步的，所述瀑布流加載器和數(shù)據(jù)管理器為公有的功能組件，所述瀑布流渲染器為私有的功能組件。
[0029]根據(jù)本發(fā)明的另一方面，提供了一種以瀑布流方式顯示圖片的裝置，包括:
[0030]瀑布流加載器，用于選擇瀑布流的加載方式并獲取加載數(shù)據(jù)；
[0031]數(shù)據(jù)管理器，用于將瀑布流加載器獲取的加載數(shù)據(jù)進(jìn)行格式化；
[0032]瀑布流渲染器，用于對(duì)數(shù)據(jù)管理器格式化后的數(shù)據(jù)進(jìn)行渲染。
[0033]進(jìn)一步的，所述裝置還包括瀑布流調(diào)用單元，通過頻道瀑布流調(diào)用方式或搜索瀑布流調(diào)用方式來調(diào)用不同的瀑布流。
[0034]進(jìn)一步的，所述瀑布流的加載方式包括:自動(dòng)加載、手動(dòng)加載、手動(dòng)加載η次之后自動(dòng)加載、η次自動(dòng)加載之后需手動(dòng)加載一次。
[0035]進(jìn)一步的，所述瀑布流加載器選擇瀑布流的加載方式包括:
[0036]通過傳遞參數(shù)的方式來自動(dòng)選擇不同的加載方式。
[0037]進(jìn)一步的，所述數(shù)據(jù)管理器負(fù)責(zé)將瀑布流加載器獲取的加載數(shù)據(jù)進(jìn)行格式化包括:
[0038]利用數(shù)據(jù)管理器將不同的數(shù)據(jù)類型格式轉(zhuǎn)換成相同的預(yù)定格式。
[0039]進(jìn)一步的，所述利用數(shù)據(jù)管理器將不同的數(shù)據(jù)類型格式轉(zhuǎn)換成相同的預(yù)定格式包括:
[0040]數(shù)據(jù)管理器通過指定不可重復(fù)的字段的方式對(duì)數(shù)據(jù)進(jìn)行自動(dòng)去重。
[0041 ]進(jìn)一步的，所述瀑布流渲染器對(duì)數(shù)據(jù)管理器格式化后的數(shù)據(jù)進(jìn)行渲染還包括:
[0042]預(yù)渲染器，用于對(duì)數(shù)據(jù)管理器格式化后的數(shù)據(jù)進(jìn)行預(yù)渲染。
[0043]進(jìn)一步的，所述對(duì)數(shù)據(jù)管理器格式化后的數(shù)據(jù)進(jìn)行預(yù)渲染包括:
[0044]首先判斷所述格式化后的數(shù)據(jù)是否滿足預(yù)渲染條件；
[0045]如果所述格式化后的數(shù)據(jù)中有至少一個(gè)數(shù)據(jù)滿足所述預(yù)渲染條件，則所述瀑布流渲染器對(duì)所述至少一個(gè)數(shù)據(jù)進(jìn)行預(yù)渲染。
[0046]進(jìn)一步的，所述瀑布流渲染器對(duì)數(shù)據(jù)管理器格式化后的數(shù)據(jù)進(jìn)行渲染包括:
[0047]將數(shù)據(jù)管理器格式化后的數(shù)據(jù)按照瀑布流進(jìn)行排列、隨著窗口大小縮放重排、對(duì)超過預(yù)定數(shù)量的瀑布流節(jié)點(diǎn)進(jìn)行隱藏。
[0048]進(jìn)一步的，所述瀑布流渲染器包括:多列瀑布流渲染器、規(guī)則形狀的瀑布流渲染器和橫向瀑布流渲染器。
[0049]進(jìn)一步的，所述瀑布流加載器和數(shù)據(jù)管理器為公有的功能組件，所述瀑布流渲染器為私有的功能組件。
[0050]本發(fā)明的有益效果為:
[0051 ]本發(fā)明的技術(shù)方案在現(xiàn)有技術(shù)中瀑布流的基礎(chǔ)上，將一個(gè)瀑布流組件拆分為瀑布流加載器、數(shù)據(jù)管理器和瀑布流渲染器三個(gè)功能模塊，
[0052]1、降低了單個(gè)功能模塊的代碼數(shù)量和代碼的耦合度，便于系統(tǒng)的開發(fā)與維護(hù)；
[0053]2、將一個(gè)綜合的功能組件拆分為三個(gè)功能相對(duì)單一的功能模塊，從而大大增加了系統(tǒng)的靈活性，便于不同的加載規(guī)則、不同的渲染規(guī)則之間的組合。
[0054]上述說明僅是本發(fā)明技術(shù)方案的概述，為了能夠更清楚了解本發(fā)明的技術(shù)手段，而可依照說明書的內(nèi)容予以實(shí)施，并且為了讓本發(fā)明的上述和其它目的、特征和優(yōu)點(diǎn)能夠更明顯易懂，以下特舉本發(fā)明的【具體實(shí)施方式】。
【附圖說明】
[0055]通過閱讀下文【具體實(shí)施方式】的詳細(xì)描述，各種其他的優(yōu)點(diǎn)和益處對(duì)于本領(lǐng)域普通技術(shù)人員將變得清楚明了。附圖僅用于示出【具體實(shí)施方式】的目的，而并不認(rèn)為是對(duì)本發(fā)明的限制。而且在整個(gè)附圖中，用相同的參考符號(hào)表示相同的部件。在附圖中:
[0056]圖1為本發(fā)明的以瀑布流方式顯示圖片的方法流程圖；
[0057]圖2為本發(fā)明中判斷搜索結(jié)果是否滿足預(yù)渲染條件的方法流程圖；
[0058]圖3為現(xiàn)有技術(shù)的瀑布流調(diào)用方式下的瀑布流渲染示意圖；
[0059]圖4為本發(fā)明的瀑布流調(diào)用方式下的瀑布流渲染示意圖；
[0060]圖5為本發(fā)明的以瀑布流方式顯示圖片的裝置示意圖。
[0061]圖6為本發(fā)明的以瀑布流方式顯示