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

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

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