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

Abstract

The embodiment of the invention provides a card rendering method and device for a visual area, a storage medium, electronic equipment and a computer program product, and the method comprises the steps: obtaining card data of a second card number from a background database according to a first card number allowing the placement of cards in the visual area, the number of the second cards is larger than the number of the first cards, and the difference value between the number of the second cards and the number of the first cards is smaller than a preset threshold value; two-dimensional data is created according to the first card list, and the two-dimensional data is used for storing the total height of each column in the visual area and card data included in each column; converting the two-dimensional data into a one-dimensional data queue, wherein the one-dimensional data queue is used for storing card data of each column in the two-dimensional data structure; and screening out a second card list meeting a preset condition from the one-dimensional data queue, and rendering the first card included in the second card list to the visual area.

Description

Technical Field

[0001] Embodiments of the present application relate to the field of communications, and more specifically, to a method and device for rendering a card 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 laid out in the 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, these tens of thousands of cards need to be re-layout. 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 the related art, when rendering a large number of cards, an effective solution has not yet been proposed for the problem that the rendering speed is slow in the card initialization phase. Summary of the invention

[0004] The embodiments of the present application provide a method and device 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 one embodiment of the present application, a card rendering method for 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, wherein 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, 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; converting 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; filtering out a second card list that meets preset conditions from the one-dimensional data queue, and rendering the first card included in the second card list to the visible area.

[0006] In an exemplary embodiment, acquiring 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 includes: determining the second number of cards m according to the following formula: , wherein n is the first number of cards, k is a first preset value, and b is a second preset value; and the card data of the second number of cards are obtained from the background database.

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

[0008] In an exemplary embodiment, the two-dimensional data is converted into a one-dimensional data queue, including: creating an initial one-dimensional data queue, wherein 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; and adding the data corresponding to each array to the initial one-dimensional data queue to obtain the one-dimensional data queue.

[0009] In an exemplary embodiment, filtering out a second card list that meets preset conditions from the one-dimensional data queue includes: obtaining preset conditions corresponding to the visible area, wherein the preset conditions include a first preset condition and a second preset condition, wherein the first preset condition is used to indicate that the sum of a first distance of the first card and a height of the first card is greater than a 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 an ending position value of the visible area; filtering out a second card list that meets the preset conditions 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 for display of each first card in the visible area, 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 that each of the first cards is allowed to be displayed in the visible area includes: obtaining the total width of the visible area and the number of columns that are allowed to be displayed in the visible area; and determining the width that each of the first cards is allowed to be displayed in the visible area based on the total width and the number of columns.

[0012] In an exemplary embodiment, obtaining a first distance of each first card 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 top of the first card in any column, the height of the first card, and a fourth distance between the bottom of the first card and the top of the second card, wherein the first card and the first card are adjacent cards both located in any column; and 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 the second distance of each first card 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 the width w of the first card and the fifth distance g between the left end of any card and the right end of the card to the left of any card; determining the second distance according to the width w and the fifth distance g, wherein w and g are both constants.

[0014] 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: , wherein n is a positive integer.

[0015] In an exemplary embodiment, obtaining the height of each first card includes: creating a temporary list for the first card list, wherein the temporary list stores the card data in the first card list; traversing the card data in the temporary list to obtain temporary cards; mounting the temporary cards in a container element of 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, the card data in the temporary list is traversed to obtain a temporary card, including: setting a temporary variable for the temporary list; starting the temporary list when the value of the temporary variable is controlled to be true; and when the temporary list is successfully started, traversing the card data in the temporary list to obtain a temporary card.

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

[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 key of the key-value pair mapping stores identification information corresponding to all the cards in the first card list, and the value of the key-value pair mapping stores the heights corresponding to all the cards; and replacing the height corresponding to each of the first cards stored 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 card included in the second card list to the visible area, the method further includes: when the scroll event of the visible area is in a bottoming state, obtaining the second card to be rendered to the visible area; determining the minimum height column from the visible area, and rendering the second card to the partial visible area corresponding to the minimum height column.

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

[0021] According to another embodiment of the present application, a card rendering device for a visible area is also provided, including: an acquisition module, used to acquire 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 save the card data in a first card list, wherein 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; a creation module, used 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 conversion module, used 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, used to filter out a second card list that meets preset conditions from the one-dimensional data queue, and render the first card included in the second card list to the visible area.

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

[0023] According to another embodiment of the present application, an electronic device is provided, including a memory and a processor, wherein the memory stores a computer program, 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 provided, including a computer program, and when the computer program is executed by a processor, the steps in the above method embodiment are implemented.

[0025] Through this application, according to the first number of cards that are allowed to be placed in the visible area, the card data of the second number of cards is obtained from the background database, and the card data is saved in the first card list, wherein 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; two-dimensional data is created 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; the two-dimensional data is converted 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; the second card list that meets the preset conditions is filtered out from the one-dimensional data queue, and the first card included in the second card list is rendered to the visible area. The above technical solution solves the problem of slow rendering speed in the card initialization stage when rendering a large number of cards in the related technology, and effectively improves the rendering speed of cards in the visible area. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] Figure 1 It is a hardware structure block diagram of a computer terminal of a card rendering method in a visible area of ​​an embodiment of the present application;

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

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

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

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

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

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

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

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

[0035] Fig.10 It is an initialization model diagram of a card rendering method in a visible area according to an embodiment of the present application;

[0036] Fig.11 It is a structural block diagram of a card rendering device in a visible area according to an embodiment of the present application. DETAILED DESCRIPTION

[0037] The embodiments of the present application will be described in detail below with reference to the accompanying drawings and in combination with the embodiments.

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

[0039] The method embodiments provided in the embodiments of the present application can be executed in a computer terminal or a similar computing device. Taking running on a computer terminal as an example, Figure 1 1 is a hardware structure block diagram of a computer terminal for a card rendering method in a visible area according to an embodiment of the present application. Figure 1 As shown, the computer terminal may include one or more ( Figure 1 Only one is shown in the figure) a processor 102 (the processor 102 may include but is not limited to a processing device such as a microprocessor MCU or a programmable logic device FPGA) and a memory 104 for storing data, wherein the above-mentioned computer terminal may also include a transmission device 106 and an input and output device 108 for communication functions. It can be understood by those skilled in the art that Figure 1 The structure shown is only for illustration and does not limit the structure of the above-mentioned computer terminal. Figure 1 More or fewer components as shown, or with Figure 1 Different configurations are shown.

[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 embodiment 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, the card rendering method in the visible area is realized. The memory 104 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 104 may further include a memory remotely arranged relative to the processor 102, and these remote memories can be connected to the card in the visible area via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and a combination thereof.

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

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

[0043] Step S202, acquiring 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 storing the card data in a first card list, wherein the second number of cards is greater than the first number of cards, and a difference between the second number of cards and the first number of cards is less than a preset threshold;

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

[0045] Step S206, converting 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;

[0046] Step S208: Filter out a second card list that meets a preset condition from the one-dimensional data queue, and render the first card included in the second card list into the visible area.

[0047] Through the above steps, the card data of the second number of cards is obtained from the background database according to the first number of cards allowed to be placed in the visible area, and the card data is saved in the first card list, wherein 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; two-dimensional data is created 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; the two-dimensional data is converted 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; the second card list that meets the preset conditions is filtered out from the one-dimensional data queue, and the first card included in the second card list is rendered to the visible area. The above technical solution solves the problem of slow rendering speed in the card initialization stage when rendering a large number of cards in the related technology, and effectively improves the rendering speed of cards in the visible area.

[0048] In an exemplary embodiment, acquiring 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 includes: determining the second number of cards m according to the following formula: , wherein n is the first number of cards, k is a first preset value, and b is a second preset value; and the card data of the second number of cards are obtained from the background database.

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

[0050] In the above embodiment, by formula Determine the second card number, obtain the card data of the second card number from the background database, and ensure that the second card number is greater than the first card number to ensure that the cards can be quickly rendered in the visible area when the scroll event is performed. 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 based on the first card list includes: determining the number of arrays included in the two-dimensional data based on the number of columns allowed to be displayed in the visible area, wherein the arrays correspond one-to-one to the columns in the visible area; determining the data included in each array from the first card list, wherein the data of each array includes: the total height of the columns corresponding to each array and the card data contained in the columns corresponding to each array; creating the two-dimensional data based on the number of arrays and the data included in each array.

[0052] Two-dimensional data is created according to the first card list, wherein the two-dimensional data is used to store the total height of each column and the card data included in each column. Optionally, assuming that the visible area displays four columns of cards, there are 3 cards in the first column, and the height of each card is 1 cm, then the height of the first column is 3 cm; there are 2 cards in the second column, and the height of each card is 1 cm, then the height of the second column is 2 cm; there are 4 cards in the third column, and the height of each card is 1 cm, then the height of the third column is 4 cm; there is 1 card in the fourth column, and the height of each card is 1 cm, then the height of the fourth column is 1 cm. Wherein, the above card data are all stored in the first card list. The number of arrays included in the two-dimensional data is determined according to the number of columns displayed in the visible area, that is, the two-dimensional data created in this embodiment includes four arrays, each array includes the total height of the corresponding column and the card data of the corresponding column. For example, the first array includes the height of the first column 3 cm and the card data of the first column; the second array includes the height of the second column 2 cm and the card data of the second column; the third array includes the height of the third column 4 cm and the card data of the third column; the fourth array includes the height of the fourth column 1 cm and the card data of the fourth column.

[0053] In the above embodiment, the number of arrays included in the two-dimensional data is determined according to the number of columns allowed to be displayed in the visible area, the data in each array is determined through the first card list, and the two-dimensional data is created according to the number of arrays and the data included in each array, ensuring that the data fields in the two-dimensional data correspond to the cards displayed in the visible area.

[0054] In an exemplary embodiment, the two-dimensional data is converted into a one-dimensional data queue, including: creating an initial one-dimensional data queue, wherein 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; and adding the data corresponding to each array to the initial one-dimensional data queue 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 the 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 the 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 the 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 embodiment, 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 meeting the preset condition are screened out from the one-dimensional data queue, and the cards meeting the preset condition are collected into the second card list. This ensures that all cards in the second card list can be displayed in the visible area.

[0060] 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 for display of each first card in the visible area, 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.

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

[0062] Determine card data, where the card data includes card width, 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. Determine the starting position value of the card in the horizontal direction based on the card width and the first distance. Determine the starting position value of the card in the vertical direction based on the card height and the second distance. After determining the position of each card, the card can be rendered into the visible area.

[0063] The card width is calculated by 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 of the card allowed to be displayed in the visible area.

[0064] In the above embodiment, when the card meets the preset conditions, 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, thereby rendering the card into the visible area.

[0065] In an exemplary embodiment, obtaining a first distance of each first card 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 top of the first card in any column, the height of the first card, and a fourth distance between the bottom of the first card and the top of the second card, wherein the first card and the first card are adjacent cards both located in any 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, take the first column of the visible area as an example. Get the distance between the top of the first card in the first column and the top of the visible area as y1, the height of the first card as h1, the distance between the bottom of the first card and the top of the second card as d, then the distance between the second card and the top of the visible area y2=y1+h1+d can be obtained. By analogy, to determine the distance between the third card and the top of the visible area, it is necessary to obtain the distance y1 between the top of the first card and the top of the visible area, the height h1 of the first card, the distance d between the bottom of the first card and the top of the second card, the distance y2 between the top of the second card and the top of the visible area, the height h2 of the second card, the distance d between the bottom of the second card and the top of the third card, then the distance y3=y1+h1+d+y2+h2+d between the third card and the top of the visible area can be obtained.

[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 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, the distance between the upper end of the second card in any column and the top of the visible area is determined based on the distance between the upper end of the first card in any column and 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, so that the position of the card in the visible area can be determined later based on the distance between the upper end of the card and the top of the visible area.

[0069] In an exemplary embodiment, obtaining the second distance of each first card 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 the width w of the first card and the fifth distance g between the left end of any card and the right end of the card to the left of any card; determining the second distance according to the width w and the fifth distance g, wherein w and g are both 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: , wherein n is a positive integer.

[0071] Optionally, the number of columns in the visible area is numbered from left to right starting from 1. The first card is any card in the nth column of 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 to the left 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 number of columns where the card is located are determined, according to the formula Calculate the distance between the card and the left side of the visible area. In particular, the distance between the first column of cards and the left side of the visible area is 0.

[0072] In the above embodiment, the distance between cards in two adjacent columns in the horizontal direction, i.e., the fifth distance, is clarified, and the distance between the card and the left side of the visible area, i.e., the second distance, is determined according to the card width w, the fifth distance g, and the number of columns where the card is located. This allows the position of the card in the visible area to be determined later 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 first card includes: creating a temporary list for the first card list, wherein the temporary list stores the card data in the first card list; traversing the card data in the temporary list to obtain temporary cards; mounting the temporary cards in a container element of 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, the card data in the temporary list is traversed to obtain a temporary card, including: setting a temporary variable for the temporary list; starting the temporary list when the value of the temporary variable is controlled to be true; and 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 calling the external interface through the container element to obtain the height of the first card through the external interface, the method also includes: controlling the value of the temporary variable to be false; and when the value of the temporary variable is controlled to be false, closing the temporary list that has been started.

[0076] Create a temporary list and temporary variables, where 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 next operation. 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 displayed and started, and the card data in the temporary list is traversed to render the temporary card. The temporary card is mounted to the container element of the external page. This container element is an HTML element, which will serve as the parent element of the temporary card and is used to display the card on the web page. The mounting operation usually involves DOM operations, such as appendChild or innerHTML. Call the external interface through the container element, which includes but is not limited to a JavaScript function or an API call. Get 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, set the temporary variable to false to close and hide the temporary list.

[0077] In the above embodiment, the temporary list is started or closed by setting the value of a temporary variable. When the temporary list is started, the card data in the temporary list is traversed to render a temporary card, and the height of the card is obtained by calling an external interface by mounting the temporary card in a container element of an external page. This allows the position of the card in the visible area to be determined later based on the distance between the upper end of the card and the top of the visible area.

[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, wherein the key of the key-value pair mapping stores identification information corresponding to all the cards in the first card list, and the value of the key-value pair mapping stores the heights corresponding to all the cards; and replacing the height corresponding to each of the first cards stored in the key-value pair mapping with the obtained height of each of the first cards.

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

[0080] In the above embodiment, a key-value pair mapping is created to store the identification information corresponding to all cards in the first card list and the heights corresponding to all cards. After obtaining the height of the card, the height of the card stored in the key-value pair mapping is determined by the identification information of the card, and the height stored in the key-value pair mapping is replaced with the height of the obtained card, thereby realizing the preservation of the card height.

[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 scroll event of the visible area is in a bottoming state, obtaining the second card to be rendered to the visible area; determining the minimum height column from the visible area, and rendering the second card to the partial visible area corresponding to the minimum height column.

[0082] When the scrolling event of the visible area is in the bottoming state, that is, when the visible area scrolls to the current minimum height column, repeat steps S202 to S208. According to the first number of cards allowed to be placed in the visible area, the card data of the second number of cards is obtained from the background database, and the card data is saved in the first card list. Two-dimensional data is created according to the first card list and the two-dimensional data is converted into a one-dimensional data queue. A second card list that meets the preset conditions is selected from the one-dimensional data queue, and the first card included in the second card list is rendered to the part of the visible area corresponding to the minimum height column.

[0083] In the above embodiment, when the scrolling event of the visible area is in the bottoming state, the card data of the second card number is obtained from the background database again, the height of the card corresponding to the card data is obtained, and the preset conditions are determined to filter the cards that meet the preset conditions, and the cards that meet the preset conditions are rendered to the part of the visible area corresponding to the minimum height column. The scrolling event of the visible area is effectively monitored to ensure that the cards are continuously rendered in the visible area.

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

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

[0086] In the above embodiment, when a card is rendered 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, so as to ensure that the total height of the corresponding column stored in the two-dimensional data can be updated in time.

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

[0088] The solid-line frame is used to set the scroll bar, and the visible area is displayed in a dotted-line frame. The visible area is moved up and down by scrolling. 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 scroll bar top offset of 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 scroll bar top offset + the height of the solid-line frame. In the initial state, that is, when the page is not scrolled, the scroll bar top offset is 0, which means that the starting position value start is 0 and the ending position value end is the height of the visible area.

[0089] Figure 4 is a scrolling state diagram of a card rendering method for a visible area according to an embodiment of the present application, such as Figure 4 As 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 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 scrolls, 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 is a schematic diagram of card relationships according to a card rendering method for a visible area according to an embodiment of the present application, such as Figure 5 As 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 stop 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 into the container element of the external page, and the 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 actual 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 actual 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, while 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 actual 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 illustrated embodiments, 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 condition y + h > start is satisfied for the card.

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

[0098] In Figure 6 and Figure 7 In the illustrated embodiments, 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 illustrated embodiments, it can be seen that when y + h > start and y < end, the corresponding card will be displayed within the view range of the visible area, and y + h > start and y < end are the preset conditions for the card to be displayed in the visible area.

[0099] Fig. 9 is the card rendering position diagram of the card rendering method for the visible area according to an embodiment of the present application, as Fig. 9 shown, and 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, that is, card 1. According to Figure 5The relationship obtained in the embodiment shown is: y value of card 6 = y value of card 1 + h value of card 1, and the y value of card 6 is calculated. Because card 6 is in the first column, according to the calculation formula obtained above, its distance from the left side of the visible area is 0. The position layout of the card in the visible area is determined according to the distance of the card from the left side of the visible area and the distance y between the card and the top of the visible area.

[0102] Fig.10 is an initialization model diagram of a card rendering method for a visible area according to an embodiment of the present application, such as Fig.10 As shown, it specifically includes the following contents:

[0103] In the initialization template, the solid-line frame is used to set the scroll bar, and the visible area enables relative positioning. It is usually used to store a group of cards, which are arranged according to specific rules. During initialization, the cards are uniformly positioned in the upper left corner.

[0104] After initializing the 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, create a first card list to store the card data obtained from the background database, and when scrolling to the minimum height column displayed in the visible area, obtain new card data from the background database and render the card to the partial visible area corresponding to the minimum height column.

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

[0106] In this embodiment, a card rendering device for a visible area is also provided. The system is used to implement the above-mentioned embodiments and preferred implementation modes, and the descriptions that have been made will not be repeated. As used below, the term "module" can be a combination of software and / or hardware that implements a predetermined function. Although the system described in the following embodiments is preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceivable.

[0107] Fig.11 is a structural block diagram of a card rendering device in a visible area according to an embodiment of the present application, such as Fig.11 As shown, the device comprises:

[0108] An acquisition module 10 is used to acquire 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, wherein the second number of cards is greater than the first number of cards, and a difference between the second number of cards and the first number of cards is less than a preset threshold;

[0109] A creation module 12, used to create two-dimensional data according to the first card list, wherein the two-dimensional data is used to store the height of each column in the visible area and the card data included in each column;

[0110] A conversion module 14, used for converting the two-dimensional data into a one-dimensional data queue, wherein the one-dimensional data queue is used for storing the card data of each column in the two-dimensional data structure;

[0111] The rendering module 16 is used to filter out a second card list that meets a preset condition from the one-dimensional data queue, and render the first card included in the second card list into the visible area.

[0112] In an embodiment of the present application, according to the first card number that allows cards to be placed in the visible area, the card data of the second card number is obtained from the background database, and the card data is saved in the first card list, wherein the second card number is greater than the first card number, and the difference between the second card number and the first card number is less than a preset threshold; two-dimensional data is created 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; the two-dimensional data is converted 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; the second card list that meets the preset conditions is filtered out from the one-dimensional data queue, and the first card included in the second card list is rendered to the visible area. The above technical solution solves the problem of slow rendering speed in the card initialization stage when rendering a large number of cards in the related technology, and effectively improves the rendering speed of cards in the visible area.

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

[0114] In an exemplary embodiment, the creation module 12 is also used to determine the number of arrays included in the two-dimensional data based on the number of columns allowed to be displayed in the visible area, wherein the arrays correspond one-to-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 columns corresponding to each array and the card data contained in the columns corresponding to each array; and create the two-dimensional data based on the number of arrays and the data included in each array.

[0115] In an exemplary embodiment, the conversion module 14 is also used to 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; and add the data corresponding to each array to the initial one-dimensional data queue to obtain the one-dimensional data queue.

[0116] In an exemplary embodiment, the rendering module 16 is also used to obtain preset conditions corresponding to the visible area, wherein the preset conditions include a first preset condition and a second preset condition, wherein 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; and a second card list that meets the preset conditions is filtered out from the one-dimensional data queue.

[0117] In an exemplary embodiment, the rendering module 16 is also used to obtain, for each first card included in the second card list, the width allowed to be displayed in the visible area, 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; and 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.

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

[0119] In an exemplary embodiment, the rendering module 16 is also used to obtain, when the first card is the second card in any column in the visible area, a third distance from the upper end of the first card in any column to the top, the 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, wherein the first card and the first card are adjacent cards both located in any column; and 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 also used to obtain the width w of the first card and the fifth distance g between the left end of any card and the right end of the card to the left of any card when the first card is any card in the nth column in the visible area; the second distance is determined according to the width w and the fifth distance g, wherein 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: , wherein n is a positive integer.

[0122] In an exemplary embodiment, the rendering module 16 is also used to create a temporary list for the first card list, wherein the temporary list stores the card data in the first card list; traverse the card data in the temporary list to obtain a temporary card; mount the temporary card in 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 also used to set a temporary variable for the temporary list; when the value of the temporary variable is controlled to be true, the temporary list is started; when the temporary list is successfully started, the card data in the temporary list is traversed to obtain a temporary card.

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

[0125] In an exemplary embodiment, the rendering module 16 is also used to create a key-value pair mapping, wherein the key of the key-value pair mapping stores identification information corresponding to all cards in the first card list, and the value of the key-value pair mapping stores heights corresponding to all the cards; the height corresponding to each of the first cards stored in the key-value pair mapping is replaced with the obtained height of each of the first cards.

[0126] In an exemplary embodiment, the rendering module 16 is also used to obtain a second card to be rendered to the visible area when the scrolling event of the visible area is in a bottoming state; determine a minimum height column from the visible area, and render the second card to a partial visible area corresponding to the minimum height column.

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

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

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

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

[0131] S1, acquiring 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 storing the card data in a first card list, wherein the second number of cards is greater than the first number of cards, and a difference between the second number of cards and the first number of cards is less than a preset threshold;

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

[0133] S3, converting 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;

[0134] S4, filtering out a second card list that meets a preset condition from the one-dimensional data queue, and rendering the first card included in the second card list into the visible area.

[0135] In an exemplary embodiment, the computer-readable storage medium may include, but is not limited to, various media that can store computer programs, such as a USB flash drive, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk or an optical disk.

[0136] An embodiment of the present application further provides an electronic device, including a memory and a processor, wherein 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 processor may be configured to perform the following steps through a computer program:

[0138] S1, acquiring 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 storing the card data in a first card list, wherein the second number of cards is greater than the first number of cards, and a difference between the second number of cards and the first number of cards is less than a preset threshold;

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

[0140] S3, converting 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;

[0141] S4, filtering out a second card list that meets a preset condition from the one-dimensional data queue, and rendering the first card included in the second card list into the visible area.

[0142] An embodiment of the present application further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the steps in any one of the above method embodiments are implemented.

[0143] Optionally, in this embodiment, the computer program may be configured to perform the following steps by means of the computer program:

[0144] S1, acquiring 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 storing the card data in a first card list, wherein the second number of cards is greater than the first number of cards, and a difference between the second number of cards and the first number of cards is less than a preset threshold;

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

[0146] S3, converting 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;

[0147] S4, filtering out a second card list that meets a preset condition from the one-dimensional data queue, and rendering the first card included in the second card list into the visible area.

[0148] For specific examples in this embodiment, reference may be made to the examples described in the above embodiments and exemplary implementation modes, and this embodiment will not be described in detail herein.

[0149] Obviously, those skilled in the art should understand that the above modules or steps of the present application can be implemented by a general 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 a program code executable by a computing device, so that 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 that herein, or they can be made into individual integrated circuit modules, or multiple modules or steps therein can be made into a single integrated circuit module for implementation. Thus, the present application is not limited to any specific combination of hardware and software.

[0150] The above description is only the preferred embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the principles of the present application shall be included in the protection scope of the present application.

Claims

1. A card rendering method for a visible area, characterized in that: include: Acquire 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 save the card data in a first card list, wherein the second number of cards is greater than the first number of cards, and a 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, wherein the two-dimensional data is used to store 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 array, wherein the one-dimensional data array Used to store the 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 into the visible area.

2. The method according to claim 1, characterized in that Acquiring card data of a second number of cards from a background database according to a first number of cards that are allowed to be placed in the visible area includes: The second card quantity m is determined according to the following formula: , wherein n is the first number of cards, k is a first preset value, and b is a second preset value; The card data of the second card quantity is obtained from the backend database.

3. The method according to claim 1, characterized in that 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, wherein the arrays correspond one-to-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; The two-dimensional data is created according to the number of arrays and the data included in each array.

4. The method according to claim 1, characterized in that: Converting the two-dimensional data into a one-dimensional data array includes: Creating an initial one-dimensional data queue, wherein the values ​​in the initial one-dimensional data queue are all target values; Traversing each array in the two-dimensional data to obtain data corresponding to each array; The data corresponding to each array are added to the initial one-dimensional data queue to obtain the one-dimensional data queue.

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

6. The method according to claim 1, characterized in that Rendering the first card included in the second card list to the visible area includes: For each first card included in the second card list, obtain the width of each first card allowed to be displayed in the visible area, 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 into the visible area according to the width of each first card, the height of each first card, the first distance, and the second distance.

7. The method according to claim 6, characterized in that Obtaining the width of each of the first cards allowed to be displayed in the visible area, including: Get the total width of the visible area and the number of columns allowed to be displayed in the visible area; The width of each first card allowed to be displayed in the visible area is determined according to the total width and the number of columns.

8. The method according to claim 6, characterized in that Obtaining a first distance between each of the first cards and the top of the visible area includes: In the case where the first card is the second card in any column in the visible area, obtaining a third distance between the upper end of the first card in any column and 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, wherein the first card and the first card are adjacent cards both located in any column; The sum of the third distance, the height of the first card and the fourth distance is determined as the first distance.

9. The method according to claim 6, characterized in that Obtaining a second distance between each of the first cards and the left side of the visible area includes: In the case where 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 to the left of the any card; The second distance is determined according to the width w and the fifth distance g, wherein both w and g are constants.

10. The method according to claim 9, characterized in that Determining the second distance according to the width w and the fifth distance g includes: The second distance p is determined according to the following formula: , wherein n is a positive integer.

11. The method according to claim 6, characterized in that Get the height of each of the first cards, including: Creating a temporary list for the first card list, wherein the temporary list stores the card data in the first card list; Traversing the card data in the temporary list to obtain a temporary card; The temporary card is mounted in a container element of an external page, and an external interface is called through the container element to obtain the height of the first card through the external interface.

12. The method according to claim 11, characterized in that Traversing the card data in the temporary list to obtain a temporary card includes: Setting temporary variables for the temporary list; In the case where the value of the temporary variable is true, starting the temporary list; When the temporary list is successfully started, the card data in the temporary list is traversed to obtain a temporary card.

13. The method according to claim 11, characterized in that After calling the external interface through the container element to obtain the height of the first card through the external interface, the method further includes: Control the value of the temporary variable to be false; When the value of the temporary variable is false, the activated temporary list is closed.

14. The method according to claim 6, characterized in that After obtaining the height of each of the first cards, the method further includes: Creating a key-value pair mapping, wherein the key of the key-value pair mapping stores identification information corresponding to all cards in the first card list, and the value of the key-value pair mapping stores heights corresponding to all cards; The height corresponding to each of the first cards stored in the key-value pair mapping is replaced with the obtained height of each of the first cards.

15. The method according to claim 1, characterized in that After rendering the first card included in the second card list into the visible area, the method further includes: When the scrolling event of the visible area is in a bottoming state, obtaining a second card to be rendered to the visible area; A minimum height column is determined from the visible area, and the second card is rendered to a portion of the visible area corresponding to the minimum height column.

16. The method according to claim 15, characterized in that After rendering the second card to the partial visible area corresponding to the minimum height column, the method further includes: Determine a first height included in the minimum height column in the two-dimensional data, and a second height of the partial visible area; The first height in the two-dimensional data is updated to the second height.

17. A card rendering device for a visible area, characterized in that: include: an acquisition module, configured to acquire 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, wherein the second number of cards is greater than the first number of cards, and a difference between the second number of cards and the first number of cards is less than a preset threshold; A creation module, used for creating two-dimensional data according to the first card list, wherein the two-dimensional data is used for storing the height of each column in the visible area and the card data included in each column; A conversion module, used for converting the two-dimensional data into a one-dimensional data queue, wherein the one-dimensional data queue is used for storing the card data of each column in the two-dimensional data structure; The rendering module is used to filter out a second card list that meets a preset condition from the one-dimensional data queue, and render the first card included in the second card list into the visible area.

18. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, wherein the computer program implements the steps of the method described in any one of claims 1 to 16 when executed by a processor.

19. An electronic device comprising a memory, a processor, and a computer program stored in 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 16 are implemented.

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

Images