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

發(fā)明內(nèi)容
本發(fā)明提供一種控件排列方法及系統(tǒng)以解決上述問(wèn)題。本發(fā)明提供一種控件排列方法，上述方法包括以下步驟。客戶端從服務(wù)器獲得控件數(shù)量參數(shù)。客戶端通過(guò)加載的flash插件依據(jù)控件數(shù)量參數(shù)得到N個(gè)控件?？蛻舳藢⒋帕行畔鬏斨练?wù)器。服務(wù)器分別結(jié)合(HXL)/N與(WXS)/(L+1)、(HXL)/(NXS)與W/ L的比較結(jié)果，獲得顯示規(guī)則，并將顯示規(guī)則傳輸至客戶端。其中，待排列信息包括H、W及 S，H為預(yù)設(shè)顯示區(qū)域的高度，W為預(yù)設(shè)顯示區(qū)域的寬度，S為控件高寬比，L為顯示列數(shù)，且 L^ 1.客戶端按照接收的顯示規(guī)則將N個(gè)控件顯示于客戶端的預(yù)設(shè)顯示區(qū)域。本發(fā)明還提供一種控件排列系統(tǒng)，包括服務(wù)器及客戶端?？蛻舳擞糜趶姆?wù)器獲得控件數(shù)量參數(shù)，客戶端通過(guò)加載的flash插件依據(jù)控件數(shù)量參數(shù)得到N個(gè)控件?？蛻舳藢⒋帕行畔鬏斨练?wù)器。服務(wù)器分別結(jié)合(HXL)/N與(WXS)/(L+1)、(HXL)/(NXS) 與W/L的比較結(jié)果，獲得顯示規(guī)則，并將顯示規(guī)則傳輸至客戶端。其中，待排列信息包括H、W 及S，H為預(yù)設(shè)顯示區(qū)域的高度，W為預(yù)設(shè)顯示區(qū)域的寬度，S為控件高寬比，L為顯示列數(shù)， 且LS 1?？蛻舳税凑战邮盏娘@示規(guī)則將N個(gè)控件顯示于客戶端的預(yù)設(shè)顯示區(qū)域。相較于先前技術(shù)，根據(jù)本發(fā)明提供的控件排列方法及系統(tǒng)，服務(wù)器通過(guò)比較 (HXL)/N與(WXS)/(L+1)、(HXL)/(NXS)與W/L，從而確定N個(gè)控件的排列方式以及每個(gè)控件的高度與寬度，以使單個(gè)控件的顯示面積最大。如此，提高用戶的體驗(yàn)和觀感。


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