專利名稱：一種控件排列顯示方法、系統(tǒng)及客戶端的制作方法
技術(shù)領(lǐng)域：
本發(fā)明屬于網(wǎng)絡(luò)技術(shù)，尤其涉及一種控件排列顯示方法、系統(tǒng)及客戶端。
背景技術(shù)：
網(wǎng)絡(luò)的發(fā)展和普及，使網(wǎng)絡(luò)交流更為方便、快捷，很多用戶開始在網(wǎng)絡(luò)上建立個(gè)人門戶網(wǎng)站，通過個(gè)人門戶網(wǎng)站發(fā)布信息與朋友交流。為能在個(gè)人門戶網(wǎng)站上更好地展現(xiàn)自己的個(gè)性，用戶往往需要對(duì)網(wǎng)頁顯示的視頻進(jìn)行布局。目前，往往是以隨機(jī)方式對(duì)視頻進(jìn)行排列或者對(duì)視頻編號(hào)后進(jìn)行依次排列。然而， 當(dāng)用戶對(duì)視頻顯示面積提出要求時(shí)，上述方式均無法確保用戶要求達(dá)到較佳的顯示效果， 從而會(huì)影響用戶體驗(yàn)和觀感。

發(fā)明內(nèi)容
本發(fā)明提供一種控件排列顯示方法、系統(tǒng)及客戶端以解決上述問題。本發(fā)明提供一種控件排列顯示方法，上述方法包括以下步驟?？蛻舳藦姆?wù)器獲得控件數(shù)量參數(shù)?？蛻舳送ㄟ^加載的flash插件依據(jù)控件數(shù)量參數(shù)得到N個(gè)控件?？蛻舳朔謩e結(jié)合(HXL)/N與(WXS)/(L+1)、(HXL)/(NXS)與W/L的比較結(jié)果，獲得顯示規(guī)則，并按照顯示規(guī)則將N個(gè)控件顯示于客戶端的預(yù)設(shè)顯示區(qū)域。其中，H為預(yù)設(shè)顯示區(qū)域的高度， W為預(yù)設(shè)顯示區(qū)域的寬度，S為控件高寬比，L為顯示列數(shù)，且L彡1。本發(fā)明還提供一種控件排列顯示系統(tǒng)，包括服務(wù)器及客戶端?？蛻舳擞糜趶姆?wù)器獲得控件數(shù)量參數(shù)，客戶端通過加載的flash插件依據(jù)控件數(shù)量參數(shù)得到N個(gè)控件。客戶端分別結(jié)合(HXL)/N與(WXS)/(L+1)、(HX L)/(NX S)與W/L的比較結(jié)果，獲得顯示規(guī)則，并按照顯示規(guī)則將N個(gè)控件顯示于客戶端的預(yù)設(shè)顯示區(qū)域。其中，H為預(yù)設(shè)顯示區(qū)域的高度，W為預(yù)設(shè)顯示區(qū)域的寬度，S為控件高寬比，L為顯示列數(shù)，且L ^ 1。本發(fā)明還提供一種客戶端，包括獲得模塊、運(yùn)算比較模塊以及顯示模塊。獲得模塊通過加載的flash插件依據(jù)從服務(wù)器獲得的控件數(shù)量參數(shù)得到N個(gè)控件。運(yùn)算比較模塊連接獲得模塊，運(yùn)算比較(HXL)/N與(WXS)/(L+1)、(HXL)/(NXS)與W/L，獲得顯示規(guī)則。 其中，H為預(yù)設(shè)顯示區(qū)域的高度，W為預(yù)設(shè)顯示區(qū)域的寬度，S為控件高寬比，L為顯示列數(shù)， 且1。顯示模塊連接運(yùn)算比較模塊，顯示模塊按照獲得的顯示規(guī)則將N個(gè)控件顯示于預(yù)設(shè)顯示區(qū)域。相較于先前技術(shù)，根據(jù)本發(fā)明提供的控件排列顯示方法、系統(tǒng)及客戶端，客戶端通過比較(HXL)/N與(WXS)/(L+1)、(HXL)/(NXS)與W/L，從而確定N個(gè)控件的排列方式以及每個(gè)控件的高度與寬度，以使單個(gè)控件的顯示面積最大。如此，提高用戶的體驗(yàn)和觀感。


此處所說明的附圖用來提供對(duì)本發(fā)明的進(jìn)一步理解，構(gòu)成本申請(qǐng)的一部分，本發(fā)明的示意性實(shí)施例及其說明用于解釋本發(fā)明，并不構(gòu)成對(duì)本發(fā)明的不當(dāng)限定。在附圖中
圖1所示為根據(jù)本發(fā)明的較佳實(shí)施例提供的控件排列顯示方法的流程圖；圖2所示為根據(jù)本發(fā)明的較佳實(shí)施例提供的控件排列顯示系統(tǒng)的示意圖；圖3所示為根據(jù)本發(fā)明的較佳實(shí)施例提供的客戶端的示意圖。
具體實(shí)施例方式下文中將參考附圖并結(jié)合實(shí)施例來詳細(xì)說明本發(fā)明。需要說明的是，在不沖突的情況下，本申請(qǐng)中的實(shí)施例及實(shí)施例中的特征可以相互組合。圖1所示為根據(jù)本發(fā)明的較佳實(shí)施例提供的控件排列顯示方法的流程圖。如圖1 所示，本發(fā)明較佳實(shí)施例提供的控件排列顯示方法包括步驟101 103。于步驟101，客戶端從服務(wù)器獲得控件數(shù)量參數(shù)。具體而言，用戶于客戶端通過配置文件給服務(wù)器傳輸控件數(shù)量參數(shù)，服務(wù)器將接收到的控件數(shù)量參數(shù)傳輸至客戶端加載的flash插件。其中，控件數(shù)量參數(shù)表示待顯示的控件數(shù)目N。例如，控件數(shù)量參數(shù)為5表示客戶端需要排列顯示5個(gè)控件。于步驟102，客戶端通過加載的flash插件依據(jù)控件數(shù)量參數(shù)得到N個(gè)控件。具體而言，flash插件本身自帶視頻控件VIDEO，客戶端加載flash插件后每調(diào)用一次VIDEO即可獲得一個(gè)視頻控件。flash插件按照控件數(shù)量參數(shù)循環(huán)調(diào)用N次可得到N個(gè)控件。于步驟103，客戶端分別結(jié)合(HXL)/N 與(WXS)/(L+1)、(HX L)/(NX S)與 W/L 的比較結(jié)果，獲得顯示規(guī)則，并按照顯示規(guī)則將N個(gè)控件顯示于客戶端的預(yù)設(shè)顯示區(qū)域。其中，H為預(yù)設(shè)顯示區(qū)域的高度，W為預(yù)設(shè)顯示區(qū)域的寬度，S為控件高寬比，L為顯示列數(shù)，且 L彡1。其中，S根據(jù)上述控件的高寬比確定。較佳地，控件高寬比S小于1，例如為3/4或 9/16。然而，本發(fā)明并不限定于此。以下詳細(xì)說明顯示規(guī)則。若(HXL)/N彡(WXS)/(L+1)且(HXL)/(NXS) ^ ff/L, 則顯示規(guī)則為每個(gè)控件的高度設(shè)置為(HXL)/N，寬度設(shè)置為(HX L)/(NX S)，N個(gè)控件排列成L列。若(HXL)/N彡(WXS)/(L+1)且(HXL)/(NX S) >W/L，則顯示規(guī)則為每個(gè)控件的寬度設(shè)置為W/L，高度設(shè)置為(WX S) /L, N個(gè)控件排列成L列。于本實(shí)施例中，若(HXL)/N< (WXS)/(L+1)，則L遞增加1后客戶端繼續(xù)比較 (HXL)/N 與(WXS)/(L+1)，直至(HXL)/N 彡(WX S) / (L+1)。接著，若(HXL)/(NX S) ^ff/ L，則顯示規(guī)則為每個(gè)控件的高度設(shè)置為(HXL)/N，寬度設(shè)置為(HX L)/(NX S)，N個(gè)控件排列成L列。若(HXL)/(NX S) >W/L，則顯示規(guī)則為每個(gè)控件的寬度設(shè)置為W/L，高度設(shè)置為(WXS)/L，N個(gè)控件排列成L列。以客戶端于預(yù)設(shè)顯示區(qū)域(高度H= 380，寬度W= 160)排列顯示5個(gè)控件(即， N = 5)，S = 3/4 為例。當(dāng) L = 1 時(shí)，(HXL)/N = 76，(WXS)/(L+1) = 60，即(HXL)/N > (WXS)/(L+1) ο 此外，(HXL)/(NXS) = 304/4，W/L = 160，即(HXL)/(NXS) < W/L。如此，5個(gè)控件的顯示規(guī)則為每個(gè)控件的高度設(shè)置為(HXL)/N = 76，寬度設(shè)置為(HXL)/ (NXS) = 304/3，5個(gè)控件排列成1列。另外，以客戶端于預(yù)設(shè)顯示區(qū)域(高度H = 380，寬度W = 160)排列顯示8個(gè)控件(即，N = 8)，S = 3/4 為例。當(dāng) L = 1 時(shí)，(HXL)/N = 47. 5，(WXS)/(L+1) = 60，即 (HXL)/N< (WXS)/(L+1)。接著，L遞增加1(即L = 2)后，客戶端繼續(xù)比較(HXL)/N與 (WXS)/(L+1) ο 此時(shí)，(HXL)/N = 95，(WXS)/(L+l) = 40，即(HXL) /N > (WXS)/(L+1)。此夕卜，(HXL)/(NX S) = 380/3,ff/L = 80, BP (HXL)/(NX S) > W/L。如此，8 個(gè)控件的顯示規(guī)則為每個(gè)控件的高度設(shè)置為(HXL)/N = 60，寬度設(shè)置為(HXL)/(NXS) =80，8個(gè)控件排列成2列。圖2所示為根據(jù)本發(fā)明的較佳實(shí)施例提供的控件排列顯示系統(tǒng)的示意圖。圖3所示為根據(jù)本發(fā)明的較佳實(shí)施例提供的客戶端的示意圖。如圖2與圖3所示，控件排列顯示系統(tǒng)包括服務(wù)器20及客戶端30。其中，客戶端30用于從服務(wù)器20獲得控件數(shù)量參數(shù)，客戶端30通過加載的flash插件依據(jù)控件數(shù)量參數(shù)得到N個(gè)控件。關(guān)于上述具體過程同前所述，故于此不再贅述。此外，客戶端20 分別結(jié)合(HXL)/N 與(WXS)/(L+1)、(HXL)/(NXS)與 W/L 的比較結(jié)果，獲得顯示規(guī)則，并按照顯示規(guī)則將N個(gè)控件顯示于客戶端的預(yù)設(shè)顯示區(qū)域中。其中，H為預(yù)設(shè)顯示區(qū)域的高度，W為預(yù)設(shè)顯示區(qū)域的寬度，S為控件高寬比，L為顯示列數(shù)，且 L>1。具體而言，若(HXL)/N彡(WXS)/(L+1)且(HXL)/(NXS)彡 W/L，則顯示規(guī)則為每個(gè)控件的高度設(shè)置為(HXL)/N，寬度設(shè)置為(HX L)/(NX S)，N個(gè)控件排列成L列；若 (HXL)/N彡(WXS)/(L+1)且(HX L)/(NX S) > W/L，則顯示規(guī)則為每個(gè)控件的寬度設(shè)置為W/L，高度設(shè)置為(WX S)/L，N個(gè)控件排列成L列。若(HXL)/N< (WX S) / (L+1)，則L遞增加1后客戶端繼續(xù)比較(HXL)/N與(WXS)/(L+1)，直至(HXL)/N彡(WXS)/(L+1)。接著，若(HX L)/(NX S)彡W/L，則顯示規(guī)則為每個(gè)控件的高度設(shè)置為(HXL)/N，寬度設(shè)置為 (HX L)/(NX S)，N個(gè)控件排列成L列；若(HX L)/(NX S) > W/L，則顯示規(guī)則為每個(gè)控件的寬度設(shè)置為W/L，高度設(shè)置為(WX S) /L, N個(gè)控件排列成L列。于本實(shí)施例中，客戶端30包括獲得模塊300、運(yùn)算比較模塊301以及顯示模塊 302。其中，獲得模塊300通過加載的flash插件依據(jù)從服務(wù)器20獲得的控件數(shù)量參數(shù)得到 N個(gè)控件。運(yùn)算比較模塊301連接獲得模塊300，從獲得模塊300獲取控件數(shù)量參數(shù)并運(yùn)算比較(HXL)/N與(WXS)/(L+1)、(HXL)/(NXS)與W/L。其中，H為預(yù)設(shè)顯示區(qū)域的高度， W為預(yù)設(shè)顯示區(qū)域的寬度，S為控件高寬比，L為顯示列數(shù)，且L彡1。于本實(shí)施例中，若(HXL)/N彡(WXS)/(L+1)且(HXL)/(NXS)彡 W/L，運(yùn)算比較模塊301獲得的顯示規(guī)則為每個(gè)控件的高度設(shè)置為(HXL)/N，寬度設(shè)置為(HXL)/ (NXS)，N 個(gè)控件排列成 L 列。若(HXL)/N 彡(WXS)/(L+1)且(HXL)/(NXS) >W/L，運(yùn)算比較模塊301獲得的顯示規(guī)則為每個(gè)控件的寬度設(shè)置為W/L，高度設(shè)置為(WXS)/L，N 個(gè)控件排列成L列。于本實(shí)施例中，若(HXL)/N < (WXS)/(L+1)，L遞增加1后，運(yùn)算比較模塊301繼續(xù)比較(HXL)/N與(WXS)/(L+1)，直至(HXL)/N彡(WXS)/(L+1)。接著，運(yùn)算比較模塊 301比較(HXL)/(NX S)與W/L。若(HXL)/(NX S)彡W/L，運(yùn)算比較模塊301獲得的顯示規(guī)則為每個(gè)控件的高度設(shè)置為(HXL)/N，寬度設(shè)置為(HX L)/(NX S)，N個(gè)控件排列成L 列；若(HXL)/(NXS) >W/L，運(yùn)算比較模塊301獲得的設(shè)定顯示規(guī)則為每個(gè)控件的寬度設(shè)置為W/L，高度設(shè)置為(WX S) /L, N個(gè)控件排列成L列。此外，顯示模塊302連接運(yùn)算比較模塊301，顯示模塊302按照從運(yùn)算比較模塊 301獲得的顯示規(guī)則將N個(gè)控件顯示于預(yù)設(shè)顯示區(qū)域。于實(shí)際應(yīng)用中，預(yù)設(shè)顯示區(qū)域中排列顯示的控件可加載顯示不同的視頻內(nèi)容，如此達(dá)到單個(gè)視頻的顯示面積最大，從而豐富用戶的體驗(yàn)和觀感。綜上所述，根據(jù)本發(fā)明較佳實(shí)施例提供的控件排列顯示方法、系統(tǒng)及客戶端，客戶端通過比較(HXL)/N與(WXS)/(L+1)、(HXL)/(NXS)與W/L，從而確定N個(gè)控件的排列方式以及每個(gè)控件的高度與寬度，以使單個(gè)控件的顯示面積最大。如此，提高用戶的體驗(yàn)和觀感。以上所述僅為本發(fā)明的優(yōu)選實(shí)施例而已，并不用于限制本發(fā)明，對(duì)于本領(lǐng)域的技術(shù)人員來說，本發(fā)明可以有各種更改和變化。凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本發(fā)明的保護(hù)范圍之內(nèi)。
權(quán)利要求
1.一種控件排列顯示方法，其特征在于，包括以下步驟客戶端從服務(wù)器獲得控件數(shù)量參數(shù)；所述客戶端通過加載的flash插件依據(jù)所述控件數(shù)量參數(shù)得到N個(gè)控件；所述客戶端分別結(jié)合(HXL)/N與(WXS)/(L+1)、(HX L)/(NX S)與W/L的比較結(jié)果， 獲得顯示規(guī)則，并按照所述顯示規(guī)則將所述N個(gè)控件顯示于所述客戶端的預(yù)設(shè)顯示區(qū)域， 其中，H為所述預(yù)設(shè)顯示區(qū)域的高度，W為所述預(yù)設(shè)顯示區(qū)域的寬度，S為所述控件高寬比， L為顯示列數(shù)，且L彡1。
2.根據(jù)權(quán)利要求1所述的控件排列顯示方法，其特征在于，若(HXL)/N> (WXS)/ (L+1)且(HXL)/(NXS)彡W/L，則所述顯示規(guī)則為每個(gè)控件的高度設(shè)置為(HXL)/N，寬度設(shè)置為(HX L) / (NX幻，所述N個(gè)控件排列成L列；若(HXL)/N彡(WXS)/(L+1)且(HX L)/(NX S) > W/L，則所述顯示規(guī)則為每個(gè)控件的寬度設(shè)置為W/L，高度設(shè)置為(WX S) /L,所述N個(gè)控件排列成L列。
3.根據(jù)權(quán)利要求1所述的控件排列顯示方法，其特征在于，若(HXL)/N< (WXS)/ (L+1)，則L遞增加1后所述客戶端繼續(xù)比較(HXL)/N與(WXS)/(L+1)，直至(HXL)/ N 彡(WXS)/(L+1),若(HX L)/(NX S)彡W/L，則所述顯示規(guī)則為每個(gè)控件的高度設(shè)置為(HXL)/N，寬度設(shè)置為(HX L)/(NX S),所述N個(gè)控件排列成L列，若(HX L)/(NX S) >W/L，則所述顯示規(guī)則為每個(gè)控件的寬度設(shè)置為W/L，高度設(shè)置為 (WXS) /L,所述N個(gè)控件排列成L列。
4.根據(jù)權(quán)利要求1所述的控件排列顯示方法，其特征在于，所述控件高寬比S小于1。
5.一種控件排列顯示系統(tǒng)，其特征在于，包括服務(wù)器；客戶端，所述客戶端用于從所述服務(wù)器獲得控件數(shù)量參數(shù)，所述客戶端通過加載的flash插件依據(jù)所述控件數(shù)量參數(shù)得到N個(gè)控件，所述客戶端分別結(jié)合(HXL)/N與 (WXS)/(L+1)、(HXL)/(NXS)與W/L的比較結(jié)果，獲得顯示規(guī)則，并按照所述顯示規(guī)則將所述N個(gè)控件顯示于所述客戶端的預(yù)設(shè)顯示區(qū)域，其中，H為所述預(yù)設(shè)顯示區(qū)域的高度，W為所述預(yù)設(shè)顯示區(qū)域的寬度，S為所述控件高寬比，L為顯示列數(shù)，且L ^ 1。
6.根據(jù)權(quán)利要求5所述的控件排列顯示系統(tǒng)，其特征在于，若(HXL)(WXS)/ (L+1)且(HXL)/(NXS)彡W/L，則所述顯示規(guī)則為每個(gè)控件的高度設(shè)置為(HXL)/N，寬度設(shè)置為(HX L) / (NX幻，所述N個(gè)控件排列成L列；若(HXL)/N彡(WXS)/(L+1)且(HX L)/(NX S) > W/L，則所述顯示規(guī)則為每個(gè)控件的寬度設(shè)置為W/L，高度設(shè)置為(WX S) /L,所述N個(gè)控件排列成L列。
7.根據(jù)權(quán)利要求5所述的控件排列顯示系統(tǒng)，其特征在于，若(HXL)/N< (WXS)/ (L+1)，則L遞增加1后所述客戶端繼續(xù)比較(HXL)/N與(WXS)/(L+1)，直至(HXL)/ N 彡(WXS)/(L+1),若(HXL)/(NXS)彡W/L，則所述顯示規(guī)則為每個(gè)控件的高度設(shè)置為(HXL)/N，寬度設(shè)置為(HX L)/(NX S),所述N個(gè)控件排列成L列，若(HX L)/(NX S) >W/L，則所述顯示規(guī)則為每個(gè)控件的寬度設(shè)置為W/L，高度設(shè)置為 (WXS) /L,所述N個(gè)控件排列成L列。
8.一種客戶端，其特征在于，包括獲得模塊，通過加載的flash插件依據(jù)從服務(wù)器獲得的控件數(shù)量參數(shù)得到N個(gè)控件；運(yùn)算比較模塊，連接所述獲得模塊，運(yùn)算比較(HXL)/N與(WXQ/(L+1)、(HXL)/ (NXS)與W/L，并獲得顯示規(guī)則，其中，H為所述預(yù)設(shè)顯示區(qū)域的高度，W為預(yù)設(shè)顯示區(qū)域的寬度，S為所述控件高寬比，L為顯示列數(shù)，且L彡1 ；以及顯示模塊，連接所述運(yùn)算比較模塊，所述顯示模塊按照獲得的所述顯示規(guī)則將所述N 個(gè)控件顯示于所述預(yù)設(shè)顯示區(qū)域。
9.根據(jù)權(quán)利要求8所述的客戶端，其特征在于，若(HXL)/N≥(WXS)/(L+1)且 (HXL)/(NXS)彡W/L，則所述顯示規(guī)則為每個(gè)控件的高度設(shè)置為(HXL)/N，寬度設(shè)置為 (HX L)/(NX S),所述N個(gè)控件排列成L列；若(HXL)/N彡(WXS)/(L+1)且(HX L)/(NX S) > W/L，則所述顯示規(guī)則為每個(gè)控件的寬度設(shè)置為W/L，高度設(shè)置為(WX S) /L,所述N個(gè)控件排列成L列。
10.根據(jù)權(quán)利要求8所述的客戶端，其特征在于，若(HXL)/N<(WXS)/(L+1)，則L遞增加1后所述客戶端繼續(xù)比較(HXL) /N與(WX S) / (L+1)，直至(HXL) /N^ (WXS)/ (L+1)，若(HX L)/(NX S)≤W/L，則所述顯示規(guī)則為每個(gè)控件的高度設(shè)置為(HXL)/N，寬度設(shè)置為(HX L)/(NX S),所述N個(gè)控件排列成L列，若(HX L)/(NX S) >W/L，則所述顯示規(guī)則為每個(gè)控件的寬度設(shè)置為W/L，高度設(shè)置為 (WXS) /L,所述N個(gè)控件排列成L列。
全文摘要
本發(fā)明提供一種控件排列顯示方法、系統(tǒng)及客戶端。上述方法包括以下步驟。客戶端從服務(wù)器獲得控件數(shù)量參數(shù)。客戶端通過加載的flash插件依據(jù)控件數(shù)量參數(shù)得到N個(gè)控件。客戶端分別結(jié)合(H×L)/N與(W×S)/(L+1)、(H×L)/(N×S)與W/L的比較結(jié)果，獲得顯示規(guī)則，并按照顯示規(guī)則將N個(gè)控件顯示于客戶端的預(yù)設(shè)顯示區(qū)域。其中，H為預(yù)設(shè)顯示區(qū)域的高度，W為預(yù)設(shè)顯示區(qū)域的寬度，S為控件高寬比，L為顯示列數(shù)，且L＞1。
文檔編號(hào)G09G5/38GK102214454SQ201110136790
公開日2011年10月12日 申請(qǐng)日期2011年5月27日 優(yōu)先權(quán)日2011年5月27日
發(fā)明者胡加明 申請(qǐng)人:蘇州闊地網(wǎng)絡(luò)科技有限公司