【技術實現步驟摘要】
本專利技術涉及顯示界面領域，尤其涉及一種前端卡片列表的布局和瀏覽方法及系統。
技術介紹
1、隨著圖形界面系統的飛速發展，顯示界面的人機交互功能向著越來越友好的方向發展。其中，響應式布局可以為不同的終端或者使用不同大小窗口的用戶提供更加舒適的界面布局，以及更好的用戶體驗，而且隨著具有高分辨率屏幕的智能移動設備的普及，響應式布局逐漸成為系統界面布局的“大勢所趨”，以css3為代表的技術為響應式布局的進步與發展提供了基礎。
2、媒體查詢功能是將多數的媒體以卡片列表的形式平鋪在顯示界面上，供用戶直觀的了解卡片上顯示的媒體信息，并直接通過點擊卡片進行媒體的選取播放。現有的媒體查詢功能多是通過網格布局來實現。然而，隨著系統界面需求的多樣化，顯示終端的復雜化，作為響應式布局中的關鍵功能之一，媒體查詢功能對應的顯示界面的開發復雜度越來越高。特別是在多任務操作系統中，顯示界面存在不同程序界面的同屏顯示、小窗口顯示，以及在多顯示器的設備中，當前顯示界面的屏幕寬度較小等情況，致使經常出現卡片尺寸過小難以查看，或是每行顯示卡片數量少，導致瀏覽效率低下。此時，媒體查詢功能難以根據界面尺寸的變化改變卡片列表的布局方式，或是即使改變了卡片列表的布局方式，仍存在每行的卡片數量可能無法固定，在窗口寬度過小時(小窗口或者分屏)，卡片尺寸也會變得太小，或每行顯示卡片數量少，用戶瀏覽體驗差；且容易出現dom結構不夠精簡、顯示內容不便于直接瀏覽，瀏覽效率低下的問題。
技術實現思路
1、為了克服上述問題，本專利技
2、本專利技術提供了一種前端卡片列表的布局和瀏覽方法，用于定義卡片列表中卡片的布局方式，包括：
3、定義卡片列表的布局方式；
4、獲取卡片列表所在顯示窗口的尺寸參數；
5、依據所述尺寸參數和布局方式，在顯示窗口中顯示卡片列表的至少一行卡片；
6、當切換顯示窗口中卡片列表顯示的行時，跳轉顯示對應行的卡片；
7、當觸發點移動到任意一個卡片的顯示范圍內時，將該卡片的顯示層級由當前值改為最高值，使該卡片在前顯示；當觸發點移出該卡片的當前顯示范圍時，將該卡片的顯示層級改為原值；
8、其中，所述觸發點是鼠標坐標、光標坐標或觸摸屏觸發坐標其中之一，所述布局方式具體為：
9、依據所述尺寸參數，計算卡片的列數、卡片尺寸和卡片父元素；
10、將卡片進行排序，按照排序的先后定義依次遞增/遞減的定義卡片的顯示層級；
11、將至少一行的卡片依次按照列間距均勻排列，且當列間距小于卡片寬度時，將卡片依據顯示層級的高低進行層疊；
12、其中，卡片父元素包括卡片列表的列間距，卡片尺寸包括卡片寬度和卡片高度，所述顯示層級用于在卡片顯示時確定卡片層疊的先后關系。
13、作為優選地，所述依據所述尺寸參數，計算卡片尺寸的方法具體如下：
14、預設用于判斷窗口尺寸的最大預設值和最小預設值，預設用于限制卡片尺寸大小的最大預設尺寸和最小預設尺寸；
15、當尺寸參數大于最大預設值時，卡片尺寸為最大預設尺寸；
16、當尺寸參數小于最小預設值時，卡片尺寸為最小預設尺寸；
17、當尺寸參數大于等于最小預設值且小于等于最大預設值時，卡片尺寸在最小預設尺寸和最大預設尺寸之間，并依據尺寸參數等比例縮放。
18、優選地，所述計算卡片的列數，具體為：
19、將尺寸參數分為若干個范圍值，針對不同的范圍值，分別預設一個合理數值作為卡片的列數。
20、優選地，所述卡片包括標題；
21、當檢測到卡片被層疊時，在卡片的顯示范圍顯示卡片標題。
22、優選地，所述當檢測到卡片被層疊時，在卡片的顯示范圍顯示卡片標題，具體為：
23、依據列間距，計算標題的字號；
24、依據卡片尺寸和字號，計算顯示標題的最大字數；
25、將標題的文字信息中，不超過最大字數的前幾個文字顯示在卡片的顯示范圍。
26、優選地，所述當觸發點移動到任意一個卡片的顯示范圍內時，將該卡片的顯示層級由當前值改為最高值，使該卡片在前顯示；當觸發點移出該卡片的當前顯示范圍時，將該卡片的顯示層級改為原值，具體包括分步驟如下：
27、所述當觸發點移動到任何一個正在顯示的卡片的顯示范圍內時，將該卡片的顯示層級由當前值臨時改為最高值，通過動畫效果使該卡片切換為在前顯示，并為該卡片添加至少一種特效；所述特效是上移動彈效果、放大效果、背景泛光效果和提高亮度其中之一或其任意組合；
28、當觸發點移出該卡片的當前顯示范圍時，將該卡片的顯示層級改為原值，取消添加的特效，并通過動畫效果使該卡片恢復至原先的顯示范圍。
29、本專利技術還提供了一種前端卡片列表的布局和瀏覽系統，包括：布局模塊、窗口模塊、顯示模塊和切換模塊；
30、所述布局模塊用于定義卡片列表的布局方式；所述布局方式具體為：依據所述尺寸參數，計算卡片的列數、卡片尺寸和卡片父元素；將卡片進行排序，按照排序的先后定義依次遞增/遞減的定義卡片的顯示層級；將至少一行的卡片依次按照列間距均勻排列，且當列間距小于卡片寬度時，將卡片依據顯示層級的高低進行層疊；
31、所述窗口模塊用于獲取卡片列表所在顯示窗口的尺寸參數；
32、所述顯示模塊用于依據所述尺寸參數和布局方式，在顯示窗口中顯示卡片列表的至少一行卡片；
33、所述切換模塊用于當切換顯示窗口中卡片列表顯示的行時，跳轉顯示對應行的卡片；當觸發點移動到任意一個卡片的顯示范圍內時，將該卡片的顯示層級由當前值改為最高值，使該卡片在前顯示；當觸發點移出該卡片的當前顯示范圍時，將該卡片的顯示層級改為原值；
34、其中，所述觸發點是鼠標坐標、光標坐標或觸摸屏觸發坐標其中之一，卡片父元素包括卡片列表的列間距，卡片尺寸包括卡片寬度和卡片高度，所述顯示層級用于在卡片顯示時確定卡片層疊的先后關系。
35、本專利技術提供了一種終端設備，包括處理器和存儲裝置，所述存儲裝置用于存儲一個或多個程序；當所述一個或多個程序被所述處理器執行時，所述處理器實現上述一種前端卡片列表的布局和瀏覽方法。
36、本專利技術提供了一種計算機可讀存儲介質，所述計算機可讀存儲介質包括存儲的計算機程序，其中，在所述計算機程序運行時控制所述計算機可讀存儲介質所在設備執行上述一種前端卡片列表的布局和瀏覽方法。
37、本專利技術的有益效果是：
38、(1)通過自動依據顯示窗口的尺寸來改變卡片的尺寸和布局方式，在改變窗口尺寸的情況下，不改變卡片列表每行的顯示數量，自動對卡片進行層疊以適應窗口，使每行顯示的卡片數量能夠統一化；當顯示的窗口寬度過小時，用戶無需操作橫向滾動條即可瀏覽一整行的卡片數據，用戶體驗更好。
本文檔來自技高網...【技術保護點】
1.一種前端卡片列表的布局和瀏覽方法，用于定義卡片列表中卡片的布局方式，其特征在于，包括：
2.根據權利要求1所述的一種前端卡片列表的布局和瀏覽方法，其特征在于，所述依據所述尺寸參數，計算卡片尺寸的方法具體如下：
3.根據權利要求2所述的一種前端卡片列表的布局和瀏覽方法，其特征在于，所述計算卡片的列數，具體為：
4.根據權利要求1所述的一種前端卡片列表的布局和瀏覽方法，其特征在于，所述卡片包括標題；
5.根據權利要求4所述的一種前端卡片列表的布局和瀏覽方法，其特征在于，所述當檢測到卡片被層疊時，在卡片的顯示范圍顯示卡片標題，具體為：
6.根據權利要求1所述的一種前端卡片列表的布局和瀏覽方法，其特征在于，所述當觸發點移動到任意一個卡片的顯示范圍內時，將該卡片的顯示層級由當前值改為最高值，使該卡片在前顯示；當觸發點移出該卡片的當前顯示范圍時，將該卡片的顯示層級改為原值，具體包括分步驟如下：
7.一種前端卡片列表的布局和瀏覽系統，其特征在于，包括：布局模塊、窗口模塊、顯示模塊和切換模塊；
【技術特征摘要】
1.一種前端卡片列表的布局和瀏覽方法，用于定義卡片列表中卡片的布局方式，其特征在于，包括：
2.根據權利要求1所述的一種前端卡片列表的布局和瀏覽方法，其特征在于，所述依據所述尺寸參數，計算卡片尺寸的方法具體如下：
3.根據權利要求2所述的一種前端卡片列表的布局和瀏覽方法，其特征在于，所述計算卡片的列數，具體為：
4.根據權利要求1所述的一種前端卡片列表的布局和瀏覽方法，其特征在于，所述卡片包括標題；
5.根據權利要求4所述的一種前端...
【專利技術屬性】
技術研發人員：孫高博，張常華，余吉昌，阮勝林，
申請(專利權)人：廣東保倫電子股份有限公司，
類型：發明
國別省市：
還沒有人留言評論。發表了對其他瀏覽者有用的留言會獲得科技券。