自適應(yīng)調(diào)整的界面流式布局顯示的方法和系統(tǒng)的制作方法
【專(zhuān)利摘要】本申請(qǐng)公開(kāi)了自適應(yīng)調(diào)整的界面流式布局顯示的方法和系統(tǒng)，方法包括：檢測(cè)運(yùn)行該瀏覽器的終端系統(tǒng)的分辨率值；根據(jù)分辨率值，將在頁(yè)面中預(yù)先設(shè)定像素值的單元格構(gòu)建成豎向排列且布滿(mǎn)頁(yè)面的柵格；讀取柵格橫向方向的總像素值，并結(jié)合預(yù)置的視頻縮略圖的基準(zhǔn)顯示列數(shù)與柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系，調(diào)整視頻縮略圖和視頻分類(lèi)標(biāo)簽的尺寸；在柵格上將調(diào)整后的視頻分類(lèi)標(biāo)簽和視頻縮略圖以橫向排列方式構(gòu)成多個(gè)橫向平行設(shè)置的視頻分類(lèi)行進(jìn)行顯示。本發(fā)明解決了頁(yè)面中視頻縮略的布局散亂且視頻縮略圖尺寸在較高分辨率下產(chǎn)生縮減的問(wèn)題。
【專(zhuān)利說(shuō)明】自適應(yīng)調(diào)整的界面流式布局顯示的方法和系統(tǒng)
【技術(shù)領(lǐng)域】
[0001]本申請(qǐng)涉及界面布局顯示領(lǐng)域，更具體地，涉及一種自適應(yīng)調(diào)整的界面流式布局顯示的方法和系統(tǒng)。
【背景技術(shù)】
[0002]隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，人們獲取信息的方式已經(jīng)發(fā)生改變:從傳統(tǒng)的書(shū)籍、報(bào)紙、電視、廣播等方式，繼而變成通過(guò)互聯(lián)網(wǎng)獲取。尤其是互聯(lián)網(wǎng)將影視節(jié)目、新聞、廣告、聊天視頻、游戲視頻和監(jiān)控視頻等等豐富的綜合性網(wǎng)絡(luò)視頻資源進(jìn)行共享，從而網(wǎng)絡(luò)視頻已經(jīng)成為人們學(xué)習(xí)、社交以及休閑娛樂(lè)而不可替代的重要方式。
[0003]目前的網(wǎng)站，尤其是視頻網(wǎng)站負(fù)責(zé)為用戶(hù)提供豐富的視頻資源，用戶(hù)可以通過(guò)終端上的瀏覽器進(jìn)行訪問(wèn)視頻網(wǎng)站的點(diǎn)播頁(yè)面，觀看用戶(hù)想要觀看的各類(lèi)視頻。
[0004]通常，點(diǎn)播頁(yè)面上的大量視頻資源都以具有代表性的視頻截圖形成視頻縮略圖的方式進(jìn)行展現(xiàn)，這樣，用戶(hù)通過(guò)視頻縮略圖可以直觀、清楚的了解相應(yīng)的視頻資源的大致內(nèi)容，從而增加了用戶(hù)的瀏覽體驗(yàn)感受。
[0005]現(xiàn)有技術(shù)中，點(diǎn)播頁(yè)面中的視頻縮略圖的排列方式雖然會(huì)按照不同的分類(lèi)進(jìn)行排列(如按照電影、電視劇、新聞、體育等方式排列分類(lèi))，但是排列的歸屬性不強(qiáng)，整體較散舌L。
[0006]而且，重要的是，用戶(hù)訪問(wèn)網(wǎng)站時(shí)所使用的終端的屏幕分辨率各不相同，在終端屏幕固定的情況下，其分辨率越高，顯示的精度就越高，分辨率高的屏幕可以顯示更多內(nèi)容，相應(yīng)帶來(lái)的顯示效果是顯示內(nèi)容尺寸大小的縮減，導(dǎo)致視頻縮略圖密集顯示在頁(yè)面中，造成觀看不適，嚴(yán)重影響用戶(hù)的瀏覽體驗(yàn)。

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

[0007]有鑒于此，本申請(qǐng)所要解決的技術(shù)問(wèn)題是提供了一種自適應(yīng)調(diào)整的界面流式布局顯示的方法和系統(tǒng)，以解決頁(yè)面中視頻縮略的布局散亂且視頻縮略圖尺寸在較高分辨率下產(chǎn)生縮減的問(wèn)題。
[0008]為了解決上述技術(shù)問(wèn)題，本申請(qǐng)公開(kāi)了一種自適應(yīng)調(diào)整的界面流式布局顯示的方法，其特征在于，包括:
檢測(cè)運(yùn)行該瀏覽器的終端系統(tǒng)的分辨率值；
根據(jù)所述分辨率值，將在所述頁(yè)面中預(yù)先設(shè)定像素值的單元格構(gòu)建成豎向排列且布滿(mǎn)所述頁(yè)面的柵格；
讀取所述柵格橫向方向的總像素值，并結(jié)合預(yù)置的視頻縮略圖的基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系，調(diào)整所述視頻縮略圖和視頻分類(lèi)標(biāo)簽的尺寸；
在所述柵格上將調(diào)整后的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖以橫向排列方式構(gòu)成多個(gè)橫向平行設(shè)置的視頻分類(lèi)行進(jìn)行顯示。
[0009]優(yōu)選地，其中，預(yù)置的視頻縮略圖的基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系，進(jìn)一步為:在不同的屏幕尺寸數(shù)值下以長(zhǎng)度為1024像素的分辨率值為基準(zhǔn)值，劃定所述頁(yè)面中所述視頻縮略圖的基準(zhǔn)顯示列數(shù)，并以該基準(zhǔn)顯示列數(shù)為定值獲取不同分辨率值下所述視頻縮略圖的尺寸比例，建立所述視頻縮略圖的該基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系。
[0010]優(yōu)選地，其中，讀取所述柵格橫向方向的總像素值，并結(jié)合預(yù)置的視頻縮略圖的基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系，調(diào)整所述視頻縮略圖和視頻分類(lèi)標(biāo)簽的尺寸，進(jìn)一步為:讀取所述柵格橫向方向的總像素值，保持所述視頻縮略圖的基準(zhǔn)顯示列數(shù)不變，獲取該總像素值下所述視頻縮略圖的橫向長(zhǎng)度像素尺寸，并根據(jù)所述視頻縮略圖固定的長(zhǎng)寬像素比例，調(diào)整所述視頻縮略圖的尺寸，以及根據(jù)所述視頻分類(lèi)標(biāo)簽與所述視頻縮略圖的尺寸對(duì)應(yīng)關(guān)系，調(diào)整所述視頻分類(lèi)標(biāo)簽的尺寸。
[0011]優(yōu)選地，其中，調(diào)整后的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖的實(shí)際尺寸大于調(diào)整前的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖的實(shí)際尺寸。
[0012]優(yōu)選地，其中，在所述柵格上將調(diào)整后的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖以橫向排列方式構(gòu)成多個(gè)橫向平行設(shè)置的視頻分類(lèi)行進(jìn)行顯示，進(jìn)一步為:在所述柵格上將調(diào)整后的所述視頻分類(lèi)標(biāo)簽置于最左側(cè)，將對(duì)應(yīng)該視頻標(biāo)簽的調(diào)整后的所述視頻縮略圖按照從左至右的方式依次橫向排列于所述視頻標(biāo)簽右側(cè)，構(gòu)成多個(gè)橫向平行設(shè)置的火車(chē)流形式的視頻分類(lèi)行進(jìn)行顯示。
[0013]為了解決上述技術(shù)問(wèn)題，本申請(qǐng)還公開(kāi)了一種自適應(yīng)調(diào)整的界面流式布局顯示的系統(tǒng)，與瀏覽器相耦接，其特征在于，該系統(tǒng)包括:檢測(cè)單元、柵格單元、調(diào)整單元以及布局單元，其中，
所述檢測(cè)單元，用于檢測(cè)運(yùn)行該瀏覽器的終端系統(tǒng)的分辨率值；
所述柵格單元，用于根據(jù)所述分辨率值，將在所述頁(yè)面中預(yù)先設(shè)定像素值的單元格構(gòu)建成豎向排列且布滿(mǎn)所述頁(yè)面的柵格；
所述調(diào)整單元，用于讀取所述柵格橫向方向的總像素值，并結(jié)合預(yù)置的視頻縮略圖的基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系，調(diào)整所述視頻縮略圖和視頻分類(lèi)標(biāo)簽的尺寸；
所述布局單元，用于在所述柵格上將調(diào)整后的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖以橫向排列方式構(gòu)成多個(gè)橫向平行設(shè)置的視頻分類(lèi)行進(jìn)行顯示。
[0014]優(yōu)選地，其中，預(yù)置的視頻縮略圖的基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系，進(jìn)一步為:在不同的屏幕尺寸數(shù)值下以長(zhǎng)度為1024像素的分辨率值為基準(zhǔn)值，劃定所述頁(yè)面中所述視頻縮略圖的基準(zhǔn)顯示列數(shù)，并以該基準(zhǔn)顯示列數(shù)為定值獲取不同分辨率值下所述視頻縮略圖的尺寸比例，建立所述視頻縮略圖的該基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系。
[0015]優(yōu)選地，其中，所述調(diào)整單元，進(jìn)一步用于:讀取所述柵格橫向方向的總像素值，保持所述視頻縮略圖的基準(zhǔn)顯示列數(shù)不變，獲取該總像素值下所述視頻縮略圖的橫向長(zhǎng)度像素尺寸，并根據(jù)所述視頻縮略圖固定的長(zhǎng)寬像素比例，調(diào)整所述視頻縮略圖的尺寸，以及根據(jù)所述視頻分類(lèi)標(biāo)簽與所述視頻縮略圖的尺寸對(duì)應(yīng)關(guān)系，調(diào)整所述視頻分類(lèi)標(biāo)簽的像素尺寸尺寸。
[0016]優(yōu)選地，其中，調(diào)整后的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖的實(shí)際尺寸大于調(diào)整前的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖的實(shí)際尺寸。
[0017]優(yōu)選地，其中，所述布局單元，進(jìn)一步用于:在所述柵格上將調(diào)整后的所述視頻分類(lèi)標(biāo)簽置于最左側(cè)，將對(duì)應(yīng)該視頻標(biāo)簽的調(diào)整后的所述視頻縮略圖按照從左至右的方式依次橫向排列于所述視頻標(biāo)簽右側(cè)，構(gòu)成多個(gè)橫向平行設(shè)置的火車(chē)流形式的視頻分類(lèi)行進(jìn)行顯不O
[0018]與現(xiàn)有技術(shù)相比，本申請(qǐng)所述的一種自適應(yīng)調(diào)整的界面流式布局顯示的方法和系統(tǒng)，達(dá)到了如下效果:
I)本申請(qǐng)通過(guò)根據(jù)在頁(yè)面顯示前所檢測(cè)到的屏幕的分辨率，將在頁(yè)面中預(yù)置的單元格構(gòu)成符合當(dāng)前分辨率的不同尺寸的視頻分類(lèi)標(biāo)簽及視頻縮略圖，并進(jìn)行火車(chē)流式的排列顯示，即使在分辨率發(fā)生變化時(shí)，構(gòu)成的視頻分類(lèi)標(biāo)簽及視頻縮略圖也可以根據(jù)變化后的分辨率進(jìn)行尺寸大小的調(diào)整，當(dāng)用戶(hù)瀏覽觀看時(shí)，視頻分類(lèi)標(biāo)簽及視頻縮略圖不會(huì)因?yàn)榉直媛实脑黾訉?dǎo)致尺寸大小的縮減，有效解決了頁(yè)面中視頻縮略的布局散亂且視頻縮略圖尺寸在較高分辨率下產(chǎn)生縮減的問(wèn)題。
[0019]2)本申請(qǐng)中的單元格的寬度像素值可以增強(qiáng)頁(yè)面的顯示效果，由該單元格構(gòu)成的柵格上可以良好的劃分成不同的顯示區(qū)域，在柵格上設(shè)置的顯示內(nèi)容(包括:視頻分類(lèi)標(biāo)簽及視頻縮略圖)的尺寸大小可以達(dá)到最佳的瀏覽舒適度。
[0020]3)本申請(qǐng)所顯示的內(nèi)容(包括:視頻分類(lèi)標(biāo)簽及視頻縮略圖)按照不同類(lèi)型橫向排列，增加了顯示內(nèi)容的歸屬性，也增強(qiáng)用戶(hù)的瀏覽體驗(yàn)。
[0021]當(dāng)然，實(shí)施本申請(qǐng)的任一產(chǎn)品必不一定需要同時(shí)達(dá)到以上所述的所有技術(shù)效果。
[0022]
【專(zhuān)利附圖】

【附圖說(shuō)明】
[0023]此處所說(shuō)明的附圖用來(lái)提供對(duì)本申請(qǐng)的進(jìn)一步理解，構(gòu)成本申請(qǐng)的一部分，本申請(qǐng)的示意性實(shí)施例及其說(shuō)明用于解釋本申請(qǐng)，并不構(gòu)成對(duì)本申請(qǐng)的不當(dāng)限定。在附圖中:
圖1是本申請(qǐng)實(shí)施例一所述的自適應(yīng)調(diào)整的界面流式布局顯示的方法的流程框圖。
[0024]圖2是本申請(qǐng)實(shí)施例二所述的自適應(yīng)調(diào)整的界面流式布局顯示的方法的流程框圖。
[0025]圖3是本申請(qǐng)實(shí)施例一、二中單元格及其構(gòu)成的柵格的示意圖。
[0026]圖4至7是本申請(qǐng)實(shí)施例三中所述的自適應(yīng)調(diào)整的界面流式布局顯示的方法中視頻縮略圖和視頻分類(lèi)標(biāo)簽在不同分辨率下的顯示示意圖。
[0027]圖8是本申請(qǐng)實(shí)施例四所述的自適應(yīng)調(diào)整的界面流式布局顯示的系統(tǒng)的結(jié)構(gòu)框圖。
[0028]【具體實(shí)施方式】
[0029]如在說(shuō)明書(shū)及權(quán)利要求當(dāng)中使用了某些詞匯來(lái)指稱(chēng)特定組件。本領(lǐng)域技術(shù)人員應(yīng)可理解，硬件制造商可能會(huì)用不同名詞來(lái)稱(chēng)呼同一個(gè)組件。本說(shuō)明書(shū)及權(quán)利要求并不以名稱(chēng)的差異來(lái)作為區(qū)分組件的方式，而是以組件在功能上的差異來(lái)作為區(qū)分的準(zhǔn)則。如在通篇說(shuō)明書(shū)及權(quán)利要求當(dāng)中所提及的“包含”為一開(kāi)放式用語(yǔ)，故應(yīng)解釋成“包含但不限定于”。“大致”是指在可接收的誤差范圍內(nèi)，本領(lǐng)域技術(shù)人員能夠在一定誤差范圍內(nèi)解決所述技術(shù)問(wèn)題，基本達(dá)到所述技術(shù)效果。此外，“耦接”一詞在此包含任何直接及間接的電性耦接手段。因此，若文中描述一第一裝置耦接于一第二裝置，則代表所述第一裝置可直接電性耦接于所述第二裝置，或通過(guò)其他裝置或耦接手段間接地電性耦接至所述第二裝置。說(shuō)明書(shū)后續(xù)描述為實(shí)施本申請(qǐng)的較佳實(shí)施方式，然所述描述乃以說(shuō)明本申請(qǐng)的一般原則為目的，并非用以限定本申請(qǐng)的范圍。本申請(qǐng)的保護(hù)范圍當(dāng)視所附權(quán)利要求所界定者為準(zhǔn)。
實(shí)施例一
如圖1所示，為本申請(qǐng)實(shí)施例一所述的一種自適應(yīng)調(diào)整的界面流式布局顯示的方法，該方法包括:
步驟101，檢測(cè)運(yùn)行瀏覽器的終端系統(tǒng)的分辨率值。
[0030]用戶(hù)所使用的屏幕的分辨率大小各不相同，分辨率表示屏幕長(zhǎng)度和寬度方向上的像素值，顯示于屏幕中的內(nèi)容(包括:文字、圖像等)均由像素點(diǎn)構(gòu)成，從而，分辨率就反映了在屏幕中顯示內(nèi)容的多少和顯示的精度:分辨率越低，顯示內(nèi)容就越少，相應(yīng)的顯示精度越低；反之,顯示內(nèi)容多,顯示精度高。
[0031]在用戶(hù)通過(guò)終端(包括:計(jì)算機(jī)終端、移動(dòng)終端等，在此不作具體限定)上的瀏覽器訪問(wèn)相應(yīng)的網(wǎng)站(具體可以是視頻網(wǎng)站)時(shí)，可以通過(guò)瀏覽器或運(yùn)行該瀏覽器的終端系統(tǒng)中的檢測(cè)線程，獲取當(dāng)前屏幕的分辨率值，在本申請(qǐng)中，獲取的分辨率值可以記錄于HTML(HyperText Mark-up Language,超文本標(biāo)記語(yǔ)言)文件或者是符合網(wǎng)絡(luò)傳輸通信標(biāo)準(zhǔn)的瀏覽器信息文件中。對(duì)于本領(lǐng)域技術(shù)人員來(lái)說(shuō)，這里不作具體限定。
[0032]步驟102，根據(jù)所述分辨率值，將在所述頁(yè)面中預(yù)先設(shè)定像素值的單元格構(gòu)建成豎向排列且布滿(mǎn)所述頁(yè)面的柵格。
[0033]在瀏覽器頁(yè)面中所顯示的內(nèi)容，依賴(lài)于柵格進(jìn)行布局設(shè)計(jì)，形成的柵格為豎直排列的條形結(jié)構(gòu)，如圖3所示，柵格并不會(huì)在瀏覽器頁(yè)面中顯示，只作為在瀏覽器頁(yè)面顯示前進(jìn)行頁(yè)面布局調(diào)整的參照。柵格由所述單元格構(gòu)成，由于柵格在豎直方向延伸，所以對(duì)柵格在豎直方向上的像素值不作出限定，其在豎直方向上延伸的長(zhǎng)度取決于實(shí)際應(yīng)用中頁(yè)面內(nèi)容的多少，因此在步驟102中，預(yù)先設(shè)定的單元格的像素值就是該單元格在水平方向的像素值。根據(jù)分辨率值，可獲知屏幕在水平方向的具體像素值，再根據(jù)水平方向像素值已知的單元格，便可以構(gòu)成頁(yè)面中的柵格。
[0034]步驟103，讀取所述柵格橫向方向的總像素值，并結(jié)合預(yù)置的視頻縮略圖的基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系，調(diào)整所述視頻縮略圖和視頻分類(lèi)標(biāo)簽的尺寸。
[0035]由于頁(yè)面中的顯示內(nèi)容(可以包括:圖片、視頻分類(lèi)標(biāo)簽、視頻縮略圖、文字等)均由柵格構(gòu)成，所述對(duì)于步驟103中的柵格橫向方向(水平方向)的總像素值，代表了頁(yè)面在水平方向的實(shí)際顯示范圍，那么，在柵格橫向方向的總像素值確定后，頁(yè)面中可以橫向設(shè)置視頻縮略圖、視頻分類(lèi)標(biāo)簽等內(nèi)容的數(shù)量也就確定了。在步驟103中，只需調(diào)整視頻縮略圖和視頻分類(lèi)標(biāo)簽的尺寸即可，如:在橫向像素值為1024的分辨率下，調(diào)整頁(yè)面中橫向設(shè)置的視頻縮略圖的數(shù)量為6個(gè)。
[0036]步驟104，在所述柵格上將調(diào)整后的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖以橫向排列方式構(gòu)成多個(gè)橫向平行設(shè)置的視頻分類(lèi)行進(jìn)行顯示。[0037]視頻分類(lèi)標(biāo)簽代表了視頻內(nèi)容的所劃分的類(lèi)型，將不同類(lèi)型的視頻匯聚在一起，可以增強(qiáng)用戶(hù)的體驗(yàn)感，在本實(shí)施例中，視頻分類(lèi)標(biāo)簽可以是圖片、圖標(biāo)等形式的圖形或文字標(biāo)簽。視頻分類(lèi)標(biāo)簽的尺寸通常設(shè)置為小于視頻縮略圖的尺寸，作為一種方式，視頻分類(lèi)標(biāo)簽的長(zhǎng)度與寬度的尺寸比例為1:1，視頻縮略圖的長(zhǎng)度與寬度的尺寸比例為16:9。當(dāng)然上述視頻分類(lèi)標(biāo)簽和視頻縮略圖的長(zhǎng)寬比例可以根據(jù)實(shí)際應(yīng)用的需要進(jìn)行調(diào)整，并不構(gòu)成對(duì)本申請(qǐng)的限定。
[0038]通過(guò)本實(shí)施例中的上述步驟101至104，在用戶(hù)啟動(dòng)瀏覽器訪問(wèn)相應(yīng)的網(wǎng)站頁(yè)面時(shí)(在頁(yè)面顯示前)，可以根據(jù)當(dāng)前用戶(hù)所使用的終端系統(tǒng)的分辨率值，對(duì)頁(yè)面中的顯示內(nèi)容進(jìn)行調(diào)整，使頁(yè)面中的顯示內(nèi)容適應(yīng)于不同的分辨率值，而且，所顯示的內(nèi)容(如:視頻縮略圖)按照不同類(lèi)型橫向排列，增加了顯示內(nèi)容的歸屬性，也增強(qiáng)用戶(hù)的瀏覽體驗(yàn)，即在高分辨率的情況下，頁(yè)面中所顯示的內(nèi)容也不會(huì)出現(xiàn)過(guò)于縮小而影響瀏覽效果的情況。
[0039]實(shí)施例二
如圖2所示，為本申請(qǐng)實(shí)施例二所述的一種自適應(yīng)調(diào)整的界面流式布局顯示的方法，該方法包括:
步驟201，通過(guò)瀏覽器對(duì)頁(yè)面進(jìn)行顯示時(shí)，檢測(cè)運(yùn)行該瀏覽器的終端系統(tǒng)的分辨率值以及當(dāng)前瀏覽器窗口在最大化尺寸時(shí)的像素值。
[0040]檢測(cè)的過(guò)程可以開(kāi)始于啟動(dòng)瀏覽器的瞬間，瀏覽器窗口在最大化尺寸時(shí)的像素值可以記錄于HTML文件中，終端系統(tǒng)的分辨率值可以通過(guò)訪問(wèn)當(dāng)前終端的系統(tǒng)中的顯示進(jìn)程獲取得到。對(duì)于瀏覽器窗口在最大化尺寸時(shí)的像素值而言，具體是該瀏覽器窗口在最大化尺寸時(shí)橫向方向(水平方向的)的像素值。
[0041]步驟202，根據(jù)所述分辨率值和當(dāng)前瀏覽器窗口在最大化尺寸時(shí)的像素值，將在所述頁(yè)面中預(yù)先設(shè)定像素值的單元格A構(gòu)建成豎向排列且布滿(mǎn)所述頁(yè)面的柵格。
[0042]其中，柵格由所述單兀格構(gòu)成，由于柵格在豎直方向延伸，所以對(duì)柵格在豎直方向上的像素值不需作出限定，其在豎直方向上延伸的長(zhǎng)度取決于實(shí)際應(yīng)用中頁(yè)面內(nèi)容的多少，與分辨率值不相關(guān)，那么在步驟202中，與分辨率值相關(guān)的是橫向方向(水平方向)的像素值，所以預(yù)先設(shè)定的單元格的像素值就是該單元格在水平方向的像素值。如圖3所示，單元格A (在本實(shí)施例中，也可稱(chēng)為柵格單元格)由像素寬度為35px (像素)的a部分和像素寬度為IOpx的i部分構(gòu)成，i部分位于a部分兩側(cè)，單元格A的像素寬度為55px，在圖3中，在不同的分辨率下，由該單元格A可以排列構(gòu)成具有不同像素寬度的柵格。例如，在水平方向?yàn)?366px以下的分辨率值下，柵格的像素寬度為990px ;在水平方向?yàn)?366px以上的分辨率值下，柵格的像素寬度為990px。
[0043]作為本實(shí)施例中的另一種方式，當(dāng)屏幕分辨率出現(xiàn)大幅度增加時(shí)，如:分辨率提升至4K級(jí)(4096pxX2160px)的分辨率時(shí)，如圖3所示，單元格A的a和i兩部分均增加3倍。當(dāng)然，對(duì)于單元格A的倍數(shù)改變還可以是其他方式，并不作為對(duì)本申請(qǐng)的限定。
[0044]需要說(shuō)明的是，本實(shí)施例中的單元格A的像素寬度可以使頁(yè)面的效果達(dá)到最佳，當(dāng)然，柵格并不直接顯示于頁(yè)面中，而是作為后續(xù)顯示內(nèi)容調(diào)整的基準(zhǔn)參照。
[0045]步驟203，讀取由單元格A所構(gòu)成的柵格在橫向方向上的總像素值，并結(jié)合預(yù)置的視頻縮略圖的基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系，調(diào)整所述視頻縮略圖和視頻分類(lèi)標(biāo)簽的尺寸。[0046]其中，預(yù)置的視頻縮略圖的基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系，具體為:在不同的屏幕尺寸數(shù)值下以長(zhǎng)度為1024像素的分辨率值為基準(zhǔn)值，劃定所述頁(yè)面中所述視頻縮略圖的基準(zhǔn)顯示列數(shù)，并以該基準(zhǔn)顯示列數(shù)為定值獲取不同分辨率值下所述視頻縮略圖的尺寸比例，建立所述視頻縮略圖的該基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系。
[0047]對(duì)于不同的屏幕尺寸而言，尤其是較大尺寸的屏幕中，若以長(zhǎng)度為1024像素的分辨率以下的分辨率進(jìn)行顯示，其顯示效果較差，所以在本實(shí)施例中以長(zhǎng)度為1024像素(可以稱(chēng)為基準(zhǔn)像素)的分辨率值為基準(zhǔn)值(即最低值)，劃定頁(yè)面中視頻縮略圖的顯示列數(shù)為基準(zhǔn)列數(shù)(如:6列，即在當(dāng)前頁(yè)面中可以橫向排列設(shè)置6個(gè)不同的視頻縮略圖)，那么在當(dāng)前分辨率下橫向排列6個(gè)視屏縮略圖，可以基本保證用戶(hù)的瀏覽體驗(yàn)。
[0048]對(duì)于步驟203而言，一旦確定了頁(yè)面中視頻縮略圖的顯示列數(shù)為基準(zhǔn)列數(shù)，那么在分辨率改變時(shí)(分辨率增加，大于1024像素)，通過(guò)調(diào)整視頻縮略圖和視頻分類(lèi)標(biāo)簽的尺寸，保證頁(yè)面中仍橫向排列設(shè)置6個(gè)不同的視頻縮略圖，即視頻縮略圖的基準(zhǔn)顯示列數(shù)不變。
[0049]另外，在步驟203中，讀取所述柵格橫向方向的總像素值，并結(jié)合預(yù)置的視頻縮略圖的基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系，調(diào)整所述視頻縮略圖和視頻分類(lèi)標(biāo)簽的尺寸，具體為:讀取所述柵格橫向方向的總像素值，保持所述視頻縮略圖的基準(zhǔn)顯示列數(shù)不變，獲取該總像素值下所述視頻縮略圖的橫向長(zhǎng)度像素尺寸，并根據(jù)所述視頻縮略圖固定的長(zhǎng)寬像素比例，調(diào)整所述視頻縮略圖的尺寸，以及根據(jù)所述視頻分類(lèi)標(biāo)簽與所述視頻縮略圖的尺寸對(duì)應(yīng)關(guān)系，調(diào)整所述視頻分類(lèi)標(biāo)簽的尺寸。
[0050]在分辨率改變的情況下(尤其在分辨率增加，大于1024像素時(shí))，調(diào)整后的視頻分類(lèi)標(biāo)簽和視頻縮略圖與調(diào)整前的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖的物理顯示尺寸基本保持一致。其中的物理顯示尺寸，是指視頻分類(lèi)標(biāo)簽或視頻縮略圖，在同一屏幕下(不同分辨率)顯示的尺寸大小，即對(duì)用戶(hù)而言，幾乎看不出視頻分類(lèi)標(biāo)簽或視頻縮略圖的尺寸的改變。幾乎看不出，因?yàn)閷?shí)際情況是不能達(dá)到完美的物理尺寸的一直，只能近似
步驟204，在由單元格A所構(gòu)成的柵格上將調(diào)整后的所述視頻分類(lèi)標(biāo)簽置于最左側(cè)，將對(duì)應(yīng)該視頻標(biāo)簽的調(diào)整后的所述視頻縮略圖按照從左至右的方式依次橫向排列于所述視頻標(biāo)簽右側(cè)，構(gòu)成多個(gè)橫向平行設(shè)置的火車(chē)流形式的視頻分類(lèi)行進(jìn)行顯示。
[0051]在本實(shí)施例中，位于最左側(cè)的視頻分類(lèi)標(biāo)簽也可以采用懸浮式的顯示方式，即當(dāng)某一視頻分類(lèi)標(biāo)簽對(duì)應(yīng)的視頻縮略圖過(guò)多時(shí)(如:視頻縮略圖排列了多行)，用戶(hù)在頁(yè)面中進(jìn)行滾動(dòng)操作，該視頻分類(lèi)標(biāo)簽保持懸浮(相對(duì)于頁(yè)面的位置不變)，其對(duì)應(yīng)的視頻縮略圖跟隨頁(yè)面進(jìn)行滾動(dòng)，這樣，用戶(hù)便可以充分瀏覽在該視頻分類(lèi)標(biāo)簽中的內(nèi)容，同時(shí)，懸浮式的視頻分類(lèi)標(biāo)簽也保證了用戶(hù)的瀏覽位置不丟失。用戶(hù)繼續(xù)滾動(dòng)頁(yè)面使該視頻分類(lèi)標(biāo)簽中的視頻縮略圖滾動(dòng)至瀏覽窗口外時(shí)，該視頻分類(lèi)標(biāo)簽也跟隨滾動(dòng)至瀏覽窗口外，以便用戶(hù)繼續(xù)瀏覽頁(yè)面中的其余內(nèi)容。
[0052]當(dāng)一個(gè)分類(lèi)標(biāo)簽的視頻內(nèi)容過(guò)多時(shí)，用戶(hù)在滾動(dòng)頁(yè)面是視頻內(nèi)容移動(dòng)，分類(lèi)標(biāo)簽可懸浮，這樣用戶(hù)位置不會(huì)丟失，當(dāng)視頻內(nèi)容滾動(dòng)出瀏覽器外分類(lèi)標(biāo)簽也滾動(dòng)出瀏覽器外。
[0053]實(shí)施例三
下面結(jié)合圖4-8，對(duì)所述自適應(yīng)調(diào)整的界面流式布局顯示的方法的具體應(yīng)用進(jìn)行詳細(xì)說(shuō)明:
步驟一，當(dāng)用戶(hù)通過(guò)瀏覽器對(duì)頁(yè)面進(jìn)行顯示時(shí)，檢測(cè)運(yùn)行該瀏覽器的終端系統(tǒng)的分辨率值在橫向方向的像素值為1024px,同時(shí)檢測(cè)當(dāng)前瀏覽器窗口在最大化尺寸時(shí)橫向方向的像素值為1003px。
[0054]步驟二，如圖4所示，根據(jù)1024px的分辨率值和當(dāng)前瀏覽器窗口在最大化尺寸時(shí)的像素值1003px，將預(yù)先設(shè)定的像素寬度為55px的單元格A作為基準(zhǔn)尺寸構(gòu)建成豎向排列且布滿(mǎn)所述頁(yè)面的柵格。
[0055]其中，在頁(yè)面中構(gòu)成的柵格在橫向方向上的總像素值為990px，實(shí)際可視區(qū)域S3的寬度為970px，當(dāng)然，圖4中的柵格并不會(huì)直接顯示與頁(yè)面中，即用戶(hù)不可見(jiàn)。在圖4中，區(qū)域SI的寬度像素值為640px的陰影部分為視頻縮略圖和視頻分類(lèi)標(biāo)簽的顯示區(qū)域，區(qū)域S2的寬度像素值為310px的陰影部分為相關(guān)視頻(可以包括:以縮略圖或文字形式的推薦視頻、熱點(diǎn)視頻、排行旁等相關(guān)視頻信息)的顯示區(qū)域。當(dāng)然，上述SI至S3的像素值將根據(jù)不同的屏幕分辨率值而改變，在本申請(qǐng)中不再另作圖示出。
[0056]步驟三，如圖5所示，在當(dāng)前1024分辨率下，劃定柵格中的視頻縮略圖和視頻分類(lèi)標(biāo)簽的基準(zhǔn)顯示列數(shù)，讀取由像素寬度為55px的單元格A所構(gòu)成的柵格在橫向方向上的總像素值，調(diào)整視頻縮略圖和視頻分類(lèi)標(biāo)簽的尺寸。
[0057]圖5中的視頻分類(lèi)標(biāo)簽的長(zhǎng)度與寬度的尺寸比例為1:1，視頻縮略圖的長(zhǎng)度與寬度的尺寸比例為16:9，在橫向方向上，可以排列設(shè)置6個(gè)視頻縮略圖。
[0058]步驟四，在由像素寬度為55px的單元格A所構(gòu)成的柵格上將調(diào)整后的所述視頻分類(lèi)標(biāo)簽置于最左側(cè)，如圖5所示，同時(shí)，將對(duì)應(yīng)該視頻標(biāo)簽的調(diào)整后的所述視頻縮略圖按照從左至右的方式依次橫向排列于所述視頻標(biāo)簽右側(cè)，構(gòu)成多個(gè)橫向平行設(shè)置的火車(chē)流形式的視頻分類(lèi)行進(jìn)行顯示。
[0059]如果，此時(shí)用戶(hù)調(diào)整其屏幕的分辨率或使用不同的終端瀏覽網(wǎng)頁(yè)(但該終端上的分辨率發(fā)生了改變)，假設(shè)分辨率從1024改變至1280，此時(shí)，瀏覽器將重復(fù)執(zhí)行上述步驟:
步驟I，檢測(cè)運(yùn)行該瀏覽器的終端系統(tǒng)的分辨率值在橫向方向的像素值為1280px，同時(shí)檢測(cè)當(dāng)前瀏覽器窗口在最大化尺寸時(shí)橫向方向的像素值為1259px。
[0060]步驟II，根據(jù)1280px的分辨率值和當(dāng)前瀏覽器窗口在最大化尺寸時(shí)的像素值1259px,將預(yù)先設(shè)定的像素寬度為55px的單元格A作為基準(zhǔn)尺寸構(gòu)建成豎向排列且布滿(mǎn)所述頁(yè)面的柵格。
[0061]其中，在頁(yè)面中構(gòu)成的柵格在橫向方向上的總像素值為1210px，實(shí)際可視寬度為1190px,寬度像素值為860px的陰影部分為視頻縮略圖和視頻分類(lèi)標(biāo)簽的顯示區(qū)域，寬度像素值為310px的陰影部分為相關(guān)視頻的顯示區(qū)域。
[0062]步驟三，如圖6所示，在當(dāng)前1280分辨率下，劃定柵格中的視頻縮略圖和視頻分類(lèi)標(biāo)簽的基準(zhǔn)顯示列數(shù)，讀取由像素寬度為55px的單元格A所構(gòu)成的柵格在橫向方向上的總像素值，調(diào)整視頻縮略圖和視頻分類(lèi)標(biāo)簽的尺寸。
[0063]步驟四，在由像素寬度為55px的單元格A所構(gòu)成的柵格上將調(diào)整后的所述視頻分類(lèi)標(biāo)簽置于最左側(cè)，如圖6所示，同時(shí)，將對(duì)應(yīng)該視頻標(biāo)簽的調(diào)整后的所述視頻縮略圖按照從左至右的方式依次橫向排列于所述視頻標(biāo)簽右側(cè)，構(gòu)成多個(gè)橫向平行設(shè)置的火車(chē)流形式的視頻分類(lèi)行進(jìn)行顯示。[0064]圖6中的視頻分類(lèi)標(biāo)簽和視頻縮略圖的長(zhǎng)寬尺寸比例與圖5中一致，但實(shí)際上，視頻分類(lèi)標(biāo)簽和視頻縮略圖的尺寸大小發(fā)生了改變，均變大，以此來(lái)抵消由于分辨率的增加所產(chǎn)生的顯示內(nèi)容縮減效應(yīng)，即保持了物理顯示尺寸基本不變，相對(duì)于用戶(hù)，視頻分類(lèi)標(biāo)簽和視頻縮略圖的尺寸幾乎未發(fā)生變化。
[0065]在本實(shí)施例中，最終的顯示效果如圖7所示，不同類(lèi)別的視頻縮略圖跟隨在相應(yīng)的視頻分類(lèi)標(biāo)簽之后，形成火車(chē)流式的排列布局，每一行火車(chē)流排列的右側(cè)顯示相關(guān)的推薦視頻或排行，增加了視頻的歸類(lèi)性，增加了用戶(hù)的瀏覽體驗(yàn)，如上述實(shí)施例二中的記載，作為一種實(shí)現(xiàn)方式，位于最左側(cè)的視頻分類(lèi)標(biāo)簽也可以采用懸浮式的顯示方式，即當(dāng)某一視頻分類(lèi)標(biāo)簽對(duì)應(yīng)的視頻縮略圖過(guò)多時(shí)(如:視頻縮略圖排列了多行)，用戶(hù)在頁(yè)面中進(jìn)行滾動(dòng)操作，該視頻分類(lèi)標(biāo)簽保持懸浮(相對(duì)于頁(yè)面的位置不變)，其對(duì)應(yīng)的視頻縮略圖跟隨頁(yè)面進(jìn)行滾動(dòng)，這樣，用戶(hù)便可以充分瀏覽在該視頻分類(lèi)標(biāo)簽中的內(nèi)容，同時(shí)，懸浮式的視頻分類(lèi)標(biāo)簽也保證了用戶(hù)的瀏覽位置不丟失。用戶(hù)繼續(xù)滾動(dòng)頁(yè)面使該視頻分類(lèi)標(biāo)簽中的視頻縮略圖滾動(dòng)至瀏覽窗口外時(shí)，該視頻分類(lèi)標(biāo)簽也跟隨滾動(dòng)至瀏覽窗口外，以便用戶(hù)繼續(xù)瀏覽頁(yè)面中的其余內(nèi)容，增加了用戶(hù)的瀏覽體驗(yàn)。
[0066]實(shí)施例四
如圖8所示，為本申請(qǐng)實(shí)施例四所述的一種自適應(yīng)調(diào)整的界面流式布局顯示的系統(tǒng)，與瀏覽器相耦接，該系統(tǒng)包括:檢測(cè)單元801、柵格單元802、調(diào)整單元803以及布局單元804，其中，
所述檢測(cè)單元801，用于檢測(cè)運(yùn)行該瀏覽器的終端系統(tǒng)的分辨率值。
[0067]所述柵格單元802，用于根據(jù)所述分辨率值，將在所述頁(yè)面中預(yù)先設(shè)定像素值的單元格構(gòu)建成豎向排列且布滿(mǎn)所述頁(yè)面的柵格。
[0068]需要說(shuō)明的是，本實(shí)施例中的單元格的像素寬度可以使頁(yè)面的效果達(dá)到最佳，當(dāng)然，柵格并不直接顯示于頁(yè)面中，而是作為后續(xù)顯示內(nèi)容調(diào)整的基準(zhǔn)參照。
[0069]所述調(diào)整單元803，用于讀取所述柵格橫向方向的總像素值，并結(jié)合預(yù)置的視頻縮略圖的基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系，調(diào)整所述視頻縮略圖和視頻分類(lèi)標(biāo)簽的尺寸。
[0070]所述布局單元804，用于在所述柵格上將調(diào)整后的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖以橫向排列方式構(gòu)成多個(gè)橫向平行設(shè)置的視頻分類(lèi)行進(jìn)行顯示。
[0071]本實(shí)施例中，柵格由單兀格構(gòu)成，由于柵格在豎直方向延伸，所以對(duì)柵格在豎直方向上的像素值不需作出限定，其在豎直方向上延伸的長(zhǎng)度取決于實(shí)際應(yīng)用中頁(yè)面內(nèi)容的多少，與分辨率值不相關(guān)，那么對(duì)于柵格單兀802,與分辨率值相關(guān)的是橫向方向(水平方向)的像素值，所以預(yù)先設(shè)定的單元格的像素值就是該單元格在水平方向的像素值。如圖3所示，單元格A (在本實(shí)施例中，也可稱(chēng)為柵格單元格)由像素寬度為35px (像素)的a部分和像素寬度為IOpx的i部分構(gòu)成，i部分位于a部分兩側(cè)，單元格A的像素寬度為55px，在圖3中，在不同的分辨率下，由該單元格A可以排列構(gòu)成具有不同像素寬度的柵格。例如，在圖3中，在水平方向?yàn)?366px以下的分辨率值下，柵格的像素寬度為990px ;在水平方向?yàn)?366px以上的分辨率值下，柵格的像素寬度為990px。
[0072]對(duì)于調(diào)整單元803而言，預(yù)置的視頻縮略圖的基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系，具體為:在不同的屏幕尺寸數(shù)值下以長(zhǎng)度為1024像素的分辨率值為基準(zhǔn)值，劃定所述頁(yè)面中所述視頻縮略圖的基準(zhǔn)顯示列數(shù)，并以該基準(zhǔn)顯示列數(shù)為定值獲取不同分辨率值下所述視頻縮略圖的尺寸比例，建立所述視頻縮略圖的該基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系。
[0073]在分辨率改變的情況下(尤其在分辨率增加，大于1024像素時(shí))，調(diào)整后的視頻分類(lèi)標(biāo)簽和視頻縮略圖與調(diào)整前的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖的物理顯示尺寸基本一致。其中的物理顯示尺寸，是指視頻分類(lèi)標(biāo)簽或視頻縮略圖，在同一屏幕下(不同分辨率)顯示的尺寸大小，即對(duì)用戶(hù)而言，幾乎看不出視頻分類(lèi)標(biāo)簽或視頻縮略圖的尺寸的改變。
[0074]調(diào)整單元803，具體用于:讀取所述柵格橫向方向的總像素值，保持所述視頻縮略圖的基準(zhǔn)顯示列數(shù)不變，獲取該總像素值下所述視頻縮略圖的橫向長(zhǎng)度像素尺寸，并根據(jù)所述視頻縮略圖固定的長(zhǎng)寬像素比例，調(diào)整所述視頻縮略圖的尺寸，以及根據(jù)所述視頻分類(lèi)標(biāo)簽與所述視頻縮略圖的尺寸對(duì)應(yīng)關(guān)系，調(diào)整所述視頻分類(lèi)標(biāo)簽的尺寸。
[0075]其中，視頻分類(lèi)標(biāo)簽代表了視頻內(nèi)容的所劃分的類(lèi)型，將不同類(lèi)型的視頻匯聚在一起，可以增強(qiáng)用戶(hù)的體驗(yàn)感，在本實(shí)施例中，視頻分類(lèi)標(biāo)簽可以是圖片、圖標(biāo)等形式的圖形或文字標(biāo)簽。視頻分類(lèi)標(biāo)簽的尺寸通常設(shè)置為小于視頻縮略圖的尺寸，作為一種方式，視頻分類(lèi)標(biāo)簽的長(zhǎng)度與寬度的尺寸比例為1:1，視頻縮略圖的長(zhǎng)度與寬度的尺寸比例為16:9。當(dāng)然上述視頻分類(lèi)標(biāo)簽和視頻縮略圖的長(zhǎng)寬比例可以根據(jù)實(shí)際應(yīng)用的需要進(jìn)行調(diào)整，并不構(gòu)成對(duì)本申請(qǐng)的限定。
[0076]所述布局單元804，具體用于:在所述柵格上將調(diào)整后的所述視頻分類(lèi)標(biāo)簽置于最左側(cè)，將對(duì)應(yīng)該視頻標(biāo)簽的調(diào)整后的所述視頻縮略圖按照從左至右的方式依次橫向排列于所述視頻標(biāo)簽右側(cè)，構(gòu)成多個(gè)橫向平行設(shè)置的火車(chē)流形式的視頻分類(lèi)行進(jìn)行顯示。
[0077]通過(guò)本實(shí)施例中的上述系統(tǒng)，在用戶(hù)啟動(dòng)瀏覽器訪問(wèn)相應(yīng)的網(wǎng)站頁(yè)面時(shí)(在頁(yè)面顯示前)，可以根據(jù)當(dāng)前用戶(hù)所使用的終端系統(tǒng)的分辨率值，對(duì)頁(yè)面中的顯示內(nèi)容進(jìn)行調(diào)整，使頁(yè)面中的顯示內(nèi)容適應(yīng)于不同的分辨率值，而且，所顯示的內(nèi)容(如:視頻縮略圖)按照不同類(lèi)型橫向排列，增加了顯示內(nèi)容的歸屬性，也增強(qiáng)用戶(hù)的瀏覽體驗(yàn)，即在高分辨率的情況下，頁(yè)面中所顯示的內(nèi)容也不會(huì)出現(xiàn)過(guò)于縮小而影響瀏覽效果的情況。
[0078]由于方法部分已經(jīng)對(duì)本申請(qǐng)實(shí)施例進(jìn)行了詳細(xì)描述，這里對(duì)實(shí)施例中涉及的系統(tǒng)與方法對(duì)應(yīng)部分的展開(kāi)描述省略，不再贅述。對(duì)于系統(tǒng)中具體內(nèi)容的描述可參考方法實(shí)施例的內(nèi)容，這里不再具體限定。
[0079]與現(xiàn)有技術(shù)相比，本申請(qǐng)所述的一種自適應(yīng)調(diào)整的界面流式布局顯示的方法和系統(tǒng)，達(dá)到了如下效果:
I)本申請(qǐng)通過(guò)根據(jù)在頁(yè)面顯示前所檢測(cè)到的屏幕的分辨率，將在頁(yè)面中預(yù)置的單元格構(gòu)成符合當(dāng)前分辨率的不同尺寸的視頻分類(lèi)標(biāo)簽及視頻縮略圖，并進(jìn)行火車(chē)流式的排列顯示，即使在分辨率發(fā)生變化時(shí)，構(gòu)成的視頻分類(lèi)標(biāo)簽及視頻縮略圖也可以根據(jù)變化后的分辨率進(jìn)行尺寸大小的調(diào)整，當(dāng)用戶(hù)瀏覽觀看時(shí)，視頻分類(lèi)標(biāo)簽及視頻縮略圖不會(huì)因?yàn)榉直媛实脑黾訉?dǎo)致尺寸大小的縮減，有效解決了頁(yè)面中視頻縮略的布局散亂且視頻縮略圖尺寸在較高分辨率下產(chǎn)生縮減的問(wèn)題。
[0080]2)本申請(qǐng)中的單元格的寬度像素值可以增強(qiáng)頁(yè)面的顯示效果，由該單元格構(gòu)成的柵格上可以良好的劃分成不同的顯示區(qū)域，在柵格上設(shè)置的顯示內(nèi)容(包括:視頻分類(lèi)標(biāo)簽及視頻縮略圖)的尺寸大小可以達(dá)到最佳的瀏覽舒適度。[0081]3)本申請(qǐng)所顯示的內(nèi)容(包括:視頻分類(lèi)標(biāo)簽及視頻縮略圖)按照不同類(lèi)型橫向排列，增加了顯示內(nèi)容的歸屬性，也增強(qiáng)用戶(hù)的瀏覽體驗(yàn)。
[0082]還需要說(shuō)明的是，術(shù)語(yǔ)“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過(guò)程、方法、商品或者系統(tǒng)不僅包括那些要素，而且還包括沒(méi)有明確列出的其他要素，或者是還包括為這種過(guò)程、方法、商品或者系統(tǒng)所固有的要素。在沒(méi)有更多限制的情況下，由語(yǔ)句“包括一個(gè)……”限定的要素，并不排除在包括所述要素的過(guò)程、方法、商品或者系統(tǒng)中還存在另外的相同要素。
[0083]本領(lǐng)域技術(shù)人員應(yīng)明白，本申請(qǐng)的實(shí)施例可提供為方法、系統(tǒng)或計(jì)算機(jī)程序產(chǎn)品。因此，本申請(qǐng)可采用完全硬件實(shí)施例、完全軟件實(shí)施例或結(jié)合軟件和硬件方面的實(shí)施例的形式。而且，本申請(qǐng)可采用在一個(gè)或多個(gè)其中包含有計(jì)算機(jī)可用程序代碼的計(jì)算機(jī)可用存儲(chǔ)介質(zhì)(包括但不限于磁盤(pán)存儲(chǔ)器、CD-ROM、光學(xué)存儲(chǔ)器等)上實(shí)施的計(jì)算機(jī)程序產(chǎn)品的形式。
[0084]以上所述僅為本申請(qǐng)的實(shí)施例而已，并不用于限制本申請(qǐng)。對(duì)于本領(lǐng)域技術(shù)人員來(lái)說(shuō)，本申請(qǐng)可 以有各種更改和變化。凡在本申請(qǐng)的精神和原理之內(nèi)所作的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本申請(qǐng)的權(quán)利要求范圍之內(nèi)。
【權(quán)利要求】
1.一種自適應(yīng)調(diào)整的界面流式布局顯示的方法，其特征在于，包括:檢測(cè)運(yùn)行該瀏覽器的終端系統(tǒng)的分辨率值；根據(jù)所述分辨率值，將在所述頁(yè)面中預(yù)先設(shè)定像素值的單元格構(gòu)建成豎向排列且布滿(mǎn)所述頁(yè)面的柵格；讀取所述柵格橫向方向的總像素值，并結(jié)合預(yù)置的視頻縮略圖的基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系，調(diào)整所述視頻縮略圖和視頻分類(lèi)標(biāo)簽的尺寸；在所述柵格上將調(diào)整后的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖以橫向排列方式構(gòu)成多個(gè)橫向平行設(shè)置的視頻分類(lèi)行進(jìn)行顯示。
2.如權(quán)利要求1所述的自適應(yīng)調(diào)整的界面流式布局顯示的方法，其特征在于，預(yù)置的視頻縮略圖的基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系，進(jìn)一步為:在不同的屏幕尺寸數(shù)值下以長(zhǎng)度為1024像素的分辨率值為基準(zhǔn)值，劃定所述頁(yè)面中所述視頻縮略圖的基準(zhǔn)顯示列數(shù)，并以該基準(zhǔn)顯示列數(shù)為定值獲取不同分辨率值下所述視頻縮略圖的尺寸比例，建立所述視頻縮略圖的該基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系O
3.如權(quán)利要求2所述的自適應(yīng)調(diào)整的界面流式布局顯示的方法，其特征在于，讀取所述柵格橫向方向的總像素值，并結(jié)合預(yù)置的視頻縮略圖的基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的 對(duì)應(yīng)關(guān)系，調(diào)整所述視頻縮略圖和視頻分類(lèi)標(biāo)簽的尺寸，進(jìn)一步為:讀取所述柵格橫向方向的總像素值，保持所述視頻縮略圖的基準(zhǔn)顯示列數(shù)不變，獲取該總像素值下所述視頻縮略圖的橫向長(zhǎng)度像素尺寸，并根據(jù)所述視頻縮略圖固定的長(zhǎng)寬像素比例，調(diào)整所述視頻縮略圖的尺寸，以及根據(jù)所述視頻分類(lèi)標(biāo)簽與所述視頻縮略圖的尺寸對(duì)應(yīng)關(guān)系，調(diào)整所述視頻分類(lèi)標(biāo)簽的尺寸。
4.如權(quán)利要求3中所述的自適應(yīng)調(diào)整的界面流式布局顯示的方法，其特征在于，調(diào)整后的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖的實(shí)際尺寸大于調(diào)整前的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖的實(shí)際尺寸。
5.如權(quán)利要求1所述的自適應(yīng)調(diào)整的界面流式布局顯示的方法，其特征在于，在所述柵格上將調(diào)整后的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖以橫向排列方式構(gòu)成多個(gè)橫向平行設(shè)置的視頻分類(lèi)行進(jìn)行顯示，進(jìn)一步為:在所述柵格上將調(diào)整后的所述視頻分類(lèi)標(biāo)簽置于最左側(cè)，將對(duì)應(yīng)該視頻標(biāo)簽的調(diào)整后的所述視頻縮略圖按照從左至右的方式依次橫向排列于所述視頻標(biāo)簽右側(cè)，構(gòu)成多個(gè)橫向平行設(shè)置的火車(chē)流形式的視頻分類(lèi)行進(jìn)行顯示。
6.一種自適應(yīng)調(diào)整的界面流式布局顯示的系統(tǒng)，與瀏覽器相耦接，其特征在于，該系統(tǒng)包括:檢測(cè)單元、柵格單元、調(diào)整單元以及布局單元，其中，所述檢測(cè)單元，用于檢測(cè)運(yùn)行該瀏覽器的終端系統(tǒng)的分辨率值；所述柵格單元，用于根據(jù)所述分辨率值，將在所述頁(yè)面中預(yù)先設(shè)定像素值的單元格構(gòu)建成豎向排列且布滿(mǎn)所述頁(yè)面的柵格；所述調(diào)整單元，用于讀取所述柵格橫向方向的總像素值，并結(jié)合預(yù)置的視頻縮略圖的基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系，調(diào)整所述視頻縮略圖和視頻分類(lèi)標(biāo)簽的尺寸；所述布局單元，用于在所述柵格上將調(diào)整后的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖以橫向排列方式構(gòu)成多個(gè)橫向平行設(shè)置的視頻分類(lèi)行進(jìn)行顯示。
7.如權(quán)利要求6所述的自適應(yīng)調(diào)整的界面流式布局顯示的系統(tǒng)，其特征在于，預(yù)置的視頻縮略圖的基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系，進(jìn)一步為:在不同的屏幕尺寸數(shù)值下以長(zhǎng)度為1024像素的分辨率值為基準(zhǔn)值，劃定所述頁(yè)面中所述視頻縮略圖的基準(zhǔn)顯示列數(shù)，并以該基準(zhǔn)顯示列數(shù)為定值獲取不同分辨率值下所述視頻縮略圖的尺寸比例，建立所述視頻縮略圖的該基準(zhǔn)顯示列數(shù)與所述柵格橫向方向總像素值的對(duì)應(yīng)關(guān)系O
8.如權(quán)利要求7所述的自適應(yīng)調(diào)整的界面流式布局顯示的系統(tǒng)，其特征在于，所述調(diào)整單元，進(jìn)一步用于:讀取所述柵格橫向方向的總像素值，保持所述視頻縮略圖的基準(zhǔn)顯示列數(shù)不變，獲取該總像素值下所述視頻縮略圖的橫向長(zhǎng)度像素尺寸，并根據(jù)所述視頻縮略圖固定的長(zhǎng)寬像素比例，調(diào)整所述視頻縮略圖的尺寸，以及根據(jù)所述視頻分類(lèi)標(biāo)簽與所述視頻縮略圖的尺寸對(duì)應(yīng)關(guān)系，調(diào)整所述視頻分類(lèi)標(biāo)簽的像素尺寸尺寸。
9.如權(quán)利要求8中所述的自適應(yīng)調(diào)整的界面流式布局顯示的系統(tǒng)，其特征在于，調(diào)整后的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖的實(shí)際尺寸大于調(diào)整前的所述視頻分類(lèi)標(biāo)簽和視頻縮略圖的實(shí)際尺寸。
10.如權(quán)利要求9所述的自適應(yīng)調(diào)整的界面流式布局顯示的系統(tǒng)，其特征在于，所述布局單元，進(jìn)一步用于:在所述柵格上將調(diào)整后的所述視頻分類(lèi)標(biāo)簽置于最左側(cè)，將對(duì)應(yīng)該視頻標(biāo)簽的調(diào)整后的所述視頻縮略圖按照從左至右的方式依次橫向排列于所述視頻標(biāo)簽右偵牝構(gòu)成多個(gè)橫向平 行設(shè)置的火車(chē)流形式的視頻分類(lèi)行進(jìn)行顯示。
【文檔編號(hào)】G06F3/0481GK103970894SQ201410224496
【公開(kāi)日】2014年8月6日 申請(qǐng)日期:2014年5月27日 優(yōu)先權(quán)日:2014年5月27日
【發(fā)明者】甘露, 華文偉, 張奧博, 李外, 晏芳, 姚鍵, 潘柏宇, 盧述奇 申請(qǐng)人:合一網(wǎng)絡(luò)技術(shù)(北京)有限公司