Layout and browsing method and system for front-end card list

Abstract

The invention relates to the field of display interfaces, and particularly discloses a front-end card list layout and browsing method and system, and the method comprises the steps: defining a layout mode of a card list; obtaining a size parameter of a display window where the card list is located; displaying at least one row of cards in the card list in the display window according to the size parameters and the layout mode; when the line displayed by the card list in the display window is switched, jumping to display the card of the corresponding line; when the trigger point moves to the display range of any one card, changing the display level of the card from the current value to the highest value, so that the card is displayed in the front; and when the trigger point moves out of the current display range of the card, changing the display level of the card into an original value. According to the method, the cards are automatically stacked, the layout mode of the card list is automatically adjusted according to different devices or windows of different sizes, and a user can browse a whole row of card data without operating a transverse scroll bar.

Description

Technical Field

[0001] The present invention relates to the field of display interface, and in particular to a layout and browsing method and system for a front-end card list. Background Art

[0002] With the rapid development of graphical interface systems, the human-computer interaction function of the display interface is developing in a more and more friendly direction. Among them, responsive layout can provide more comfortable interface layout and better user experience for users with different terminals or windows of different sizes. Moreover, with the popularity of smart mobile devices with high-resolution screens, responsive layout has gradually become the "general trend" of system interface layout. Technologies represented by CSS3 provide a foundation for the advancement and development of responsive layout.

[0003] The media query function is to lay out most of the media in the form of a card list on the display interface, so that users can intuitively understand the media information displayed on the card, and directly select and play the media by clicking on the card. The existing media query function is mostly implemented through grid layout. However, with the diversification of system interface requirements and the complexity of display terminals, as one of the key functions in responsive layout, the development complexity of the display interface corresponding to the media query function is getting higher and higher. Especially in multi-tasking operating systems, the display interface has different program interfaces displayed on the same screen, displayed in small windows, and in multi-display devices, the screen width of the current display interface is small, etc., which often causes the card size to be too small to view, or the number of cards displayed in each row is small, resulting in low browsing efficiency. At this time, it is difficult for the media query function to change the layout of the card list according to the change of the interface size, or even if the layout of the card list is changed, the number of cards in each row may not be fixed. When the window width is too small (small window or split screen), the card size will become too small, or the number of cards displayed in each row will be small, resulting in a poor user browsing experience. In addition, it is easy to have problems such as the DOM structure being not concise enough, the displayed content being not convenient for direct browsing, and low browsing efficiency. Summary of the invention

[0004] In order to overcome the above problems, the present invention provides a front-end card list layout and browsing method and system.

[0005] The present invention provides a front-end card list layout and browsing method, which is used to define the layout of cards in the card list, including:

[0006] Define the layout of the card list;

[0007] Get the size parameters of the display window where the card list is located;

[0008] Displaying at least one row of cards in the card list in the display window according to the size parameters and the layout mode;

[0009] When switching the rows displayed in the card list in the display window, jump to display the cards in the corresponding rows;

[0010] When the trigger point moves into the display range of any card, the display level of the card is changed from the current value to the highest value, so that the card is displayed in the front; when the trigger point moves out of the current display range of the card, the display level of the card is changed to the original value;

[0011] The trigger point is one of the mouse coordinates, cursor coordinates or touch screen trigger coordinates, and the layout mode is specifically:

[0012] According to the size parameters, calculate the number of card columns, card size and card parent element;

[0013] Sort the cards and define the display level of the cards in ascending / descending order according to the order of sorting;

[0014] Arrange at least one row of cards evenly in sequence according to the column spacing. When the column spacing is smaller than the card width, stack the cards according to the display level.

[0015] The card parent element includes the column spacing of the card list, the card size includes the card width and the card height, and the display level is used to determine the order of card stacking when the cards are displayed.

[0016] Preferably, the method for calculating the card size according to the size parameter is as follows:

[0017] The preset is used to determine the maximum preset value and the minimum preset value of the window size, and the preset is used to limit the maximum preset size and the minimum preset size of the card size;

[0018] When the size parameter is greater than the maximum preset value, the card size is the maximum preset size;

[0019] When the size parameter is smaller than the minimum preset value, the card size is the minimum preset size;

[0020] When the size parameter is greater than or equal to the minimum preset value and less than or equal to the maximum preset value, the card size is between the minimum preset size and the maximum preset size and is scaled proportionally according to the size parameter.

[0021] Preferably, the number of columns of the calculation card is specifically:

[0022] The size parameters are divided into several range values, and for different range values, a reasonable value is preset as the number of card columns.

[0023] Preferably, the card includes a title;

[0024] When it is detected that the cards are stacked, the card title is displayed in the display range of the card.

[0025] Preferably, when it is detected that the cards are stacked, the card title is displayed in the display range of the card, specifically:

[0026] Calculate the title font size based on column spacing;

[0027] Calculate the maximum number of characters to display in the title based on the card size and font size;

[0028] Display the first few characters of the title text information that do not exceed the maximum number of characters in the card display range.

[0029] Preferably, when the trigger point moves into the display range of any card, the display level of the card is changed from the current value to the highest value, so that the card is displayed in front; when the trigger point moves out of the current display range of the card, the display level of the card is changed to the original value, which specifically includes the following steps:

[0030] When the trigger point moves into the display range of any card being displayed, the display level of the card is temporarily changed from the current value to the highest value, the card is switched to the front display through animation effects, and at least one special effect is added to the card; the special effect is one of an upward pop-up effect, a magnification effect, a background floodlight effect, and brightness enhancement, or any combination thereof;

[0031] When the trigger point moves out of the current display range of the card, the display level of the card is changed to the original value, the added special effects are canceled, and the card is restored to the original display range through animation effects.

[0032] The present invention also provides a front-end card list layout and browsing system, including: a layout module, a window module, a display module and a switching module;

[0033] The layout module is used to define the layout mode of the card list; the layout mode is specifically: according to the size parameter, the number of columns, the card size and the card parent element are calculated; the cards are sorted, and the display levels of the cards are defined in ascending / descending order according to the order of sorting; the cards of at least one row are evenly arranged in sequence according to the column spacing, and when the column spacing is less than the card width, the cards are stacked according to the height of the display level;

[0034] The window module is used to obtain the size parameters of the display window where the card list is located;

[0035] The display module is used to display at least one row of cards in the card list in the display window according to the size parameter and the layout mode;

[0036] The switching module is used to jump to display the card of the corresponding row when switching the row displayed in the card list in the display window; when the trigger point moves into the display range of any card, the display level of the card is changed from the current value to the highest value, so that the card is displayed in front; when the trigger point moves out of the current display range of the card, the display level of the card is changed to the original value;

[0037] Among them, the trigger point is one of the mouse coordinates, cursor coordinates or touch screen trigger coordinates, the card parent element includes the column spacing of the card list, the card size includes the card width and the card height, and the display hierarchy is used to determine the order of card stacking when the cards are displayed.

[0038] The present invention provides a terminal device, including a processor and a storage device, wherein the storage device is used to store one or more programs; when the one or more programs are executed by the processor, the processor implements the above-mentioned layout and browsing method of the front-end card list.

[0039] The present invention provides a computer-readable storage medium, which includes a stored computer program, wherein when the computer program is running, the device where the computer-readable storage medium is located is controlled to execute the above-mentioned layout and browsing method of the front-end card list.

[0040] The beneficial effects of the present invention are:

[0041] (1) By automatically changing the size and layout of the cards according to the size of the display window, the number of cards displayed in each row of the card list does not change when the window size changes. The cards are automatically stacked to fit the window so that the number of cards displayed in each row can be unified. When the display window width is too small, the user can browse an entire row of card data without operating the horizontal scroll bar, which provides a better user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] The present invention will be further described below in conjunction with the accompanying drawings, wherein:

[0043] Figure 1 This is a flow chart of a method according to Embodiment 1 of the present invention;

[0044] Figure 2 This is a schematic diagram of displaying a card list in a large window according to the second embodiment of the present invention;

[0045] Figure 3 This is a schematic diagram of overlapping display of cards after the window size is reduced according to the second embodiment of the present invention;

[0046] Figure 4 This is a schematic diagram of the trigger point moving to the overlapped card according to the second embodiment of the present invention. DETAILED DESCRIPTION

[0047] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0048] See also Figure 1 As the first embodiment of the present invention, CSS3 technology is used to improve and innovate the layout of the card list displayed by the media query function. This embodiment discloses a layout and browsing method of a front-end card list, including the following steps:

[0049] S1. Define the layout of the card list;

[0050] S2. Get the size parameters of the display window where the card list is located;

[0051] S3. Displaying at least one row of cards in the card list in the display window according to the size parameter and the layout mode;

[0052] S4. When the row displayed in the card list in the display window is switched, the card in the corresponding row is displayed;

[0053] S5. When the trigger point moves into the display range of any card, the display level of the card is changed from the current value to the highest value, so that the card is displayed in front to display the entire content of the card; when the trigger point moves out of the current display range of the card, the display level of the card is changed to the original value, so that the display of the card returns to its original state.

[0054] The size parameters include the height, width and resolution of the display window, and the trigger point is one of the mouse coordinates, cursor coordinates or touch screen trigger coordinates.

[0055] The specific parameters of size parameters include:

[0056] width / height: defines the width / height of the visible area of ​​the page in the output device;

[0057] device-width / height: defines the screen visible width / height of the output device;

[0058] Resolution: defines the resolution of the device. For example: 96dpi, 300dpi, 118dpcm;

[0059] aspect-rat i0: defines the ratio of the width to the height of the visible area of ​​the page in the output device.

[0060] The length, width and resolution of the window can provide a basis for subsequent size calculations.

[0061] The layout method of this embodiment specifically includes the following steps:

[0062] S11. Calculate the number of card columns, card size, and card parent element according to the size parameters;

[0063] S12, sorting the cards, and defining the display levels of the cards in ascending / descending order according to the order of sorting;

[0064] S13, arranging cards of at least one row in sequence evenly according to the column spacing, and when the column spacing is smaller than the card width, stacking the cards according to the height of the display level.

[0065] The card parent element includes the column spacing of the card list, the card size includes the card width and the card height, and the display level is used to determine the order of card stacking when the cards are displayed.

[0066] This embodiment also discloses a front-end card list layout and browsing system, which is characterized by comprising: a layout module, a window module, a display module and a switching module;

[0067] The layout module is used to define the layout mode of the card list; the layout mode is specifically: according to the size parameter, the number of columns, the card size and the card parent element are calculated; the cards are sorted, and the display levels of the cards are defined in ascending / descending order according to the order of sorting; the cards of at least one row are evenly arranged in sequence according to the column spacing, and when the column spacing is less than the card width, the cards are stacked according to the height of the display level;

[0068] The window module is used to obtain the size parameters of the display window where the card list is located;

[0069] The display module is used to display at least one row of cards in the card list in the display window according to the size parameter and the layout mode;

[0070] The switching module is used to jump to display the card of the corresponding row when switching the row displayed in the card list in the display window; when the trigger point moves into the display range of any card, the display level of the card is changed from the current value to the highest value, so that the card is displayed in front; when the trigger point moves out of the current display range of the card, the display level of the card is changed to the original value;

[0071] Among them, the trigger point is one of the mouse coordinates, cursor coordinates or touch screen trigger coordinates, the card parent element includes the row spacing and column spacing of the card list, the card size includes the card width and the card height, the row spacing is usually greater than the card height, and the display hierarchy is used to determine the order of card stacking when the cards are displayed.

[0072] The parent element (row) of the card is set (i.e., the column spacing) to change with the size of the window. A suitable value is calculated as the base number through the number of cards to be arranged in a row, the width of the parent element (row) of the card, and the uniform width of the card. This base number and the serial number of the card in the row (such as 0, 1, 2, 3, 4) are used to obtain a value as the margin-level value corresponding to each card (i.e., sort the cards). This margin-level value is used to control the uniform arrangement of each card in a row; the display level zindex of the card increases in sequence according to the card serial number to create a stacking effect; when the cursor is set to hover over the current card, the display level zindex of the current card increases (increased to the highest among all cards in the current row), so as to ensure that the information of each stacked card in a row can be browsed by moving the cursor.

[0073] By automatically changing the size and layout of the cards according to the size of the display window, the number of cards displayed in each row of the card list will not change when the window size is changed. The cards will be automatically stacked to fit the window so that the number of cards displayed in each row can be unified. When the display window width is too small, the user can browse an entire row of card data without operating the horizontal scroll bar, providing a better user experience.

[0074] See also Figures 2 to 4 As a second embodiment of the present invention, taking a card list displayed in a certain window as an example, the card list includes 5 cards, namely content 1, content 2, content 3, content 4 and content 5.

[0075] The difference between this embodiment and the first embodiment is that in step S11 of this embodiment, the method for calculating the card size according to the size parameter is as follows:

[0076] A1. Preset the maximum preset value and the minimum preset value for determining the window size, and preset the maximum preset size and the minimum preset size for limiting the card size;

[0077] A2. When the size parameter is greater than the maximum preset value, the card size is the maximum preset size;

[0078] A3. When the size parameter is less than the minimum preset value, the card size is the minimum preset size;

[0079] A4. When the size parameter is greater than or equal to the minimum preset value and less than or equal to the maximum preset value, the card size is between the minimum preset size and the maximum preset size, and is scaled proportionally according to the size parameter.

[0080] The size of the card can be changed within a certain range along with the size of the window, and the upper and lower limits of the card display are limited by the maximum preset size and the minimum preset size, so that the card will not be too large, resulting in insufficient resolution or too much space for the displayed content, nor will the card size be too small, resulting in difficulty in seeing clearly.

[0081] In this embodiment, the number of columns of cards is determined by dividing the size parameter into several range values. For different range values, a reasonable value is preset as the number of columns of cards. The reasonable value is directly given by the web designer during software development. The number of columns is directly limited for different display window sizes to avoid displaying too many cards in the same line, which makes it difficult to operate.

[0082] Preferably, this embodiment further includes the following sub-steps:

[0083] B1. When the trigger point moves into the display range of any card being displayed, the display level of the card is temporarily changed from the current value to the highest value, the card is switched to the front display through animation effect, and at least one special effect is added to the card; the special effect is one of the following: upward pop-up effect, magnification effect, background floodlight effect and brightness enhancement, or any combination thereof;

[0084] B2. When the trigger point moves out of the current display range of the card, the display level of the card is changed to the original value, the added special effects are canceled, and the card is restored to the original display range through animation effects.

[0085] like Figure 3 As shown, this is the upward pop-up effect of the card corresponding to content 3.

[0086] By adding special effects and animation effects, the card selection and display process can be made more intuitive and vivid, improving the user experience, and clear interactive feedback can be given to users at trigger points to improve the feedback experience of operations.

[0087] The following is a third embodiment of the present invention. The card of this embodiment includes a title, a thumbnail, a text introduction and other contents, wherein the title is composed of a line of text content.

[0088] When it is detected that the cards are stacked, the card title is displayed first in the card display range, so that users can better read the main information of the card and understand the media content corresponding to the stacked cards more quickly.

[0089] Preferably, when it is detected that the cards are stacked, the card title is displayed in the display range of the card, specifically:

[0090] C1. Calculate the font size of the title based on the column spacing;

[0091] C2. Calculate the maximum number of characters to display in the title based on the card size and font size;

[0092] C3. Display the first few words of the title text information that do not exceed the maximum number of words in the display range of the card.

[0093] This ensures that the font size of the title matches the display range of the card, so that the text of the title is displayed as large as possible, making it easier to see the text of the title more clearly in the small window.

[0094] This embodiment breaks the overly mechanical or standardized approach of traditional media query and grid layout through a novel and innovative interactive approach.

[0095] The present invention also discloses a terminal device, including a processor and a storage device, wherein the storage device is used to store one or more programs; when the one or more programs are executed by the processor, the processor implements the above-mentioned layout and browsing method of a front-end card list. The processor can be a central processing unit (CPU), or other general processors, digital signal processors (DSP), application specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components, etc. The general processor can be a microprocessor or the processor can also be any conventional processor, etc. The processor is the control center of the test equipment, and uses various interfaces and lines to connect various parts of the entire test equipment.

[0096] The storage device can be used to store computer programs and / or modules. The processor realizes various functions of the terminal device by running or executing the computer programs and / or modules stored in the storage device, and calling the data stored in the storage device. The storage device can mainly include a program storage area and a data storage area, wherein the program storage area can store an operating system, at least one application required for a function, etc.; the data storage area can store data created according to the use of the terminal device, etc. In addition, the storage device can include a high-speed random access memory, and can also include a non-volatile memory, such as a hard disk, a memory, a plug-in hard disk, a smart memory card (Smart Med ia Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (Flash Card), at least one disk storage device, a flash memory device, or other volatile solid-state storage devices.

[0097] Among them, a module / unit integrating the layout of a front-end card list and a browsing device can be stored in a computer-readable storage medium if it is implemented in the form of a software functional unit and sold or used as an independent product. Based on such an understanding, the present invention implements all or part of the processes in the above-mentioned embodiment method, and can also be completed by instructing the relevant hardware through a computer program. The computer program can be stored in at least one computer-readable storage medium, and the computer program can implement the steps of the above-mentioned various method embodiments when executed by the processor. Among them, the computer program includes computer program code, and the computer program code can be in source code form, object code form, executable file or some intermediate form, etc. The computer-readable medium can include: any entity or device capable of carrying computer program code, recording medium, U disk, mobile hard disk, disk, optical disk, computer memory, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), electric carrier signal, telecommunication signal and software distribution medium, etc.

[0098] It should be noted that the embodiments of the devices and apparatuses described above are only illustrative, wherein the units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place, or may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

Claims

1. A front-end card list layout and browsing method, used to define the layout of cards in a card list, characterized in that: include: Define the layout of the card list; Get the size parameters of the display window where the card list is located; Displaying at least one row of cards in the card list in the display window according to the size parameters and the layout mode; When switching the rows displayed in the card list in the display window, jump to display the cards in the corresponding rows; When the trigger point moves into the display range of any card, the display level of the card is changed from the current value to the highest value, so that the card is displayed in the front; when the trigger point moves out of the current display range of the card, the display level of the card is changed to the original value; The trigger point is one of the mouse coordinates, cursor coordinates or touch screen trigger coordinates, and the layout mode is specifically: According to the size parameters, calculate the number of card columns, card size and card parent element; Sort the cards and define the display level of the cards in ascending / descending order according to the order of sorting; Arrange at least one row of cards evenly in sequence according to the column spacing. When the column spacing is smaller than the card width, stack the cards according to the display level. The card parent element includes the column spacing of the card list, the card size includes the card width and the card height, and the display level is used to determine the order of card stacking when the cards are displayed.

2. A front-end card list layout and browsing method according to claim 1, characterized in that: The method for calculating the card size according to the size parameters is as follows: The preset is used to determine the maximum preset value and the minimum preset value of the window size, and the preset is used to limit the maximum preset size and the minimum preset size of the card size; When the size parameter is greater than the maximum preset value, the card size is the maximum preset size; When the size parameter is smaller than the minimum preset value, the card size is the minimum preset size; When the size parameter is greater than or equal to the minimum preset value and less than or equal to the maximum preset value, the card size is between the minimum preset size and the maximum preset size and is scaled proportionally according to the size parameter.

3. A front-end card list layout and browsing method according to claim 2, characterized in that: The number of columns of the calculation card is specifically: The size parameters are divided into several range values, and for different range values, a reasonable value is preset as the number of card columns.

4. A front-end card list layout and browsing method according to claim 1, characterized in that: The card includes a title; When it is detected that the cards are stacked, the card title is displayed in the display range of the card.

5. A front-end card list layout and browsing method according to claim 4, characterized in that: When it is detected that the cards are stacked, the card title is displayed in the display range of the card, specifically: Calculate the title font size based on column spacing; Calculate the maximum number of characters to display in the title based on the card size and font size; Display the first few characters of the title text information that do not exceed the maximum number of characters in the card display range.

6. A front-end card list layout and browsing method according to claim 1, characterized in that: When the trigger point moves into the display range of any card, the display level of the card is changed from the current value to the highest value, so that the card is displayed in front; when the trigger point moves out of the current display range of the card, the display level of the card is changed to the original value, which specifically includes the following steps: When the trigger point moves into the display range of any card being displayed, the display level of the card is temporarily changed from the current value to the highest value, the card is switched to the front display through animation effects, and at least one special effect is added to the card; the special effect is one of an upward pop-up effect, a magnification effect, a background floodlight effect, and brightness enhancement, or any combination thereof; When the trigger point moves out of the current display range of the card, the display level of the card is changed to the original value, the added special effects are canceled, and the card is restored to the original display range through animation effects.

7. A front-end card list layout and browsing system, characterized in that: include: Layout module, window module, display module and switching module; The layout module is used to define the layout mode of the card list; the layout mode is specifically: according to the size parameter, the number of columns, the card size and the card parent element are calculated; the cards are sorted, and the display levels of the cards are defined in ascending / descending order according to the order of sorting; the cards of at least one row are evenly arranged in sequence according to the column spacing, and when the column spacing is less than the card width, the cards are stacked according to the height of the display level; The window module is used to obtain the size parameters of the display window where the card list is located; The display module is used to display at least one row of cards in the card list in the display window according to the size parameter and the layout mode; The switching module is used to jump to display the card of the corresponding row when switching the row displayed in the card list in the display window; when the trigger point moves into the display range of any card, the display level of the card is changed from the current value to the highest value, so that the card is displayed in front; when the trigger point moves out of the current display range of the card, the display level of the card is changed to the original value; Among them, the trigger point is one of the mouse coordinates, cursor coordinates or touch screen trigger coordinates, the card parent element includes the column spacing of the card list, the card size includes the card width and the card height, and the display hierarchy is used to determine the order of card stacking when the cards are displayed.

Images