Waterfall flow component layout method and device, storage medium and computer equipment

Abstract

According to the waterfall flow component layout method and device, the storage medium and the computer equipment provided by the invention, when the waterfall flow component is arranged, the target commodity to be arranged and the target layout effect of the target commodity are firstly determined, so that the customizability of commodity display vision is realized through the target layout effect; then a component index corresponding to the target commodity is determined based on the target layout effect, size data corresponding to the component index are obtained from an index database through indexing, and the index database is provided with index relations between multiple component indexes and the size data and used for improving layout calculation efficiency; and finally, determining layout coordinates of the target commodity in the target page based on the size data, and inserting the target commodity into the target page to form a display component, thereby realizing local adjustment of the component in the target page. Based on the method, the display style of the page layout can be expanded through the target layout effect, the component index and the layout coordinates, so that the flexibility and customizability of the waterfall flow component layout in the target page are improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a waterfall flow component layout method, device, storage medium and computer equipment. Background Art

[0002] With the rapid development of e-commerce, users' demands for product display are becoming more diversified and personalized. In order to adapt to this trend, most major e-commerce platforms use waterfall flow component layout to display products, so as to provide users with a richer and more diverse product browsing experience through dynamic content display effects.

[0003] However, when displaying products, traditional waterfall flow components cannot modify the page layout through external dynamics, which makes it difficult for e-commerce platforms to make precise adjustments based on product characteristics, marketing strategies and user preferences when presenting products, thus affecting the attractiveness and conversion rate of products. In short, the current waterfall flow component layout is limited by fixed display styles and sorting methods, and lacks sufficient flexibility and customizability. Summary of the invention

[0004] The purpose of this application is to solve at least one of the above-mentioned technical defects, especially the technical defect that the waterfall flow component layout in the prior art is limited to a fixed display style and sorting method, and lacks sufficient flexibility and customizability.

[0005] The present application provides a waterfall flow component layout method, the method comprising:

[0006] Determine the target product to be laid out, and the target layout effect corresponding to the target product;

[0007] Determine the component index corresponding to the target product based on the target layout effect, and obtain the size data corresponding to the component index from the index library; wherein the index library pre-establishes an index relationship between multiple component indexes and size data using a combination configuration algorithm;

[0008] The layout coordinates of the target product in the target page are determined based on the size data, and the target product is inserted into the target page based on the layout coordinates to form a display component.

[0009] Optionally, determining the component index corresponding to the target product based on the target layout effect includes:

[0010] Analyzing the target layout effect to obtain the layout style of the target page and the layout position of the target product in the target page;

[0011] A component index corresponding to the target product is determined based on the layout style and the layout position.

[0012] Optionally, the layout style is obtained by combining and splicing a plurality of identical components; the component combination is obtained by typesetting a plurality of template components of different sizes;

[0013] The determining the component index corresponding to the target product based on the layout style and the layout position includes:

[0014] Determine a first ranking of the component combination where the layout position is located in the layout style, and a second ranking of the template component corresponding to the layout position in the component combination;

[0015] A component index corresponding to the target product is generated based on the first sorting and the second sorting.

[0016] Optionally, obtaining the dimension data corresponding to the component index from the index library includes:

[0017] Determine a layout style corresponding to the component index, and determine a style database corresponding to the layout style from the index library;

[0018] The component index is indexed in the style database to obtain dimension data corresponding to the component index.

[0019] Optionally, the process of establishing the index relationship between the component index and the dimension data includes:

[0020] Determine multiple layout styles and layout data of component combinations in each layout style;

[0021] For each layout style, determining the number of cycles of the component combination in the layout style, and determining the layout order and size data of each template component in the component combination based on the layout data of the component combination;

[0022] Based on the number of cycles and the layout orders, the component index of each template component in the layout style is generated in sequence, and an index relationship between the component index of each template component and the size data is established.

[0023] Optionally, the dimension data includes component height, component width and layout position direction;

[0024] The determining the layout coordinates of the target product in the target page based on the size data includes:

[0025] Determine the component combination where the target product is located in the target page, and the combination order of the component combination in the target page;

[0026] Determine the horizontal coordinate of the target product in the target page according to the component width and the layout position direction, and determine the vertical coordinate of the target product in the target page based on the component height, the layout position direction and the combination sorting;

[0027] The layout coordinates of the target product in the target page are generated based on the horizontal coordinate and the vertical coordinate.

[0028] Optionally, the method further comprises:

[0029] Generate a shopping guide bar according to the user-defined text and customized height input by the user, and insert the shopping guide bar into the top of the target page to form a shopping guide component;

[0030] When the layout coordinates of the target product are generated in the target page where the shopping guide component exists, the layout coordinates of the target product in the target page are determined according to the customized height of the shopping guide component and the size data of the target product to be laid out.

[0031] The present application also provides a waterfall flow component layout device, including:

[0032] A layout determination module, used to determine target commodities to be laid out, and target layout effects corresponding to the target commodities;

[0033] A component index module, used to determine the component index corresponding to the target product based on the target layout effect, and obtain the size data corresponding to the component index from the index library; wherein the index library pre-establishes an index relationship between multiple component indexes and size data using a combination configuration algorithm;

[0034] A component layout module is used to determine the layout coordinates of the target product in the target page based on the size data, and insert the target product into the target page based on the layout coordinates to form a display component.

[0035] The present application also provides a storage medium, in which computer-readable instructions are stored. When the computer-readable instructions are executed by one or more processors, the one or more processors execute the steps of the waterfall flow component layout method as described in any of the above embodiments.

[0036] The present application also provides a computer device, comprising: one or more processors, and a memory;

[0037] The memory stores computer-readable instructions, and when the computer-readable instructions are executed by the one or more processors, the steps of the waterfall flow component layout method described in any one of the above embodiments are performed.

[0038] It can be seen from the above technical solutions that the embodiments of the present application have the following advantages:

[0039] The waterfall flow component layout method, device, storage medium and computer equipment provided by the present application can first determine the target product to be laid out and the target layout effect corresponding to the target product as the data basis for the waterfall flow component layout when laying out the waterfall flow component, wherein the target layout effect can realize the customizability of the target product display visual; then the component index corresponding to the target product can be determined based on the target layout effect, and the dimension data corresponding to the component index can be obtained from the index library, where the index library pre-uses a combination configuration algorithm to establish an index relationship between multiple component indexes and dimension data, thereby reducing unnecessary recalculations and improving the efficiency of layout calculations; finally, the layout coordinates of the target product in the target page can be determined based on the dimension data, and the target product can be inserted into the target page based on the layout coordinates to form a display component, so that the display component of the target product can be flexibly adjusted without affecting other components in the target page. Based on this method, the present application can expand the display style and sorting method of the page layout through the target layout effect, component index and layout coordinates, thereby improving the flexibility and customizability of the waterfall flow component layout. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative labor.

[0041] Figure 1 A schematic diagram of a flow chart of a waterfall flow component layout method provided in an embodiment of the present application;

[0042] Figure 2 A schematic diagram of the structure of layout pages with multiple layout styles provided in an embodiment of the present application;

[0043] Figure 3 A flowchart of an index relationship establishment process provided in an embodiment of the present application;

[0044] Figure 4 A schematic diagram of a process for determining layout coordinates provided in an embodiment of the present application;

[0045] Figure 5 A schematic diagram of the structure of a layout page for inserting a shopping guide component provided in an embodiment of the present application;

[0046] Figure 6A schematic diagram of the structure of a waterfall flow component layout device provided in an embodiment of the present application;

[0047] Figure 7 A schematic diagram of the internal structure of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

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

[0049] When displaying products, traditional waterfall components cannot modify the page layout through external dynamics, which makes it difficult for e-commerce platforms to make precise adjustments based on product characteristics, marketing strategies, and user preferences when presenting products, thus affecting the attractiveness and conversion rate of products. In short, the current waterfall component layout is limited by fixed display styles and sorting methods, and lacks sufficient flexibility and customizability.

[0050] Based on this, this application proposes the following technical solutions, see below for details:

[0051] In one embodiment, Figure 1 As shown, Figure 1 A schematic diagram of a flow chart of a waterfall flow component layout method provided in an embodiment of the present application; the present application provides a waterfall flow component layout method, which specifically includes the following:

[0052] S110: Determine the target product to be laid out and the target layout effect corresponding to the target product.

[0053] In this step, when the waterfall flow component layout method is used for page layout, the computer device can determine the target product to be laid out and the target layout effect corresponding to the target product as the data basis for the waterfall flow component layout.

[0054] Among them, the target layout effect refers to a collection of visual and positional attributes related to the display of target products, which defines how the target products are presented in the target page to be displayed. It should be noted that in the page laid out by the waterfall flow component, the target products displayed are usually arranged dynamically according to certain rules. Therefore, the target layout effect here can include relevant data such as the arrangement style of the products in the page and the specific display position of the target products in the page. It can be customized according to the user's display needs, so as to achieve the customizability and diversification of the visual display of the target products.

[0055] It is understandable that the target layout effect can be highly customized according to the user's personalized display needs, so as to make corresponding layouts in the corresponding waterfall flow page. In this way, the waterfall flow component can not only realize the dynamic and flexible layout of the page content, but also fully consider the needs of users, and still maintain the beauty and readability of the page in the irregular content display; in addition, during the loading process of the page, the computer device can also use the target layout effect to make partial adjustments to the waterfall flow page, so as to adjust and maintain the product information without affecting the original layout, so that the display position and visual effect of the target product are still in line with expectations.

[0056] S120: Determine the component index corresponding to the target product based on the target layout effect, and obtain the size data corresponding to the component index from the index library; wherein the index library pre-establishes an index relationship between multiple component indexes and size data using a combination configuration algorithm.

[0057] In this step, after determining the target layout effect of the target product through step S110, the computer device can determine the component index corresponding to the target product based on the target layout effect, and obtain the size data corresponding to the component index from the index library. Since the index library pre-establishes an index relationship between multiple component indexes and size data using a combination configuration algorithm, the present application can reduce unnecessary recalculations and directly obtain the size data of the target product to be laid out, thereby improving the efficiency of layout calculations.

[0058] It can be understood that the waterfall flow page is obtained by combining multiple template components of different sizes. Therefore, the present application can pre-use a combination configuration algorithm to set the component index of each template component. The combination configuration algorithm here can generate a component index for each template component in the waterfall flow page according to different types of display styles and sorting methods, and then establish an index relationship between each component index and its corresponding size data to form an index library.

[0059] Specifically, the component index refers to the unique identifier or index value of the template component at the display position of the target product in the waterfall flow page. The index can assist the computer device to quickly locate the dimension data of the template component used to display the target product in the page, avoiding the need to recalculate the dimension data of the template component every time the layout is performed. The dimension data here refers to the specific display size of the template component associated with the component index, including the width, height and other related information of the template component. This information is obtained through pre-configuration or algorithmic calculation, and is used to determine the size of the space that the target product needs to occupy when displayed on the page. Therefore, through the index library, the computer device can greatly improve the computing efficiency during page layout, especially when the layout involves a large number of products, and can avoid the performance consumption caused by repeated calculations.

[0060] S130: Determine the layout coordinates of the target product in the target page based on the size data, and insert the target product into the target page based on the layout coordinates to form a display component.

[0061] In this step, after indexing the size data of the target product to be laid out through step S120, the computer device can determine the layout coordinates of the target product in the target page based on the size data, and then insert the target product into the target page based on the layout coordinates to form a display component, thereby realizing flexible adjustment of the display component of the target product without affecting the layout of other components in the target page.

[0062] The target page here refers to the waterfall flow page used to layout and display the target products, and the layout coordinates refer to the specific display position of the target products in the target page. It is a coordinate value calculated by the size data of the target products to be laid out and the page layout logic, including horizontal and vertical coordinates, indicating the relative or absolute position of the target products in the target page.

[0063] It is understandable that after obtaining the layout coordinates, the computer device can generate a display card for the target product, and insert the display card into the template component at the layout coordinate position in the target page to form the display component of the target product. Through the layout coordinates, the computer device can accurately layout the target product to the corresponding position of the target page, ensure that the spatial relationship between the display component of the target product and other components in the target page is reasonable, avoid affecting the layout of other components in the target page, and flexibly adjust the display position of the target product. For example, in a waterfall flow layout, as new products are loaded, the layout coordinates of the new products can change dynamically according to the user's adjustments, so that the display component of the new product can be naturally inserted into the target page without affecting the layout of other existing components.

[0064] In the above embodiment, when laying out the waterfall flow component, the target product to be laid out and the target layout effect corresponding to the target product can be determined first as the data basis for the layout of the waterfall flow component, wherein the target layout effect can realize the customizability of the visual display of the target product; then the component index corresponding to the target product can be determined based on the target layout effect, and the dimension data corresponding to the component index can be obtained from the index library, where the index library pre-uses a combination configuration algorithm to establish an index relationship between multiple component indexes and dimension data, thereby reducing unnecessary recalculations and improving the efficiency of layout calculations; finally, the layout coordinates of the target product in the target page can be determined based on the dimension data, and the target product can be inserted into the target page based on the layout coordinates to form a display component, so that the display component of the target product can be flexibly adjusted without affecting other components in the target page. Based on this method, the present application can expand the display style and sorting method of the page layout through the target layout effect, component index and layout coordinates, thereby improving the flexibility and customizability of the waterfall flow component layout.

[0065] In one embodiment, determining the component index corresponding to the target product based on the target layout effect in step S120 may include:

[0066] S121: Analyze the target layout effect to obtain the layout style of the target page and the layout position of the target product in the target page.

[0067] S122: Determine a component index corresponding to the target product based on the layout style and layout position.

[0068] In this embodiment, when determining the component index corresponding to the target product, the computer device can first analyze the target layout effect to obtain the layout style of the target page and the layout position of the target product in the target page, and then determine the component index corresponding to the target product based on the layout style and layout position, so that the display position of the target product in the target page can be represented by the component index.

[0069] The layout style refers to the layout structure and display rules of the waterfall page, which determines the arrangement of each template component on the waterfall page and the page design style; the size and arrangement of template components in different layout styles are different. The layout position refers to the relative or absolute position of the template component used to display the target product in the waterfall page of any layout style, which determines the display position of the target product in the waterfall page.

[0070] It is understandable that the computer device can understand the overall layout rules of the target page and the specific display requirements of the product on the page by analyzing the target layout effect, and obtain the layout style and layout position. The computer device can then determine the component index of the target product based on the layout style and layout position. The component index is not only associated with the visual presentation of the target product on the target page, but also closely integrated with the specific position of the product in the page layout. Through the component index, the computer device can quickly and accurately identify and manage the display position of the target product on the target page through the component index, without the need to repeatedly calculate or process complex layout logic, thereby achieving efficient and flexible page layout and product display.

[0071] In one embodiment, the layout style in step S122 is obtained by splicing a plurality of identical component combinations; the component combination is obtained by typesetting a plurality of template components of different sizes; wherein the step of determining the component index corresponding to the target product based on the layout style and the layout position may include:

[0072] S1221: Determine a first ranking of the component combination where the layout position is located in the layout style, and a second ranking of the template component corresponding to the layout position in the component combination.

[0073] S1222: Generate a component index corresponding to the target product based on the first sorting and the second sorting.

[0074] In this embodiment, since the layout style is obtained by splicing a plurality of identical component combinations, and the component combination is obtained by layout of a plurality of template components of different sizes; therefore, when the computer device determines the component index corresponding to the target product, it can first determine the first order of the component combination where the layout position is located in the layout style, and the second order of the template component corresponding to the layout position in the component combination, and then generate the component index corresponding to the target product based on the first order and the second order.

[0075] Indicatively, if Figure 2 As shown, Figure 2 A schematic diagram of the structure of layout pages with multiple layout styles provided in an embodiment of the present application; Figure 2 Three layout styles are shown, among which style A is obtained by cyclic splicing of components of 3+3+1 structure, style B is obtained by cyclic splicing of components of 4+3 structure, and style C is obtained by cyclic splicing of components of 3+3 structure. Taking style A as an example, the component combination in style A is obtained by typeset of 7 template components of different sizes, namely template components 1-7.

[0076] Specifically, the component index of the present application can be saved in the form of key-value, where the key is the first ranking of the component combination where the layout position is located in the layout style, and the value is the second ranking of the template component corresponding to the layout position in the component combination. For example, in a target page with a layout style of style A, when the layout position of the target product is the template component 4 of the first component combination in style A, it can be determined that the key corresponding to the target product is 1 and the value is 4, that is, the component index corresponding to the target product is 1-4.

[0077] In one embodiment, obtaining the dimension data corresponding to the component index from the index library in step S120 may include:

[0078] S123: Determine a layout style corresponding to the component index, and determine a style database corresponding to the layout style from the index library.

[0079] S124: Indexing the component index in the style database to obtain dimension data corresponding to the component index.

[0080] In this embodiment, when the computer device indexes the dimension data corresponding to the component index, it can first determine the layout style corresponding to the component index, and determine the style database corresponding to the layout style from the index library, and then index the component index in the style database to obtain the dimension data corresponding to the component index, so as to improve the accuracy and efficiency of data indexing.

[0081] It is understandable that if Figure 2 As shown, the component indexes corresponding to style A and style B are 1-1 to 1-7, but in different layout styles, the template components corresponding to the same component index are not the same, so the corresponding dimension data are also different. Based on this, the present application can construct a style database corresponding to each layout style, and establish an index relationship between each component index and dimension data under the corresponding layout style in each style database. Therefore, when the computer device performs data indexing, it can directly perform data indexing of the component index in the style database under the corresponding layout style, thereby improving the accuracy and efficiency of data indexing.

[0082] In one embodiment, Figure 3 As shown, Figure 3 A flowchart of an index relationship establishment process provided in an embodiment of the present application; Figure 2 In step S120, the process of establishing the index relationship between the component index and the dimension data may include:

[0083] S125: Determine a plurality of layout styles and typesetting data of component combinations in each layout style.

[0084] S126: For each layout style, determine the number of loops of the component combination in the layout style, and determine the layout order and size data of each template component in the component combination based on the layout data of the component combination.

[0085] S127: Generate the component index of each template component in the layout style in sequence based on the number of loops and each typesetting order, and establish an index relationship between the component index of each template component and the size data.

[0086] In this embodiment, when establishing an index relationship between a component index and dimension data, the computer device may first determine a plurality of layout styles and the typesetting data of the component combination in each layout style. Then, for each layout style, the computer device may determine the number of loops of the component combination in the layout style, and determine the typesetting order and dimension data of each template component in the component combination based on the typesetting data of the component combination. Thus, the component index of each template component in the layout style may be generated in sequence based on the number of loops and each typesetting order, and an index relationship between the component index and the dimension data of each template component may be established.

[0087] The layout order refers to the order in which the template components are arranged in each component combination, such as Figure 2 In the component combination of style A, the layout order is template component 1 to template component 7; and the size data refers to the spatial position and size occupied by the template component in the component combination.

[0088] It is understandable that the number of component combination loops in each layout style here can be set according to the size of the waterfall flow page and the structure of the component combination, for example, Figure 2 Among the three styles shown, the number of cycles of component combinations in style A can be 5, while the number of cycles of component combinations in styles B and C can be 7, and no specific limitation is made here.

[0089] Specifically, for each template component in the layout style, the computer device can use the combination order of the component combination in the layout style where the template component is located as the key, and the layout order of the template component in the component combination as the value, and then generate a component index in the form of key-value. Among them, the key in the component index of each layout style is less than or equal to the number of cycles of its component combination, and the value is less than or equal to the number of components in its component combination.

[0090] In one embodiment, Figure 4 As shown, Figure 4 A schematic diagram of a process for determining layout coordinates provided in an embodiment of the present application; Figure 4In step S130, the dimension data includes component height, component width, and layout position direction; wherein the step of determining the layout coordinates of the target product in the target page based on the dimension data may include:

[0091] S131: Determine the component combination of the target product in the target page, and the combination order of the component combination in the target page.

[0092] S132: Determine the horizontal coordinate of the target product in the target page according to the component width and the layout position direction, and determine the vertical coordinate of the target product in the target page based on the component height, the layout position direction and the combination sorting.

[0093] S133: Generate layout coordinates of the target product in the target page based on the horizontal coordinate and the vertical coordinate.

[0094] In this embodiment, the dimension data includes component height, component width, and layout position direction. Based on this, when the computer device determines the layout coordinates of the target product in the target page based on the dimension data, it can first determine the component combination of the target product in the target page, and the combination order of the component combination in the target page, and then determine the horizontal coordinate of the target product in the target page based on the component width and layout position direction, and determine the vertical coordinate of the target product in the target page based on the component height, layout position direction and combination order, and finally, the computer device can generate the layout coordinates of the target product in the target page based on the layout horizontal coordinate and the layout vertical coordinate.

[0095] Specifically, when calculating the layout coordinates, the computer device may also obtain the spacing between the template components in the component combination, and calculate the size data in combination with the spacing to obtain the layout coordinates of the target product in the target page. Figure 2 For the template component 5 of style A in the layout, it can be determined according to its layout position direction that in the horizontal direction, template component 5 is the first template component from left to right in the layout style, so its horizontal coordinate is the component width of template component 5; in the vertical direction, template component 5 is the second template component from top to bottom in the layout style, so its vertical coordinate is the superposition of the component width of template component 5 and the previous template component and a spacing. In addition, if the combination order n of the component combination in which the template component is located is not 1, during the calculation of its layout coordinates, the computer device also needs to determine the combination height of the component combination, and then superimpose n-1 spacings and n-1 combination heights on the calculated vertical coordinates of the layout coordinates.

[0096] Furthermore, after the computer device initially calculates the layout coordinates of the template component in the target page, the layout coordinates can be stored. In this way, when the template component is referenced next time, the computer device can directly obtain the layout coordinates of the template component as the layout coordinates of the target product, thereby improving the efficiency of the waterfall flow component layout.

[0097] In one embodiment, the method may further include:

[0098] S140: Generate a shopping guide horizontal bar according to the user-defined text and customized height input by the user, and insert the shopping guide horizontal bar into the top of the target page to form a shopping guide component.

[0099] S150: When generating layout coordinates of the target product in the target page where the shopping guide component exists, determine the layout coordinates of the target product in the target page according to the customized height of the shopping guide component and the size data of the target product to be laid out.

[0100] In this embodiment, the computer device can also generate a shopping guide bar according to the user-defined text and customized height input, and insert the shopping guide bar into the top of the target page to form a shopping guide component, so as to effectively convey information and display products on the target page. In addition, when the layout coordinates of the target product are generated in the target page where the shopping guide component exists, the computer device can determine the layout coordinates of the target product in the target page according to the customized height of the shopping guide component and the size data of the target product to be laid out.

[0101] Indicatively, if Figure 5 As shown, Figure 5 A schematic diagram of the structure of a layout page for inserting a shopping guide component provided in an embodiment of the present application; Figure 5 It can be seen that the horizontal bar width of the shopping guide component is the width of the target page, and the horizontal bar height can be a customized height defined by the user; the custom text therein is the shopping guide information defined by the user, such as "search results of recommended brands", "relevant recommendations of other brands", etc.

[0102] It is understandable that after inserting the shopping guide component, the structure of the layout style of the target page will change. Figure 5 It can be seen that the insertion of the shopping guide component does not affect the change of the horizontal coordinate in the layout coordinates of the template component, but affects the change of the vertical coordinate. Therefore, when generating the layout coordinates of the target product in the target page where the shopping guide component exists, after the layout coordinates are calculated, the customized height of the shopping guide component can be superimposed on the vertical coordinate of the layout coordinates to update the layout coordinates, thereby realizing flexible adjustment of the waterfall flow page without affecting the layout of other components.

[0103] The waterfall flow component layout device provided in an embodiment of the present application is described below. The waterfall flow component layout device described below and the waterfall flow component layout method described above can be referenced to each other.

[0104] In one embodiment of this, Figure 6 As shown, Figure 6 A schematic diagram of a waterfall flow component layout device provided in an embodiment of the present application; the present application also provides a waterfall flow component layout device, including a layout determination module 210, a component index module 220 and a component layout module 230, specifically including the following:

[0105] The layout determination module 210 is used to determine the target commodities to be arranged and the target layout effects corresponding to the target commodities.

[0106] The component index module 220 is used to determine the component index corresponding to the target product based on the target layout effect, and obtain the size data corresponding to the component index from the index library; wherein the index library pre-establishes an index relationship between multiple component indexes and size data using a combination configuration algorithm.

[0107] The component layout module 230 is used to determine the layout coordinates of the target product in the target page based on the size data, and insert the target product into the target page based on the layout coordinates to form a display component.

[0108] In the above embodiment, when laying out the waterfall flow component, the target product to be laid out and the target layout effect corresponding to the target product can be determined first as the data basis for the layout of the waterfall flow component, wherein the target layout effect can realize the customizability of the visual display of the target product; then the component index corresponding to the target product can be determined based on the target layout effect, and the dimension data corresponding to the component index can be obtained from the index library, where the index library pre-uses a combination configuration algorithm to establish an index relationship between multiple component indexes and dimension data, thereby reducing unnecessary recalculations and improving the efficiency of layout calculations; finally, the layout coordinates of the target product in the target page can be determined based on the dimension data, and the target product can be inserted into the target page based on the layout coordinates to form a display component, so that the display component of the target product can be flexibly adjusted without affecting other components in the target page. Based on this method, the present application can expand the display style and sorting method of the page layout through the target layout effect, component index and layout coordinates, thereby improving the flexibility and customizability of the waterfall flow component layout.

[0109] In one embodiment, the component index module 220 may include:

[0110] The layout analysis submodule is used to analyze the target layout effect to obtain the layout style of the target page and the layout position of the target product in the target page.

[0111] The index determination submodule is used to determine the component index corresponding to the target product based on the layout style and layout position.

[0112] In one embodiment, the index determination submodule may include:

[0113] The component ranking unit is used to determine the first ranking of the component combination where the layout position is located in the layout style, and the second ranking of the template component corresponding to the layout position in the component combination.

[0114] The index generating unit is used to generate a component index corresponding to the target product based on the first sorting and the second sorting.

[0115] In one embodiment, the component index module 220 may further include:

[0116] The database determination submodule is used to determine the layout style corresponding to the component index, and determine the style database corresponding to the layout style from the index library.

[0117] The data index submodule is used to index the component index in the style database to obtain the size data corresponding to the component index.

[0118] In one embodiment, the component index module 220 may further include:

[0119] The style determination submodule is used to determine multiple layout styles and the layout data of the component combination in each layout style.

[0120] The data determination submodule is used to determine the number of loops of the component combination in each layout style, and to determine the layout order and size data of each template component in the component combination based on the layout data of the component combination.

[0121] The index establishment submodule is used to sequentially generate the component index of each template component in the layout style based on the number of loops and each typesetting order, and to establish an index relationship between the component index of each template component and the size data.

[0122] In one embodiment, the component layout module 230 may include:

[0123] The sorting determination submodule is used to determine the component combination in which the target product is located in the target page, and the combination sorting of the component combination in the target page.

[0124] The sub-coordinate calculation sub-module is used to determine the horizontal coordinate of the target product in the target page based on the component width and layout position direction, and to determine the vertical coordinate of the target product in the target page based on the component height, layout position direction and combination sorting.

[0125] The coordinate generation submodule is used to generate the layout coordinates of the target product in the target page based on the layout horizontal coordinate and the layout vertical coordinate.

[0126] In one embodiment, the apparatus may further include:

[0127] The horizontal bar insertion module is used to generate a shopping guide horizontal bar according to the custom text and customized height input by the user, and insert the shopping guide horizontal bar into the top of the target page to form a shopping guide component.

[0128] The layout coordinate calculation module is used to determine the layout coordinates of the target product in the target page according to the customized height of the shopping guide component and the size data of the target product to be laid out when generating the layout coordinates of the target product in the target page where the shopping guide component exists.

[0129] In one embodiment, the present application also provides a storage medium storing computer-readable instructions. When the computer-readable instructions are executed by one or more processors, the one or more processors execute the steps of the waterfall flow component layout method as described in any of the above embodiments.

[0130] In one embodiment, the present application also provides a computer device having computer-readable instructions stored therein. When the computer-readable instructions are executed by one or more processors, the one or more processors execute the steps of the waterfall flow component layout method as described in any one of the above embodiments.

[0131] Indicatively, if Figure 7 As shown, Figure 7 This is a schematic diagram of the internal structure of a computer device provided in an embodiment of the present application. The computer device 300 may be provided as a server. Figure 7 The computer device 300 includes a processing component 302, which further includes one or more processors, and a memory resource represented by a memory 301 for storing instructions executable by the processing component 302, such as an application. The application stored in the memory 301 may include one or more modules, each corresponding to a set of instructions. In addition, the processing component 302 is configured to execute instructions to perform the waterfall flow component layout method of any of the above embodiments.

[0132] The computer device 300 may further include a power supply component 303 configured to perform power management of the computer device 300, a wired or wireless network interface 304 configured to connect the computer device 300 to a network, and an input / output (I / O) interface 305. The computer device 300 may operate based on an operating system stored in the memory 301, such as Windows Server TM, Mac OS X TM, Unix TM, Linux TM, Free BSD TM, or the like.

[0133] Those skilled in the art will understand that Figure 7 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0134] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the statement "comprise a ..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.

[0135] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The various embodiments can be combined as needed, and the same or similar parts can refer to each other.

[0136] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A waterfall flow component layout method, characterized in that: The method comprises: Determine the target product to be laid out, and the target layout effect corresponding to the target product; Determine the component index corresponding to the target product based on the target layout effect, and obtain the size data corresponding to the component index from the index library; wherein the index library pre-establishes an index relationship between multiple component indexes and size data using a combination configuration algorithm; The layout coordinates of the target product in the target page are determined based on the size data, and the target product is inserted into the target page based on the layout coordinates to form a display component.

2. The waterfall flow component layout method according to claim 1, characterized in that: The determining the component index corresponding to the target product based on the target layout effect includes: Analyzing the target layout effect to obtain the layout style of the target page and the layout position of the target product in the target page; A component index corresponding to the target product is determined based on the layout style and the layout position.

3. The waterfall flow component layout method according to claim 2 is characterized in that: The layout style is obtained by combining and splicing a plurality of identical components; the component combination is obtained by typesetting a plurality of template components of different sizes; The determining the component index corresponding to the target product based on the layout style and the layout position includes: Determine a first ranking of the component combination where the layout position is located in the layout style, and a second ranking of the template component corresponding to the layout position in the component combination; A component index corresponding to the target product is generated based on the first sorting and the second sorting.

4. The waterfall flow component layout method according to claim 1, characterized in that: The step of obtaining the dimension data corresponding to the component index from the index library includes: Determine a layout style corresponding to the component index, and determine a style database corresponding to the layout style from the index library; The component index is indexed in the style database to obtain dimension data corresponding to the component index.

5. The waterfall flow component layout method according to claim 1, characterized in that: The process of establishing the index relationship between the component index and the dimension data includes: Determine multiple layout styles and layout data of component combinations in each layout style; For each layout style, determining the number of loops of the component combination in the layout style, and determining the layout order and size data of each template component in the component combination based on the layout data of the component combination; Based on the number of cycles and the layout orders, the component index of each template component in the layout style is generated in sequence, and an index relationship between the component index of each template component and the size data is established.

6. The waterfall flow component layout method according to claim 1, characterized in that: The dimension data includes component height, component width and layout position direction; The determining the layout coordinates of the target product in the target page based on the size data includes: Determine the component combination where the target product is located in the target page, and the combination order of the component combination in the target page; Determine the horizontal coordinate of the target product in the target page according to the component width and the layout position direction, and determine the vertical coordinate of the target product in the target page based on the component height, the layout position direction and the combination sorting; The layout coordinates of the target product in the target page are generated based on the horizontal coordinate and the vertical coordinate.

7. The waterfall flow component layout method according to claim 1, characterized in that: The method also includes: Generate a shopping guide bar according to the user-defined text and customized height input by the user, and insert the shopping guide bar into the top of the target page to form a shopping guide component; When the layout coordinates of the target product are generated in the target page where the shopping guide component exists, the layout coordinates of the target product in the target page are determined according to the customized height of the shopping guide component and the size data of the target product to be laid out.

8. A waterfall flow component layout device, characterized in that: include: A layout determination module, used to determine target commodities to be laid out, and target layout effects corresponding to the target commodities; A component index module is used to determine the component index corresponding to the target product based on the target layout effect, and obtain the size data corresponding to the component index from the index library; wherein the index library pre-establishes an index relationship between multiple component indexes and size data using a combination configuration algorithm; A component layout module is used to determine the layout coordinates of the target product in the target page based on the size data, and insert the target product into the target page based on the layout coordinates to form a display component.

9. A storage medium, characterized in that: The storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by one or more processors, the one or more processors execute the steps of the waterfall flow component layout method as described in any one of claims 1 to 7.

10. A computer device, characterized in that: include: one or more processors, and memory; The memory stores computer-readable instructions, and when the computer-readable instructions are executed by the one or more processors, the steps of the waterfall component layout method as described in any one of claims 1 to 7 are performed.

Images