Card rendering method and device for visible area, storage medium, electronic device and computer program product

Abstract

The embodiments of the present application provide a method and apparatus for rendering cards in a visible area, a storage medium, an electronic device, and a computer program product. The method includes: obtaining card data of a second number of cards from a background database according to a first number of cards allowed to be placed in the visible area, and saving the card data in a first card list, where the second number of cards is greater than the first number of cards, and the difference between the second number of cards and the first number of cards is less than a preset threshold; creating two-dimensional data according to the first card list, where the two-dimensional data is used to save the total height of each column in the visible area and the card data included in each column; converting the two-dimensional data into a one-dimensional data queue, where the one-dimensional data queue is used to store the card data of each column in the two-dimensional data structure; screening out a second card list that meets the preset conditions from the one-dimensional data queue, and rendering the first cards included in the second card list to the visible area.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of communications. Specifically, the embodiments of the present application relate to a method and apparatus for rendering cards in a visible area, a storage medium, an electronic device, and a computer program product. Background Art

[0002] In the related art, tens of thousands of cards are arranged in a visible area. However, when the visible area changes, for example, on a mobile device, the visible area switches from portrait mode to landscape mode, or on a browser, the target object changes the size of the visible area by dragging the edge of the browser window, it is necessary to re-arrange these tens of thousands of cards. However, in the related art, when rendering a large number of cards, there is a problem of slow rendering speed in the card initialization stage.

[0003] In view of the problem of slow rendering speed in the card initialization stage when rendering a large number of cards in the related art, no effective solution has been proposed yet. Summary of the Invention

[0004] The embodiments of the present application provide a method and apparatus for rendering cards in a visible area, a storage medium, an electronic device, and a computer program product, so as to at least solve the problem of slow rendering speed in the card initialization stage when rendering a large number of cards in the related art, and effectively improve the rendering speed of cards in the visible area.

[0005] According to an embodiment of the present application, a method for rendering cards in a visible area includes: obtaining card data of a second number of cards from a background database according to a first number of cards allowed to be placed in the visible area, and saving the card data in a first card list, where the second number of cards is greater than the first number of cards, and the difference between the second number of cards and the first number of cards is less than a preset threshold; creating two-dimensional data according to the first card list, where the two-dimensional data is used to save the total height of each column in the visible area and the card data included in each column; converting the two-dimensional data into a one-dimensional data queue, where the one-dimensional data queue is used to store the card data of each column in the two-dimensional data structure; screening out a second card list that meets a preset condition from the one-dimensional data queue, and rendering the first cards included in the second card list to the visible area.

[0006] In an exemplary embodiment, obtaining card data of a second number of cards from a background database according to a first number of cards allowed to be placed in the visible area includes: determining the second number of cards m according to the following formula: , where n is the first number of cards, k is a first preset value, and b is a second preset value; obtaining the card data of the second number of cards from the background database.

[0007] In an exemplary embodiment, creating two-dimensional data according to the first card list includes: determining the number of arrays included in the two-dimensional data according to the number of columns allowed to be displayed in the visible area, where the arrays correspond one-to-one with the columns in the visible area; determining the data included in each array from the first card list, where the data of each array includes: the total height of the column corresponding to each array and the card data included in the column corresponding to each array; creating the two-dimensional data according to the number of arrays and the data included in each array.

[0008] In an exemplary embodiment, converting the two-dimensional data into a one-dimensional data queue includes: creating an initial one-dimensional data queue, where the values in the initial one-dimensional data queue are all target values; traversing each array in the two-dimensional data to obtain the data corresponding to each array respectively; adding the data corresponding to each array to the initial one-dimensional data queue respectively to obtain the one-dimensional data queue.

[0009] In an exemplary embodiment, screening out a second card list that meets a preset condition from the one-dimensional data queue includes: obtaining the preset condition corresponding to the visible area, where the preset condition includes a first preset condition and a second preset condition, where the first preset condition is used to indicate that the sum of the first distance of the first card and the height of the first card is greater than the starting position value of the visible area, and the first distance is the distance between the first card and the top of the visible area; the second preset condition is that the first distance is less than the ending position value of the visible area; screening out the second card list that meets the preset condition from the one-dimensional data queue.

[0010] In an exemplary embodiment, rendering the first cards included in the second card list to the visible area includes: for each first card included in the second card list, obtaining the width allowed to be displayed in the visible area of each first card, the height of each first card, the first distance of each first card from the top of the visible area, and the second distance of each first card from the left side of the visible area; rendering each first card in the second card list to the visible area according to the width of each first card, the height of each first card, the first distance, and the second distance.

[0011] In an exemplary embodiment, obtaining the width allowed to be displayed in the visible area of each first card includes: obtaining the total width of the visible area and the number of columns allowed to be displayed in the visible area; determining the width allowed to be displayed in the visible area of each first card according to the total width and the number of columns.

[0012] In an exemplary embodiment, obtaining a first distance of each of the first cards from the top of the visible area includes: when the first card is the second card in any column in the visible area, obtaining a third distance from the upper end of the first card in the column to the top, a height of the first card, and a fourth distance from the lower end of the first card to the upper end of the second card, where the first card and the first card are adjacent cards in the same column; determining the sum of the third distance, the height of the first card, and the fourth distance as the first distance.

[0013] In an exemplary embodiment, obtaining a second distance of each of the first cards from the left side of the visible area includes: when the first card is any card in the nth column in the visible area, obtaining a width w of the first card and a fifth distance g from the left end of the any card to the right end of the card on the left side of the any card; determining the second distance based on the width w and the fifth distance g, where both w and g are constants.

[0014] In an exemplary embodiment, determining the second distance based on the width w and the fifth distance g includes: determining the second distance p according to the following formula: , where n is a positive integer.

[0015] In an exemplary embodiment, obtaining the height of each of the first cards includes: creating a temporary list for the first card list, where the card data in the first card list is stored in the temporary list; traversing the card data in the temporary list to obtain a temporary card; mounting the temporary card to a container element on an external page, and calling an external interface through the container element to obtain the height of the first card through the external interface.

[0016] In an exemplary embodiment, traversing the card data in the temporary list to obtain a temporary card includes: setting a temporary variable for the temporary list; starting the temporary list when controlling the value of the temporary variable to be true; and traversing the card data in the temporary list to obtain a temporary card when successfully starting the temporary list.

[0017] In an exemplary embodiment, after calling an external interface through the container element to obtain the height of the first card through the external interface, the method further includes: controlling the value of the temporary variable to be false; and closing the started temporary list when controlling the value of the temporary variable to be false.

[0018] In an exemplary embodiment, after obtaining the height of each of the first cards, the method further includes: creating a key-value pair mapping, wherein the keys of the key-value pair mapping store the identification information corresponding to all the cards in the first card list respectively, and the values of the key-value pair mapping store the heights corresponding to all the cards respectively; replacing the height corresponding to each of the first cards saved in the key-value pair mapping with the obtained height of each of the first cards.

[0019] In an exemplary embodiment, after rendering the first cards included in the second card list to the visible area, the method further includes: when the scrolling event of the visible area is in a bottom-touch state, obtaining a second card to be rendered to the visible area; determining the column with the minimum height from the visible area, and rendering the second card to the partial visible area corresponding to the column with the minimum height.

[0020] In an exemplary embodiment, after rendering the second card to the partial visible area corresponding to the column with the minimum height, the method further includes: determining a first height included in the column with the minimum height in the two-dimensional data, and a second height of the partial visible area; updating the first height in the two-dimensional data to the second height.

[0021] According to another embodiment of the present application, there is also provided a card rendering device for a visible area, including: an obtaining module, configured to obtain card data of a second card quantity from a background database according to a first card quantity allowed to place cards in the visible area, and save the card data in a first card list, wherein the second card quantity is greater than the first card quantity, and the difference between the second card quantity and the first card quantity is less than a preset threshold; a creating module, configured to create two-dimensional data according to the first card list, wherein the two-dimensional data is used to save the height of each column in the visible area and the card data included in each column; a converting module, configured to convert the two-dimensional data into a one-dimensional data queue, wherein the one-dimensional data queue is used to store the card data of each column in the two-dimensional data structure; a rendering module, configured to screen out a second card list meeting a preset condition from the one-dimensional data queue, and render the first cards included in the second card list to the visible area.

[0022] According to still another embodiment of the present application, there is also provided a computer-readable storage medium, in which a computer program is stored, wherein the computer program is set to execute the steps in any one of the above method embodiments when running.

[0023] According to another embodiment of the present application, an electronic device is further provided, including a memory and a processor. A computer program is stored in the memory, and the processor is configured to run the computer program to execute the steps in any one of the above method embodiments.

[0024] According to another embodiment of the present application, a computer program product is further provided, including a computer program which, when executed by a processor, implements the steps in the above method embodiments.

[0025] Through the present application, card data of a second card quantity is obtained from a background database according to the first card quantity allowing cards to be placed within a visible area, and the card data is saved in a first card list, where the second card quantity is greater than the first card quantity, and the difference between the second card quantity and the first card quantity is less than a preset threshold; two-dimensional data is created according to the first card list, where the two-dimensional data is used to save the total height of each column in the visible area and the card data included in each column; the two-dimensional data is converted into a one-dimensional data queue, where the one-dimensional data queue is used to store the card data of each column in the two-dimensional data structure; a second card list meeting preset conditions is screened out from the one-dimensional data queue, and the first cards included in the second card list are rendered into the visible area. By adopting the above technical solution, the problem that the rendering speed is slow in the card initialization stage when rendering a large number of cards in the related art is solved, and the rendering speed of the cards in the visible area is effectively improved. Description of the Drawings

[0026] Figure 1 is a hardware structure block diagram of a computer terminal for a method of rendering cards in a visible area according to an embodiment of the present application;

[0027] Figure 2 is a flowchart of a method of rendering cards in a visible area according to an embodiment of the present application;

[0028] Figure 3 is a non-scrolling state diagram of a method of rendering cards in a visible area according to an embodiment of the present application;

[0029] Figure 4 is a scrolling state diagram of a method of rendering cards in a visible area according to an embodiment of the present application;

[0030] Figure 5 is a schematic diagram of the card relationship of a method of rendering cards in a visible area according to an embodiment of the present application;

[0031] Figure 6 is a position diagram of a method of rendering cards in a visible area according to an embodiment of the present application;

[0032] Figure 7 It is another position schematic diagram of the card rendering method for the visible area according to an embodiment of the present application;

[0033] Figure 8 It is yet another position schematic diagram of the card rendering method for the visible area according to an embodiment of the present application;

[0034] Figure 9 It is a card rendering position diagram of the card rendering method for the visible area according to an embodiment of the present application;

[0035] Figure 10 It is an initialization model diagram of the card rendering method for the visible area according to an embodiment of the present application;

[0036] Figure 11 It is a structural block diagram of the card rendering device for the visible area according to an embodiment of the present application. Detailed implementation manners

[0037] In the following, embodiments of the present application will be described in detail with reference to the drawings and in conjunction with the embodiments.

[0038] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and do not necessarily need to be used to describe a specific order or sequence.

[0039] The method embodiments provided in the embodiments of the present application can be executed on a computer terminal or a similar computing device. Taking running on a computer terminal as an example, Figure 1 It is a hardware structural block diagram of a computer terminal of a card rendering method for a visible area according to an embodiment of the present application. As Figure 1 shown, the computer terminal may include one or more ( Figure 1 only one is shown in Figure 1 ) processors 102 (the processors 102 may include, but are not limited to, processing devices such as a microprocessor MCU or a programmable logic device FPGA) and a memory 104 for storing data. Among them, the above-mentioned computer terminal may further include a transmission device 106 for communication functions and an input / output device 108. Those of ordinary skill in the art can understand that, Figure 1 the structure shown in Figure 1 is only schematic and does not limit the structure of the above-mentioned computer terminal. For example, the computer terminal may further include more or fewer components than

[0040] The memory 104 can be used to store computer programs, for example, software programs and modules of application software, such as the computer program corresponding to the upgrade method of the card in the visible area in the embodiments of the present application. The processor 102 executes various functional applications and data processing by running the computer program stored in the memory 104, that is, implements the above-mentioned card rendering method in the visible area. The memory 104 can include a high-speed random access memory, and can also include a non-volatile memory, such as one or more magnetic storage devices, flash memories, or other non-volatile solid-state memories. In some instances, the memory 104 can further include a memory remotely set relative to the processor 102, and these remote memories can be connected to the card in the visible area through a network. Examples of the above network include but are not limited to the Internet, intranet, local area network, mobile communication network, and their combinations.

[0041] The transmission device 106 is used to receive or send data via a network. Specific examples of the above network can include a wireless network provided by a communication provider of a computer terminal. In one instance, the transmission device 106 includes a network adapter (abbreviated as NIC for Network Interface Controller), which can be connected to other network devices through a base station and thus communicate with the Internet. In one instance, the transmission device 106 can be a radio frequency (abbreviated as RF) module, which is used to communicate with the Internet wirelessly.

[0042] In this embodiment, a card rendering method in the visible area is provided, which is applied to the above computer terminal. Figure 2 is a flowchart of the card rendering method in the visible area according to the embodiments of the present application, as Figure 2 shown, the process includes the following steps:

[0043] Step S202, obtain card data of a second number of cards from the background database according to the first number of cards allowed to be placed in the visible area, and save the card data in the first card list, where the second number of cards is greater than the first number of cards, and the difference between the second number of cards and the first number of cards is less than a preset threshold;

[0044] Step S204, create two-dimensional data according to the first card list, where the two-dimensional data is used to save the total height of each column in the visible area and the card data included in each column;

[0045] Step S206, convert the two-dimensional data into a one-dimensional data queue, where the one-dimensional data queue is used to store the card data of each column in the two-dimensional data structure;

[0046] Step S208, screen out a second card list that meets the preset conditions from the one-dimensional data queue, and render the first cards included in the second card list to the visible area.

[0047] Through the above steps, obtain card data of a second number of cards from the background database according to the first number of cards allowed to be placed in the visible area, and save the card data in the first card list, where the second number of cards is greater than the first number of cards, and the difference between the second number of cards and the first number of cards is less than a preset threshold; create two-dimensional data according to the first card list, where the two-dimensional data is used to save the total height of each column in the visible area and the card data included in each column; convert the two-dimensional data into a one-dimensional data queue, where the one-dimensional data queue is used to store the card data of each column in the two-dimensional data structure; screen out a second card list that meets the preset conditions from the one-dimensional data queue, and render the first cards included in the second card list to the visible area. By adopting the above technical solution, the problem that in the related art, when rendering a large number of cards, the rendering speed in the card initialization stage is slow is solved, and the rendering speed of the cards in the visible area is effectively improved.

[0048] In an exemplary embodiment, obtaining card data of a second number of cards from the background database according to the first number of cards allowed to be placed in the visible area includes: determining the second number of cards m according to the following formula: , where n is the first number of cards, k is a first preset value, and b is a second preset value; obtain the card data of the second number of cards from the background database.

[0049] All card data is stored in the background database. Determine the number of cards allowed to be placed in the visible area, which is the first number of cards in this embodiment. According to the formula , determine the second number of cards m, obtain the card data of the second number of cards from the background database, and save the above card data in the first card list. It should be clear that n and m are positive integers, and m > n, k > 0, b > 0.

[0050] In the above embodiment, determine the second number of cards through the formula , obtain the card data of the second number of cards from the background database, and it must be ensured that the second number of cards is greater than the first number of cards to ensure that when a scrolling event occurs, the cards can be quickly rendered in the visible area. Optionally, assuming k is 2, n is 6, and b is 3, then m can be obtained as 15, which means that the number of cards allowed to be displayed in the visible area is 6, and 15 card data are obtained from the background database and stored in the first card list.

[0051] In an exemplary embodiment, creating two-dimensional data according to the first card list includes: determining the number of arrays included in the two-dimensional data according to the number of columns allowed to be displayed in the visible area, where the arrays correspond one-to-one with the columns in the visible area; determining the data included in each array from the first card list, where the data of each array includes: the total height of the column corresponding to each array and the card data included in the column corresponding to each array; creating the two-dimensional data according to the number of arrays and the data included in each array.

[0052] Create two-dimensional data according to the first card list, where the two-dimensional data is used to store the total height of each column and the card data included in each column. Optionally, assume that four columns of cards are displayed in the visible area. There are 3 cards in the first column, and each card has a height of 1 cm, so the height of the first column is 3 cm; there are 2 cards in the second column, and each card has a height of 1 cm, so the height of the second column is 2 cm; there are 4 cards in the third column, and each card has a height of 1 cm, so the height of the third column is 4 cm; there is 1 card in the fourth column, and each card has a height of 1 cm, so the height of the fourth column is 1 cm. Among them, the above-mentioned card data is all stored in the first card list. Determine the number of arrays included in the two-dimensional data according to the number of columns displayed in the visible area, that is, the two-dimensional data created in this embodiment contains four arrays, and each array contains the total height of the corresponding column and the card data of the corresponding column. For example, the first array contains the height of the first column, 3 cm, and the card data of the first column; the second array contains the height of the second column, 2 cm, and the card data of the second column; the third array contains the height of the third column, 4 cm, and the card data of the third column; the fourth array contains the height of the fourth column, 1 cm, and the card data of the fourth column.

[0053] In the above embodiment, determine the number of arrays included in the two-dimensional data according to the number of columns allowed to be displayed in the visible area, determine the data in each array through the first card list, and create the two-dimensional data according to the number of the above arrays and the data included in each array. Ensure that the data in the two-dimensional data corresponds one-to-one with the cards displayed in the visible area.

[0054] In an exemplary embodiment, converting the two-dimensional data into a one-dimensional data queue includes: creating an initial one-dimensional data queue, where the values in the initial one-dimensional data queue are all target values; traversing each array in the two-dimensional data to obtain the data corresponding to each array respectively; adding the data corresponding to each array to the initial one-dimensional data queue respectively to obtain the one-dimensional data queue.

[0055] Optionally, assume that there are four arrays in the two-dimensional data, and each array contains the total height of the corresponding column displayed in the visible area and the card data of the corresponding column. For example, [3, (card data of the first column)], [2, (card data of the second column)], [4, (card data of the third column)], [1, (card data of the fourth column)]. Traverse the above two-dimensional data to obtain the data contained in each array, and add the data in each array to the initial one-dimensional data queue, that is, [3, (card data of the first column), 2, (card data of the second column), 4, (card data of the third column), 1, (card data of the fourth column)]. It should be clear that the values in the initial one-dimensional data queue are all empty.

[0056] In the above embodiment, by creating an empty one-dimensional data queue, traversing each array in the two-dimensional data, and adding the arrays to the empty one-dimensional data queue, the conversion of the two-dimensional data into a one-dimensional data queue is realized. So as to subsequently screen out a second card list that meets the preset conditions from the one-dimensional data queue, and render the cards in the second card list to the visible area.

[0057] In an exemplary embodiment, screening out a second card list that meets the preset conditions from the one-dimensional data queue includes: obtaining the preset conditions corresponding to the visible area, where the preset conditions include a first preset condition and a second preset condition, where the first preset condition is used to indicate that the sum of the first distance of the first card and the height of the first card is greater than the starting position value of the visible area, and the first distance is the distance between the first card and the top of the visible area; the second preset condition is that the first distance is less than the ending position value of the visible area; screening out a second card list that meets the preset conditions from the one-dimensional data queue.

[0058] Optionally, assume that the distance between the card and the top of the visible area is y, the height of the card is h, the starting position value of the visible area is start, and the ending position value of the visible area is end. Then the first preset condition is y + h > start, and the second preset condition is y < end. Therefore, the preset condition can be obtained as y + h > start and y < end. Traverse the card data in the one-dimensional data queue to determine whether the sum of y and h of each card is greater than the starting position value of the visible area. In the case where the sum of y and h of the card is greater than the starting position value of the visible area, determine whether the y of these cards that meet the first preset condition is less than the ending position value of the visible area. Collect the cards that simultaneously meet the first preset condition and the second preset condition into the second card list.

[0059] In the above embodiments, the first preset condition and the second preset condition are defined, and the preset condition is obtained according to the first preset condition and the second preset condition. Cards that meet the preset condition are filtered out from the one-dimensional data queue, and these cards that meet the preset condition are collected into the second card list. To ensure that the cards in the second card list can all be displayed in the visible area.

[0060] In an exemplary embodiment, rendering a first card included in the second card list to the visible area includes: for each first card included in the second card list, obtaining the width allowed to be displayed in the visible area for each of the first cards, the height of each of the first cards, the first distance of each of the first cards from the top of the visible area, and the second distance of each of the first cards from the left side of the visible area; rendering each first card in the second card list to the visible area according to the width of each of the first cards, the height of each of the first cards, the first distance, and the second distance.

[0061] In an exemplary embodiment, obtaining the width allowed to be displayed in the visible area for each of the first cards includes: obtaining the total width of the visible area and the number of columns allowed to be displayed in the visible area; determining the width allowed to be displayed in the visible area for each of the first cards according to the total width and the number of columns.

[0062] Determine the card data, where the card data includes the card width, the card height, the distance of the card from the top of the visible area, i.e., the first card distance, and the distance of the card from the left side of the visible area, i.e., the second card distance. According to the width of the card and the first distance, determine the starting position value of the card in the horizontal direction. According to the height of the card and the second distance, determine the starting position value of the card in the vertical direction. After determining the position of each card, the card can be rendered to the visible area.

[0063] Among them, the card width is calculated through the width of the visible area and the number of columns allowed to be displayed in the visible area. It is not the actual width of the card, but the width allowed to be displayed in the visible area.

[0064] In the above embodiments, when the card meets the preset condition, the position of the card in the visible area is determined according to the card width, the card height, the distance of the card from the top of the visible area, and the distance of the card from the left side of the visible area, realizing the rendering of the card to the visible area.

[0065] In an exemplary embodiment, obtaining a first distance of each of the first cards from the top of the visible area includes: when the first card is the second card in any column in the visible area, obtaining a third distance from the upper end of the first card in the column to the top, a height of the first card, and a fourth distance between the lower end of the first card and the upper end of the second card, where the first card and the first card are adjacent cards in the same column; and determining the sum of the third distance, the height of the first card, and the fourth distance as the first distance.

[0066] Optionally, taking the first column of the visible area as an example. Denote the distance from the upper end of the first card in the first column to the top of the visible area as y1, the height of the first card as h1, and the distance between the lower end of the first card and the upper end of the second card as d. Then, the distance y2 from the second card to the top of the visible area can be obtained as y2 = y1 + h1 + d. By analogy, to determine the distance from the third card to the top of the visible area, it is necessary to obtain the distance y1 from the upper end of the first card to the top of the visible area, the height h1 of the first card, the distance d between the lower end of the first card and the upper end of the second card, the distance y2 from the upper end of the second card to the top of the visible area, the height h2 of the second card, and the distance d between the lower end of the second card and the upper end of the third card. Then, the distance y3 from the third card to the top of the visible area can be obtained as y3 = y1 + h1 + d + y2 + h2 + d.

[0067] It should be clear that the distance between adjacent cards in any column is fixed, that is, the distance between adjacent cards in the vertical direction is fixed. It can be understood that the distance between the lower end of the first card and the upper end of the second card in any column is equal to the distance between the lower end of the second card and the upper end of the third card, and is equal to the distance between the lower end of the third card and the upper end of the fourth card.

[0068] In the above embodiment, according to the distance from the upper end of the first card in any column to the top of the visible area, the height of the first card, and the distance between the lower end of the first card and the upper end of the second card, the distance from the upper end of the second card in any column to the top of the visible area is determined. So as to subsequently determine the position of the card in the visible area according to the distance from the upper end of the card to the top of the visible area.

[0069] In an exemplary embodiment, obtaining a second distance of each of the first cards from the left side of the visible area includes: when the first card is any card in the nth column in the visible area, obtaining a width w of the first card, and a fifth distance g between the left end of the any card and the right end of the card on the left side of the any card; and determining the second distance according to the width w and the fifth distance g, where both the w and the g are constants.

[0070] In an exemplary embodiment, determining the second distance according to the width w and the fifth distance g includes: determining the second distance p according to the following formula: , where n is a positive integer.

[0071] Optionally, the number of columns in the visible area is numbered sequentially from 1 from left to right. The first card is any card in the nth column in the visible area. The width w of the first card is calculated according to the width of the visible area and the number of columns displayed in the visible area. Determine the fifth distance g between the left end of any card and the right end of the card on the left side of any card, that is, the horizontal distance between two adjacent columns of cards. When the card width w, the fifth distance g, and the column number where the card is located are determined, according to the formula the distance between the card and the left side of the visible area is calculated. In particular, the distance between the card in the first column and the left side of the visible area is 0.

[0072] In the above embodiment, the fifth distance, which is the horizontal distance between cards in two adjacent columns, is clarified. The distance between the card and the left side of the visible area, that is, the second distance, is determined according to the card width w, the fifth distance g, and the column number where the card is located. So as to subsequently determine the position of the card in the visible area according to the distance between the upper end of the card and the top of the visible area.

[0073] In an exemplary embodiment, obtaining the height of each of the first cards includes: creating a temporary list for the first card list, where the card data in the first card list is stored in the temporary list; traversing the card data in the temporary list to obtain a temporary card; mounting the temporary card to a container element on an external page, and calling an external interface through the container element to obtain the height of the first card through the external interface.

[0074] In an exemplary embodiment, traversing the card data in the temporary list to obtain a temporary card includes: setting a temporary variable for the temporary list; starting the temporary list when controlling the value of the temporary variable to be true; when the temporary list is successfully started, traversing the card data in the temporary list to obtain a temporary card.

[0075] In an exemplary embodiment, after obtaining the height of the first card by calling an external interface through the container element, the method further includes: controlling the value of the temporary variable to be false; closing the started temporary list when controlling the value of the temporary variable to be false.

[0076] Create a temporary list and temporary variables. The temporary list stores the card data in the first card list. The purpose of this step is to provide an operable data copy for the subsequent operations. The temporary variables are used to control the start and stop of the temporary list. When the temporary variable is set to true, the temporary list is displayed and started, and the card data in the temporary list is traversed to render temporary cards. The temporary cards are mounted into the container element of the external page. This container element is an HTML element that will serve as the parent element of the temporary cards for displaying the cards on the web page. The mounting operation usually involves DOM operations such as appendChild or innerHTML, etc. An external interface is called through the container element. This interface includes but is not limited to a JavaScript function or an API call to obtain the height of the cards corresponding to the card data in the temporary list. After obtaining the height of the cards corresponding to the card data in the temporary list, the temporary variable is set to false to close and hide the temporary list.

[0077] In the above embodiments, the start or stop of the temporary list is controlled by setting the value of the temporary variable. When the temporary list is started, the card data in the temporary list is traversed to render temporary cards, and an external interface is called by mounting the temporary cards into the container element of the external page to obtain the height of the cards, so as to determine the position of the cards in the visible area according to the distance between the upper end of the cards and the top of the visible area subsequently.

[0078] In an exemplary embodiment, after obtaining the height of each of the first cards, the method further includes: creating a key-value pair mapping, where the keys in the key-value pair mapping store the identification information corresponding to all the cards in the first card list respectively, and the values in the key-value pair mapping store the heights corresponding to all the cards respectively; replacing the height corresponding to each of the first cards saved in the key-value pair mapping with the height of each of the first cards obtained.

[0079] Each card has unique identification information. A key-value pair mapping is created. Its keys are used to store the identification information of the cards. For example, assume there are 3 cards in the key-value pair mapping, and their keys are card1, card2, and card3. The values are used to store the height h of the cards. At initialization, the height h of all cards is set to 0. When the height of the cards is obtained, according to the identification information of the cards, the height corresponding to the cards stored in the key-value pair mapping is determined, and the height stored in the key-value pair mapping is replaced with the obtained height of the cards.

[0080] In the above embodiments, by creating a key-value pair mapping to store the identification information and the height corresponding to each card in the first card list respectively, after obtaining the height of the card, the height corresponding to the card stored in the key-value pair mapping is determined through the identification information of the card, and the height stored in the key-value pair mapping is replaced with the obtained height of the card. The preservation of the card height is realized.

[0081] In an exemplary embodiment, after rendering the first card included in the second card list to the visible area, the method further includes: when the scrolling event of the visible area is in a bottom-touch state, obtaining a second card to be rendered to the visible area; determining the column with the minimum height from the visible area, and rendering the second card to the corresponding partially visible area of the column with the minimum height.

[0082] When the scrolling event of the visible area is in a bottom-touch state, that is, when the visible area scrolls to the current column with the minimum height, repeat steps S202 to S208. Obtain the card data of the second number of cards from the background database according to the first number of cards allowed to place cards in the visible area, and save the card data in the first card list. Create two-dimensional data according to the first card list and convert the two-dimensional data into a one-dimensional data queue. Screen out the second card list that meets the preset conditions from the one-dimensional data queue, and render the first card included in the second card list to the corresponding partially visible area of the column with the minimum height.

[0083] In the above embodiments, when the scrolling event of the visible area is in a bottom-touch state, obtain the card data of the second number of cards from the background database again, obtain the height of the card corresponding to the card data, and determine the preset conditions to screen out the cards that meet the preset conditions, and render the cards that meet the preset conditions to the corresponding partially visible area of the column with the minimum height. The effective monitoring of the scrolling event of the visible area is realized, and the continuous rendering of cards in the visible area is ensured.

[0084] In an exemplary embodiment, after rendering the second card to the corresponding partially visible area of the column with the minimum height, the method further includes: determining the first height included in the column with the minimum height in the two-dimensional data, and the second height of the partially visible area; updating the first height in the two-dimensional data to the second height.

[0085] Optionally, assume that the first height included in the column with the minimum height in the two-dimensional data is 3 cm, and a card is rendered in the corresponding partially visible area of the column with the minimum height, and the height of the card is 8 cm. Then the height of the current column with the minimum height is updated to 11 cm, that is, the second height, and the first height in the two-dimensional data is updated to the second height.

[0086] In the above embodiments, when rendering a card in a partial visible area corresponding to the minimum height column, the height of the current minimum height column, i.e., the second height, is recalculated, and the first height of the minimum height column originally stored in the two-dimensional data is replaced with the second height. This ensures that the total height of the corresponding column stored in the two-dimensional data can be updated in a timely manner.

[0087] Figure 3 It is a non-scrolling state diagram of the card rendering method for the visible area according to an embodiment of the present application. As Figure 3 shown, it specifically includes the following contents:

[0088] The solid line frame is used to set the scroll bar, and the visible area is shown by a dashed line frame. The visible area is moved up and down through a scrolling operation. The starting position value start is at the top of the solid line frame. When the visible area moves upward, the starting position value start is the top offset of the scroll bar, which is the distance between the top of the visible area and the top of the solid line frame. The ending position value end is at the bottom of the solid line frame. When the visible area moves upward, the ending position value end is the distance between the bottom of the solid line frame and the top of the visible area, that is, the top offset of the scroll bar + the height of the solid line frame. In the initial state, that is, when the page has not been scrolled, the top offset of the scroll bar is 0, which means the starting position value start is 0, and the ending position value end is the height of the visible area.

[0089] Figure 4 It is a scrolling state diagram of the card rendering method for the visible area according to an embodiment of the present application. As Figure 4 shown, it specifically includes the following contents:

[0090] The starting position value start is at the top of the solid line frame. When the visible area moves upward, the starting position value start is the top offset of the scroll bar, which is the distance between the top of the visible area and the top of the solid line frame. The ending position value end is at the bottom of the solid line frame. When the visible area moves upward, the ending position value end is the distance between the bottom of the solid line frame and the top of the visible area, that is, the top offset of the scroll bar + the height of the solid line frame. When the page is scrolled and the visible area moves upward, the starting position value start is the top offset of the scroll bar, and the ending position value end is the top offset of the scroll bar + the height of the visible area.

[0091] Figure 5 It is a schematic diagram of the card relationship of the card rendering method for the visible area according to an embodiment of the present application. As Figure 5 shown, it specifically includes the following contents:

[0092] Each card has unique identification information. A key-value pair mapping is created, where the key is used to store the identification information of the card, and the value is used to store the height h of the card. At initialization, the height h of all cards is set to 0. A temporary list and a temporary variable are created. The temporary list stores the card data in the first card list, and the temporary variable is used to control the start and close of the temporary list. When the temporary variable is set to true, the temporary list is started, and the card data in the temporary list is traversed to render the temporary cards. The temporary cards are mounted to the container element of the external page, and an external interface is called through the container element to obtain the height of the card corresponding to the card data in the temporary list. After obtaining the height of the card corresponding to the card data in the temporary list, the temporary variable is set to false to close the temporary list. In this embodiment, y is the distance between the card and the top of the visible area, and h is the real height of the card. Taking the card 6 in the first column as an example, it can be observed that the y value of card 6 = the y value of card 1 + the h value of card 1.

[0093] Figure 6 is a schematic diagram of the position of the card rendering method for the visible area according to an embodiment of the present application, as Figure 6 shown, and specifically includes the following content:

[0094] According to Figure 6 、 Figure 7 and Figure 8 shown in the embodiment, the preset conditions are determined. It should be clear that the real height of the card has been determined before determining the preset conditions. In this embodiment, six cards of equal width are placed in the visible area. When scrolling, the cards that have exceeded the visible area are displayed as dotted lines and are not visible in the actual visible area, and the cards that have not exceeded the visible area are displayed as solid lines. Y is the distance between the card and the top of the visible area, and h is the real height of the card. When taking card 1 as the target card, it can be observed that when y + h = start, the target card just disappears from the visible area. When taking card 6 as the target card, it can be observed that when y + h > start, the target card is displayed in the visible area.

[0095] Figure 7 is another schematic diagram of the position of the card rendering method for the visible area according to an embodiment of the present application, as Figure 7 shown, and specifically includes the following content:

[0096] In Figure 6 the shown embodiment, when continuing to scroll, taking card 1 as the target card, it can be observed that when y + h < start, the target card disappears from the visible area. When taking card 6 as the target card, it can be observed that when y + h <= start, the target card disappears from the view range of the visible area. Therefore, according to Figure 6 and Figure 7From the embodiments shown, a conclusion can be drawn that when the visible area moves upward and the card is originally displayed in the visible area, the card will be displayed in the visible area only when the card satisfies the condition of y + h > start.

[0097] Figure 8 is another position schematic diagram of the card rendering method for the visible area according to the embodiments of the present application. As Figure 8 shown, it specifically includes the following content:

[0098] In Figure 6 and Figure 7 In the embodiments shown, the card is originally in the visible area. Therefore, the situation where the card is not in the visible area needs to be considered, that is, the situation of this embodiment. In this embodiment, the top of the visible area is at the bottom of the solid line box, which means that the cards placed in the visible area are all at the bottom of the solid line box. For any card in the visible area, when y >= end, the corresponding card disappears from the visible area, that is, when y < end, the corresponding card is displayed in the visible area. Therefore, comprehensively Figure 6 、 Figure 7 and Figure 8 From the embodiments shown, it can be known that when y + h > start and y < end, the corresponding card will be displayed within the view range of the visible area. y + h > start and y < end are the preset conditions for the card to be displayed in the visible area.

[0099] Figure 9 is the card rendering position diagram of the card rendering method for the visible area according to the embodiments of the present application. As Figure 9 shown, it specifically includes the following content:

[0100] According to the width of the visible area and the number of columns displayed in the visible area, calculate the width w of the card. Assume that the index value of the column to which the current card belongs is n, that is, the current card is in the nth column with the smallest height, and the interval between cards is g. Then the distance from the left side of the visible area at this time is .

[0101] In this embodiment, card 6 is the target card to be added to the visible area. Before adding card 6, first determine the column with the smallest height from the two-dimensional data. In this embodiment, the column with the smallest height is the first column. Therefore, the index value of the column to which card 6 belongs is 1. First, obtain the last card in the first column, which is card 1. According to Figure 5The relational expression obtained in the illustrated embodiment: the y value of card 6 = the y value of card 1 + the h value of card 1, and the y value of card 6 is calculated. Since card 6 is in the first column, according to the above-obtained calculation formula, its distance from the left side of the visible area is 0. The position layout of the card in the visible area is determined based on the distance of the card from the left side of the visible area and the distance y of the card from the top of the visible area.

[0102] Figure 10 is the initialization model diagram of the card rendering method for the visible area according to the embodiment of the present application, as Figure 10 shown, and specifically includes the following content:

[0103] In the initialization template, the solid line box is used to set the scroll bar, and relative positioning is enabled for the visible area, which is usually used to store a group of cards arranged according to specific rules. When initializing, the cards are first uniformly positioned at the upper left corner.

[0104] After the initialization template, determine the number of cards allowed to be placed in the visible area. Then, request k times the number of card data from the background database each time, and create a first card list to store the card data obtained from the background database. When scrolling to the column with the minimum height displayed in the visible area, obtain new card data from the background database and render the cards to the corresponding partial visible area of the minimum height column.

[0105] Through the description of the above embodiments, those skilled in the art can clearly understand that the method according to the above embodiments can be implemented by means of software plus a necessary general hardware platform. Of course, it can also be implemented by hardware, but in many cases, the former is a better implementation method. Based on such an understanding, the technical solution of the present application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), including several instructions to enable a terminal device (which can be a mobile phone, computer, server, or network device, etc.) to execute the methods described in various embodiments of the present application.

[0106] In this embodiment, a card rendering device for the visible area is also provided. This system is used to implement the above embodiments and preferred implementation manners, and those that have been described will not be repeated. As used below, the term "module" can be a combination of software and / or hardware that can achieve a predetermined function. Although the systems described in the following embodiments are preferably implemented in software, implementation in hardware, or a combination of software and hardware is also possible and contemplated.

[0107] Figure 11 is the structural block diagram of the card rendering device for the visible area according to the embodiment of the present application, as Figure 11 shown, and this device includes:

[0108] An obtaining module 10 is configured to obtain card data of a second card quantity from a background database according to a first card quantity allowed to place cards within a visible area, and save the card data in a first card list, where the second card quantity is greater than the first card quantity, and a difference between the second card quantity and the first card quantity is less than a preset threshold;

[0109] A creating module 12 is configured to create two-dimensional data according to the first card list, where the two-dimensional data is used to save a height of each column in the visible area and card data included in each column;

[0110] A converting module 14 is configured to convert the two-dimensional data into a one-dimensional data queue, where the one-dimensional data queue is used to store card data of each column in the two-dimensional data structure;

[0111] A rendering module 16 is configured to screen out a second card list meeting a preset condition from the one-dimensional data queue, and render a first card included in the second card list to the visible area.

[0112] In an embodiment of the present application, card data of a second card quantity is obtained from a background database according to a first card quantity allowed to place cards within a visible area, and the card data is saved in a first card list, where the second card quantity is greater than the first card quantity, and a difference between the second card quantity and the first card quantity is less than a preset threshold; two-dimensional data is created according to the first card list, where the two-dimensional data is used to save a total height of each column in the visible area and card data included in each column; the two-dimensional data is converted into a one-dimensional data queue, where the one-dimensional data queue is used to store card data of each column in the two-dimensional data structure; a second card list meeting a preset condition is screened out from the one-dimensional data queue, and a first card included in the second card list is rendered to the visible area. By adopting the above technical solution, the problem that in the related art, the rendering speed is slow in the card initialization stage when rendering a large number of cards is solved, and the rendering speed of the cards in the visible area is effectively improved.

[0113] In an exemplary embodiment, the obtaining module 10 is further configured to determine the second card quantity m according to the following formula: , where n is the first card quantity, k is a first preset value, and b is a second preset value; obtain the card data of the second card quantity from the background database.

[0114] In an exemplary embodiment, the creation module 12 is further configured to determine the number of arrays included in the two-dimensional data according to the number of columns allowed to be displayed in the visual area, where the arrays correspond one-to-one with the columns in the visual area; determine the data included in each array from the first card list, where the data of each array includes: the total height of the column corresponding to each array and the card data included in the column corresponding to each array; create the two-dimensional data according to the number of arrays and the data included in each array.

[0115] In an exemplary embodiment, the conversion module 14 is further configured to create an initial one-dimensional data queue, where the values in the initial one-dimensional data queue are all target values; traverse each array in the two-dimensional data to obtain the data corresponding to each array respectively; add the data corresponding to each array to the initial one-dimensional data queue respectively to obtain the one-dimensional data queue.

[0116] In an exemplary embodiment, the rendering module 16 is further configured to obtain preset conditions corresponding to the visual area, where the preset conditions include a first preset condition and a second preset condition, where the first preset condition is used to indicate that the sum of the first distance of the first card and the height of the first card is greater than the starting position value of the visual area, and the first distance is the distance between the first card and the top of the visual area; the second preset condition is that the first distance is less than the ending position value of the visual area; filter out a second card list that meets the preset conditions from the one-dimensional data queue.

[0117] In an exemplary embodiment, the rendering module 16 is further configured to, for each first card included in the second card list, obtain the width allowed to be displayed in the visual area of each first card, the height of each first card, the first distance between each first card and the top of the visual area, and the second distance between each first card and the left side of the visual area; render each first card in the second card list to the visual area according to the width of each first card, the height of each first card, the first distance, and the second distance.

[0118] In an exemplary embodiment, the rendering module 16 is further configured to obtain the total width of the visual area and the number of columns allowed to be displayed in the visual area; determine the width allowed to be displayed in the visual area of each first card according to the total width and the number of columns.

[0119] In an exemplary embodiment, the rendering module 16 is further configured to, when the first card is the second card in any column in the visible area, obtain a third distance from the upper end of the first card in the column to the top, a height of the first card, and a fourth distance between the lower end of the first card and the upper end of the second card, where the first card and the first card are adjacent cards in the same column; determine the sum of the third distance, the height of the first card, and the fourth distance as the first distance.

[0120] In an exemplary embodiment, the rendering module 16 is further configured to, when the first card is any card in the nth column in the visible area, obtain a width w of the first card, and a fifth distance g between the left end of the any card and the right end of the card on the left side of the any card; determine the second distance according to the width w and the fifth distance g, where both w and g are constants.

[0121] In an exemplary embodiment, the rendering module 16 is further configured to determine the second distance p according to the following formula: , where n is a positive integer.

[0122] In an exemplary embodiment, the rendering module 16 is further configured to create a temporary list for the first card list, where the card data in the first card list is stored in the temporary list; traverse the card data in the temporary list to obtain a temporary card; mount the temporary card into a container element of an external page, and call an external interface through the container element to obtain the height of the first card through the external interface.

[0123] In an exemplary embodiment, the rendering module 16 is further configured to set a temporary variable for the temporary list; start the temporary list when controlling the value of the temporary variable to be true; traverse the card data in the temporary list to obtain a temporary card when successfully starting the temporary list.

[0124] In an exemplary embodiment, the rendering module 16 is further configured to control the value of the temporary variable to be false; close the started temporary list when controlling the value of the temporary variable to be false.

[0125] In an exemplary embodiment, the rendering module 16 is further configured to create a key-value pair mapping, where the keys in the key-value pair mapping store the identification information corresponding to all the cards in the first card list, and the values in the key-value pair mapping store the heights corresponding to all the cards; replace the height corresponding to each first card saved in the key-value pair mapping with the height of each obtained first card.

[0126] In an exemplary embodiment, the rendering module 16 is further configured to, when the scrolling event of the visible area is in a bottom-touch state, obtain a second card to be rendered to the visible area; determine the column with the minimum height from the visible area, and render the second card to the corresponding partially visible area of the column with the minimum height.

[0127] In an exemplary embodiment, the rendering module 16 is further configured to determine a first height included in the column with the minimum height in the two-dimensional data, and a second height of the partially visible area; update the first height in the two-dimensional data to the second height.

[0128] It should be noted that the above-mentioned various modules can be implemented by software or hardware. For the latter, it can be implemented in the following ways, but not limited thereto: the above-mentioned modules are all located in the same processor; or, the above-mentioned various modules are respectively located in different processors in any combination form.

[0129] An embodiment of the present application further provides a computer-readable storage medium, in which a computer program is stored, and the computer program is configured to execute the steps in any one of the above method embodiments when running.

[0130] Optionally, in this embodiment, the above storage medium can be configured to store program codes for executing the following steps:

[0131] S1. Obtain card data of a second number of cards from the background database according to the first number of cards allowed to be placed in the visible area, and save the card data in a first card list, where the second number of cards is greater than the first number of cards, and the difference between the second number of cards and the first number of cards is less than a preset threshold;

[0132] S2. Create two-dimensional data according to the first card list, where the two-dimensional data is used to save the total height of each column and the card data included in each column in the visible area;

[0133] S3. Convert the two-dimensional data into a one-dimensional data queue, where the one-dimensional data queue is used to store the card data of each column in the two-dimensional data structure;

[0134] S4. Screen out a second card list that meets the preset conditions from the one-dimensional data queue, and render the first cards included in the second card list to the visible area.

[0135] In an exemplary embodiment, the above computer-readable storage medium may include, but is not limited to: various media such as USB flash drives, read-only memories (ROMs), random access memories (RAMs), external hard drives, magnetic disks, or optical discs that can store computer programs.

[0136] An embodiment of the present application further provides an electronic device, including a memory and a processor. A computer program is stored in the memory, and the processor is configured to run the computer program to execute the steps in any one of the above method embodiments.

[0137] Optionally, in this embodiment, the above processor may be configured to execute the following steps through a computer program:

[0138] S1. Obtain card data of a second number of cards from a background database according to a first number of cards allowed to be placed in a visible area, and save the card data in a first card list, where the second number of cards is greater than the first number of cards, and the difference between the second number of cards and the first number of cards is less than a preset threshold;

[0139] S2. Create two-dimensional data according to the first card list, where the two-dimensional data is used to save the total height of each column and the card data included in each column in the visible area;

[0140] S3. Convert the two-dimensional data into a one-dimensional data queue, where the one-dimensional data queue is used to store the card data of each column in the two-dimensional data structure;

[0141] S4. Screen out a second card list that meets preset conditions from the one-dimensional data queue, and render the first cards included in the second card list to the visible area.

[0142] An embodiment of the present application further provides a computer program product. The above computer program product includes a computer program, and when the computer program is executed by a processor, it implements the steps in any one of the above method embodiments.

[0143] Optionally, in this embodiment, the above computer program may be configured to execute the following steps through a computer program:

[0144] S1. Obtain card data of a second number of cards from a background database according to a first number of cards allowed to be placed in a visible area, and save the card data in a first card list, where the second number of cards is greater than the first number of cards, and the difference between the second number of cards and the first number of cards is less than a preset threshold;

[0145] S2. Create two-dimensional data according to the first card list, where the two-dimensional data is used to save the total height of each column in the visible area and the card data included in each column;

[0146] S3. Convert the two-dimensional data into a one-dimensional data queue, where the one-dimensional data queue is used to store the card data of each column in the two-dimensional data structure;

[0147] S4. Screen out a second card list that meets the preset conditions from the one-dimensional data queue, and render the first cards included in the second card list to the visible area.

[0148] Specific examples in this embodiment may refer to the examples described in the above embodiments and exemplary embodiments, and will not be elaborated here.

[0149] Obviously, those skilled in the art should understand that the above-mentioned modules or steps of the present application can be implemented by a general-purpose computing device. They can be concentrated on a single computing device or distributed on a network composed of multiple computing devices. They can be implemented by program codes executable by the computing device. Thus, they can be stored in a storage device and executed by the computing device. And in some cases, the steps shown or described can be executed in a different order from here, or they can be separately made into individual integrated circuit modules, or multiple modules or steps among them can be made into a single integrated circuit module to implement. In this way, the present application is not limited to any specific combination of hardware and software.

[0150] The above are only the preferred embodiments of the present application and are not used to limit the present application. For those skilled in the art, the present application can have various changes and modifications. Any modification, equivalent replacement, improvement, etc. made within the principle of the present application shall be included in the protection scope of the present application.

Claims

1. A method for rendering a card in a visible area, characterized in that, Comprising: Obtain the card data of the second card quantity from the background database according to the first card quantity allowed to place cards within the visible area, and save the card data in the first card list, wherein the second card quantity is greater than the first card quantity, and the difference between the second card quantity and the first card quantity is less than a preset threshold; Create two-dimensional data according to the first card list, wherein the two-dimensional data is used to save the total height of each column in the visible area and the card data included in each column; Convert the two-dimensional data into a one-dimensional data queue, wherein the one-dimensional data queue is used to store the card data of each column in the two-dimensional data; Screen out a second card list that meets the preset conditions from the one-dimensional data queue, and render the first cards included in the second card list to the visible area; Wherein, rendering the first cards included in the second card list to the visible area includes: For each first card included in the second card list, obtain the width allowed to be displayed in the visible area of each first card, the height of each first card, the first distance of each first card from the top of the visible area, and the second distance of each first card from the left side of the visible area; Render each first card in the second card list to the visible area according to the width of each first card, the height of each first card, the first distance, and the second distance.

2. The method according to claim 1, wherein Obtaining the card data of the second card quantity from the background database according to the first card quantity allowed to place cards within the visible area includes: Determine the second card quantity m according to the following formula: , where n is the first card quantity, k is a first preset value, and b is a second preset value; Obtain the card data of the second card quantity from the background database.

3. The method according to claim 1, characterized in that, Creating two-dimensional data according to the first card list includes: Determine the number of arrays included in the two-dimensional data according to the number of columns allowed to be displayed in the visible area, wherein the arrays correspond one by one to the columns in the visible area; Determine the data included in each array from the first card list, wherein the data of each array includes: the total height of the column corresponding to each array and the card data included in the column corresponding to each array; Create the two-dimensional data according to the number of arrays and the data included in each array.

4. The method according to claim 1, wherein Converting the two-dimensional data into a one-dimensional data queue includes: Create an initial one-dimensional data queue, wherein the values in the initial one-dimensional data queue are all target values; Traverse each array in the two-dimensional data to obtain the data corresponding to each array respectively; Add the data corresponding to each array respectively to the initial one-dimensional data queue to obtain the one-dimensional data queue.

5. The method according to claim 1, wherein Screening out a second card list that meets the preset conditions from the one-dimensional data queue includes: Obtain the preset conditions corresponding to the visible area, where the preset conditions include a first preset condition and a second preset condition. The first preset condition is used to indicate that the sum of the first distance of the first card and the height of the first card is greater than the starting position value of the visible area, and the first distance is the distance between the first card and the top of the visible area; the second preset condition is that the first distance is less than the ending position value of the visible area. Filter out a second card list that meets the preset conditions from the one-dimensional data queue.

6. The method according to claim 1, wherein Obtain the width allowed to be displayed in the visible area for each of the first cards, including: Obtain the total width of the visible area and the number of columns allowed to be displayed in the visible area; Determine the width allowed to be displayed in the visible area for each of the first cards according to the total width and the number of columns.

7. The method according to claim 1, wherein Obtain the first distance of each of the first cards from the top of the visible area, including: In the case where the first card is the second card in any column in the visible area, obtain the third distance from the top of the upper end of the first card in the column, the height of the first card, and the fourth distance between the lower end of the first card and the upper end of the second card, where the first card and the first card are adjacent cards in the same column; Determine the sum value of the third distance, the height of the first card, and the fourth distance as the first distance.

8. The method according to claim 1, wherein Obtain the second distance of each of the first cards from the left side of the visible area, including: In the case where the first card is any card in the nth column in the visible area, obtain the width w of the first card and the fifth distance g between the left end of the card and the right end of the card on the left side of the card; Determine the second distance according to the width w and the fifth distance g, where both w and g are constants.

9. The method according to claim 8, characterized in that, Determine the second distance according to the width w and the fifth distance g, including: Determine the second distance p according to the following formula: , where n is a positive integer.

10. The method according to claim 1, wherein Obtain the height of each of the first cards, including: Create a temporary list for the first card list, where the card data in the first card list is stored in the temporary list; Traverse the card data in the temporary list to obtain a temporary card; Mount the temporary card to the container element of the external page, and call an external interface through the container element to obtain the height of the first card through the external interface.

11. The method according to claim 10, wherein Traverse the card data in the temporary list to obtain a temporary card, including: Set a temporary variable for the temporary list; In the case where the value of the temporary variable is controlled to be true, start the temporary list; In the case where the temporary list is successfully started, traverse the card data in the temporary list to obtain a temporary card.

12. The method according to claim 10, wherein After obtaining the height of the first card through the external interface by calling the external interface through the container element, the method further includes: Control the value of the temporary variable to be false; In the case where the value of the temporary variable is controlled to be false, close the started temporary list.

13. The method according to claim 1, wherein After obtaining the height of each of the first cards, the method further includes: Creating a key-value pair mapping, wherein the keys of the key-value pair mapping store the identification information corresponding to all the cards in the first card list respectively, and the values of the key-value pair mapping store the heights corresponding to all the cards respectively; Replacing the height corresponding to each of the first cards saved in the key-value pair mapping with the height of each of the first cards obtained.

14. The method according to claim 1, characterized in that After rendering the first cards included in the second card list to the visible area, the method further includes: When the scroll event of the visible area is in the bottom-touch state, obtaining the second cards to be rendered to the visible area; Determining the column with the minimum height from the visible area and rendering the second cards to the corresponding partial visible area of the column with the minimum height.

15. The method according to claim 14, wherein After rendering the second cards to the corresponding partial visible area of the column with the minimum height, the method further includes: Determining the first height included in the column with the minimum height in the two-dimensional data and the second height of the partial visible area; Updating the first height in the two-dimensional data to the second height.

16. A card rendering device for a visible area, characterized in that including: An obtaining module, configured to obtain card data of a second card quantity from a background database according to the first card quantity allowed to place cards in a visible area, and save the card data in a first card list, wherein the second card quantity is greater than the first card quantity, and the difference between the second card quantity and the first card quantity is less than a preset threshold; A creating module, configured to create two-dimensional data according to the first card list, wherein the two-dimensional data is used to save the height of each column in the visible area and the card data included in each column; A converting module, configured to convert the two-dimensional data into a one-dimensional data queue, wherein the one-dimensional data queue is used to store the card data of each column in the two-dimensional data; A rendering module, configured to screen out a second card list that meets a preset condition from the one-dimensional data queue, and render the first cards included in the second card list to the visible area; Wherein, the rendering module is further configured to, for each first card included in the second card list, obtain the width allowed to be displayed in the visible area of each first card, the height of each first card, the first distance of each first card from the top of the visible area, and the second distance of each first card from the left side of the visible area; rendering each first card in the second card list to the visible area according to the width of each first card, the height of each first card, the first distance, and the second distance.

17. A computer-readable storage medium, characterized in that, A computer program is stored in the computer-readable storage medium, wherein when the computer program is executed by a processor, the steps of the method described in any one of claims 1 to 15 are implemented.

18. An electronic device, comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, When the processor executes the computer program, the steps of the method described in any one of claims 1 to 15 are implemented.

19. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by the processor, the steps of the method described in any one of claims 1 to 15 are implemented.

Images