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

Abstract

The waterfall component layout method, device, storage medium and computer device provided by the application, when the waterfall component is laid out, first determine the target commodity to be laid out and the target layout effect thereof, so as to realize the customizability of commodity display vision through the target layout effect; then determine the component index corresponding to the target commodity based on the target layout effect, and obtain the size data corresponding to the component index from the index library, and the index relationship between a plurality of component indexes and size data is established in the index library, so as to improve the efficiency of layout calculation; finally, after determining the layout coordinates of the target commodity in the target page based on the size data, the target commodity is inserted into the target page to form a display component, and the local adjustment of the component in the target page is realized. Based on the method, the application can expand the display style of page layout through the target layout effect, the component index and the layout coordinates, and then improve the flexibility and customizability of the waterfall component layout in the target page.

Description

TECHNICAL FIELD

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

[0002] In the rapid development of e-commerce, users' demand for product display is increasingly diversified and personalized. In order to adapt to this trend, most e-commerce platforms use the layout method of waterfall component to display products, so as to provide users with more rich and diverse product browsing experience through dynamic content display effect.

[0003] However, the traditional waterfall component cannot modify the page layout externally when displaying products, which makes it difficult for e-commerce platforms to accurately adjust according to product characteristics, marketing strategies and user preferences during the process of presenting products, thereby 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. SUMMARY

[0004] The purpose of the present application is to at least solve one of the above technical defects, in particular the technical defect that the waterfall component layout in the prior art is limited by fixed display styles and sorting methods, and lacks sufficient flexibility and customizability.

[0005] The present application provides a waterfall component layout method, which comprises:

[0006] determining a target product to be laid out and a target layout effect corresponding to the target product;

[0007] determining a component index corresponding to the target product based on the target layout effect, and obtaining size data corresponding to the component index from an index library; wherein the index library has an index relationship between a plurality of component indexes and size data established in advance by using a combination configuration algorithm;

[0008] determining layout coordinates of the target product in a target page based on the size data, and inserting the target product into the target page based on the layout coordinates to form a display component.

[0009] Optionally, the method further comprises:

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

[0011] determine a component index corresponding to the target commodity based on the layout style and the layout position.

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

[0013] The determination of the component index corresponding to the target commodity based on the layout style and the layout position comprises:

[0014] determining a first order of the component combination in which the layout position is located in the layout style, and a second order of the template component corresponding to the layout position in the component combination;

[0015] generating the component index corresponding to the target commodity based on the first order and the second order.

[0016] Optionally, the obtaining of the size data corresponding to the component index from the index library comprises:

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

[0018] indexing the component index in the style database to obtain size data corresponding to the component index.

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

[0020] determining a plurality of layout styles, and typesetting data of component combinations in each layout style;

[0021] for each layout style, determining a cycle number of the component combinations in the layout style, and determining a typesetting order and size data of each template component in the component combinations based on the typesetting data of the component combinations;

[0022] generating the component index of each template component in the layout style in turn based on the cycle number and each typesetting order, and establishing an index relationship between the component index of each template component and the size data.

[0023] Optionally, the size data comprises a component height, a component width, and a layout position direction.

[0024] The determination of the layout coordinates of the target commodity in the target page based on the size data comprises:

[0025] determining a component combination in which the target commodity is located in the target page, and a combination order of the component combination in the target page;

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

[0027] generate the layout coordinate of the target commodity in the target page based on the horizontal coordinate and the vertical coordinate.

[0028] Optionally, the method further comprises:

[0029] generate a guide bar according to the custom text and the custom height input by the user, and insert the guide bar into the top of the target page to form a guide component;

[0030] when generating the layout coordinate of the target commodity in the target page in which the guide component exists, determine the layout coordinate of the target commodity in the target page according to the custom height of the guide component and the size data of the target commodity to be laid out.

[0031] The application further provides a waterfall component layout device, comprising:

[0032] a layout determination module configured to determine a target commodity to be laid out and a target layout effect corresponding to the target commodity;

[0033] a component index module configured to determine a component index corresponding to the target commodity based on the target layout effect, and index the size data corresponding to the component index from an index library; wherein the index library has an index relationship between a plurality of component indexes and size data pre-established by using a combination configuration algorithm;

[0034] a component layout module configured to determine a layout coordinate of the target commodity in a target page based on the size data, and insert the target commodity into the target page based on the layout coordinate to form a display component.

[0035] The application further provides a storage medium having computer readable instructions stored therein, the computer readable instructions being executed by one or more processors to cause the one or more processors to perform the steps of the waterfall component layout method according to any one of the above embodiments.

[0036] The application further provides a computer device, comprising one or more processors and a memory.

[0037] The memory has computer readable instructions stored therein, the computer readable instructions being executed by the one or more processors to perform the steps of the waterfall component layout method according to any one of the above embodiments.

[0038] From the above technical solutions, the embodiments of the present application have the following advantages:

[0039] The waterfall component layout method, device, storage medium and computer equipment provided by the present application can first determine the target commodity to be laid out and the target layout effect corresponding to the target commodity as the data basis for the layout of the waterfall component, wherein the target layout effect can realize the customizability of the visual display of the target commodity; then the component index corresponding to the target commodity can be determined based on the target layout effect, and the size data corresponding to the component index can be obtained from the index library, wherein the index library has previously established an index relationship between a plurality of component indexes and size data by using a combination configuration algorithm, so that unnecessary recalculation can be reduced and the efficiency of layout calculation can be improved; finally, the layout coordinates of the target commodity in the target page can be determined based on the size data, and the target commodity 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 commodity can be flexibly adjusted without affecting other components in the target page. Based on the method, the present application can expand the display style and sorting method of page layout through the target layout effect, component index and layout coordinates, thereby improving the flexibility and customizability of the waterfall component layout. BRIEF DESCRIPTION OF DRAWINGS

[0040] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the drawings needed to be used in the embodiments or prior art description will be briefly introduced. Obviously, the drawings in the following description are only some embodiments of the present application, and other drawings can be obtained by those skilled in the art without creative labor.

[0041] Figure 1 A flowchart of a waterfall component layout method provided by an embodiment of the present application is shown in the figure.

[0042] Figure 2 A structural diagram of a layout page with multiple layout styles provided by an embodiment of the present application is shown in the figure.

[0043] Figure 3 A flowchart of an index relationship establishment process provided by an embodiment of the present application is shown in the figure.

[0044] Figure 4 A flowchart of a layout coordinate determination process provided by an embodiment of the present application is shown in the figure.

[0045] Figure 5 A structural diagram of a layout page with an inserted guide component provided by an embodiment of the present application is shown in the figure.

[0046] Figure 6A structural schematic diagram of a waterfall component layout device provided by an embodiment of the present application is shown in the figure.

[0047] Figure 7 An internal structure schematic diagram of a computer device provided by an embodiment of the present application is shown in the figure. DETAILED DESCRIPTION

[0048] The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, rather than all the embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative work belong to the scope of protection of the present application.

[0049] The traditional waterfall component cannot modify the page layout dynamically when displaying goods, which makes it difficult for e-commerce platforms to accurately adjust the goods according to the characteristics of the goods, marketing strategies and user preferences when presenting the goods, thereby affecting the attractiveness and conversion rate of the goods. In summary, the current waterfall component layout is limited by fixed display styles and sorting methods, and lacks sufficient flexibility and customizability.

[0050] Based on this, the present application proposes the following technical solutions, which are described below:

[0051] In one embodiment, as shown in Figure 1 , Figure 1 A flowchart of a waterfall component layout method provided by an embodiment of the present application is shown in the figure. The present application provides a waterfall component layout method, which specifically includes the following:

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

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

[0054] The target layout effect refers to a set of visual and position attributes related to the display of the target goods, which defines the way the target goods are presented in the target page to be displayed. It should be noted that the target goods displayed in the page laid out by the waterfall component are usually dynamically arranged according to certain rules, so the target layout effect here can include the arrangement style of the goods in the page and the specific display position of the target goods in the page, etc. Related data, which can be customized according to the display needs of the user, so as to realize the customizability and diversity of the visual display of the target goods.

[0055] It can be understood that the target layout effect can be highly customized according to the personalized display needs of the user to perform corresponding layout in the corresponding waterfall page. In this way, the waterfall component can not only realize dynamic and flexible layout of page content, but also fully consider the needs of the user to maintain the beauty and readability of the page in irregular content display; in addition, during the loading process of the page, the computer device can also adjust the waterfall page locally through the target layout effect to adjust and maintain the product information without affecting the original layout, so that the display position and visual effect of the target product still meet the expectations.

[0056] S120: Determine the component index corresponding to the target product based on the target layout effect, and index the size data corresponding to the component index from the index library; wherein the index library has previously established an index relationship between a plurality of component indexes and size data by 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 index the size data corresponding to the component index from the index library. Since the index library has previously established an index relationship between a plurality of component indexes and size data by using a combination configuration algorithm, the present application can reduce unnecessary recalculation and directly obtain the size data to be laid out for the target product, thereby improving the efficiency of layout calculation.

[0058] It can be understood that the waterfall page is composed of a plurality of template components of different sizes, and therefore the present application can previously set the component index of each template component by using a combination configuration algorithm. The combination configuration algorithm can generate the component index of each template component in the waterfall page according to different types of display styles and sorting methods, and further 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 page. The index can help the computer device quickly locate the size data of the template component used to display the target product in the page, avoiding the need to recalculate the size data of the template component every time the layout is performed. The size 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. These information are obtained by pre-configuration or algorithm calculation and are used to determine the space size occupied by the target product when displayed in the page. Therefore, through the index library, the computer device can greatly improve the calculation efficiency during page layout, especially when the layout involves a large number of products, which can avoid the performance consumption caused by repeated calculation.

[0060] S130: determine the layout coordinates of the target commodity in the target page based on the size data, and insert the target commodity 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 commodity to be laid out in step S120, the computer device can determine the layout coordinates of the target commodity in the target page based on the size data, and then insert the target commodity into the target page based on the layout coordinates to form a display component, so that the display component of the target commodity can be flexibly adjusted without affecting the layout of other components in the target page.

[0062] Wherein, the target page here refers to a waterfall page for laying out and displaying the target commodity, and the layout coordinates refer to the specific display position of the target commodity in the target page, which is a coordinate value calculated by the size data of the target commodity to be laid out and the page layout logic, including horizontal coordinates and vertical coordinates, indicating the relative or absolute position of the target commodity in the target page.

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

[0064] In the above embodiments, when the waterfall component is laid out, the target commodity to be laid out and the target layout effect corresponding to the target commodity can be determined first as the data basis for the layout of the waterfall component, where the target layout effect can realize the customizable visual display of the target commodity; then the component index corresponding to the target commodity can be determined based on the target layout effect, and the size data corresponding to the component index can be obtained from the index library, where the index library has pre-established an index relationship between a plurality of component indexes and size data by using a combination configuration algorithm, so that unnecessary recalculation can be reduced and the efficiency of layout calculation can be improved; finally, the layout coordinates of the target commodity in the target page can be determined based on the size data, and the target commodity 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 commodity can be flexibly adjusted without affecting other components in the target page. Based on the method, the display style and sorting manner of page layout can be expanded by the target layout effect, the component index and the layout coordinates, and thus the flexibility and customizability of the waterfall component layout can be improved.

[0065] In one embodiment, the determination of the component index corresponding to the target commodity based on the target layout effect in step S120 can include:

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

[0067] S122: determining the component index corresponding to the target commodity based on the layout style and the layout position.

[0068] In this embodiment, when determining the component index corresponding to the target commodity, 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 commodity in the target page, and then determine the component index corresponding to the target commodity based on the layout style and the layout position, so that the display position of the target commodity 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 manner and page design style of each template component on the waterfall page; the size and arrangement manner of the template components in different layout styles are different. The layout position refers to the relative or absolute position of the template component for displaying the target commodity in the waterfall page of any layout style, which determines the display position of the target commodity in the waterfall page.

[0070] It can be understood that the computer device can understand the overall layout rule of the target page and the specific display requirement of the commodity in the page through the analysis of the target layout effect, and obtain the layout style and the layout position. Then the computer device can determine the component index of the target commodity based on the layout style and the layout position, and the component index is not only associated with the visual presentation of the target commodity in the target page, but also closely combined with the specific position of the commodity in the page layout. Through the component index, the computer device can quickly and accurately identify and manage the display position of the target commodity in the target page through the component index, without repeated calculation or processing of complex layout logic, so as to realize efficient and flexible page layout and commodity display.

[0071] In one embodiment, the layout style in step S122 is obtained by combining and splicing a plurality of same 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 commodity based on the layout style and the layout position can include:

[0072] S1221: determining the first ordering of the component combination in which the layout position is located in the layout style, and the second ordering of the template component corresponding to the layout position in the component combination.

[0073] S1222: generating the component index corresponding to the target commodity based on the first ordering and the second ordering.

[0074] In this embodiment, since the layout style is obtained by combining and splicing a plurality of same component combinations, and the component combination is obtained by typesetting a plurality of template components of different sizes; therefore, when determining the component index corresponding to the target commodity, the computer device can first determine the first ordering of the component combination in which the layout position is located in the layout style, and the second ordering of the template component corresponding to the layout position in the component combination, and then generate the component index corresponding to the target commodity based on the first ordering and the second ordering.

[0075] Schematically, as shown in Figure 2 , Figure 2 the structure schematic diagram of the layout page provided by the embodiments of the present application is provided; Figure 2 three layout styles are shown, wherein the style A is obtained by cyclically splicing the component combination of 3+3+1 structure, the style B is obtained by cyclically splicing the component combination of 4+3 structure, and the style C is obtained by cyclically splicing the component combination of 3+3 structure. Taking the style A as an example, the component combination in the style A is obtained by typesetting seven template components of different sizes, which are template components 1-7.

[0076] Specifically, the component index of the application can be saved in the form of key-value, where the key is the first order of the component combination in which the layout position is located in the layout style, and the value is the second order 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, if the layout position of the target commodity is the template component 4 of the first component combination in style A, it can be determined that the key corresponding to the target commodity is 1, and the value is 4, that is, the component index corresponding to the target commodity is 1-4.

[0077] In one embodiment, the step S120 of indexing the component index corresponding to the size data from the index library can include:

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

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

[0080] In this embodiment, when the computer device indexes the size 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 size data corresponding to the component index, so as to improve the accuracy and efficiency of data indexing.

[0081] It can be understood that, as Figure 2 shown, the component index corresponding to style A and style B both exists 1-1 to 1-7, but in different layout styles, the template components corresponding to the same component index are not the same, and therefore the size data corresponding thereto is also not the same. Based on this, the application can construct a style database corresponding to each layout style, and establish an index relationship between each component index and size data under the corresponding layout style in each style database. Therefore, when the computer device indexes data, it can directly index the data 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, as Figure 3 shown, Figure 3 a flowchart of an index relationship establishment process provided by the embodiment of the application; Figure 2 In one embodiment, the establishment process of the index relationship between the component index and the size data in step S120 can include:

[0083] S125: determining a plurality of layout styles, and the layout data of the component combination in each layout style.

[0084] S126: For each layout style, determine the cycle number 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: Based on the cycle number and each layout order, generate the component index of each template component in the layout style in turn, and establish the index relationship between the component index and the size data of each template component.

[0086] In this embodiment, when establishing the index relationship between the component index and the size data, the computer device can first determine a plurality of layout styles and the layout data of the component combination in each layout style, and then for each layout style, the computer device can determine the cycle number 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, so that the component index of each template component in the layout style can be generated in turn based on the cycle number and each layout order, and the index relationship between the component index and the size data of each template component can be established.

[0087] The layout order refers to the arrangement order of each template component in each component combination, such as Figure 2 The component combination of style A in FIG. 6 has a layout order of template component 1 to template component 7 in turn, and the size data refers to the space position and size occupied by the template component in the component combination.

[0088] It can be understood that the cycle number of the component combination in each layout style here can be set according to the size of the waterfall page and the structure of the component combination, for example, as shown in Figure 2 The cycle number of the component combination in style A can be 5, and the cycle number of the component combination in styles B and C can be 7, which is not specifically limited here.

[0089] Specifically, for each template component in the layout style, the computer device can generate a component index in the form of key-value, taking the combination order of the component combination in which the template component is located in the layout style as the key, and taking the layout order of the template component in the component combination as the value. The key in the component index of each layout style is less than or equal to the cycle number of the component combination thereof, and the value is less than or equal to the component number in the component combination thereof.

[0090] In one embodiment, as shown in Figure 4 , FIG. 7 is a flowchart of a layout coordinate determination process provided by an embodiment of the present application; Figure 4 Figure 4 ​In some embodiments, the size data in step S130 includes the component height, the component width, and the layout position direction; and the step of determining the layout coordinates of the target commodity in the target page based on the size data can include:

[0091] S131: determining the component combination in which the target commodity is located in the target page, and the combination order of the component combination in the target page.

[0092] S132: determining the horizontal coordinate of the target commodity in the target page according to the component width and the layout position direction, and determining the vertical coordinate of the target commodity in the target page based on the component height, the layout position direction, and the combination order.

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

[0094] In some embodiments, the size data includes the component height, the component width, and the layout position direction. Based on this, when determining the layout coordinates of the target commodity in the target page based on the size data, the computer device can first determine the component combination in which the target commodity is located in the target page, and the combination order of the component combination in the target page, then determine the horizontal coordinate of the target commodity in the target page according to the component width and the layout position direction, and determine the vertical coordinate of the target commodity in the target page based on the component height, the layout position direction, and the combination order, and finally, the computer device can generate the layout coordinates of the target commodity 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 can also obtain the spacing between the template components in the component combination, so as to calculate the size data in combination with the spacing to obtain the layout coordinates of the target commodity in the target page. For example, for the template component 5 of style A in the target page, according to its layout position direction, it can be determined that in the horizontal direction, the template component 5 is the first template component in the layout style from left to right, so its horizontal coordinate is the component width of the template component 5; in the vertical direction, the template component 5 is the second template component in the layout style from top to bottom, so its vertical coordinate is the superposition of the component width of the template component 5 and the component width of the template component above it and one spacing. Figure 2

[0096] ​Further, after the computer device calculates the layout coordinates of the template component in the target page for the first time, the computer device can store the layout coordinates, so that the computer device can directly obtain the layout coordinates of the template component as the layout coordinates of the target commodity in the next time of referring to the template component, thereby improving the efficiency of the waterfall component layout.

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

[0098] S140: generating a guide bar according to the custom text and the custom height input by the user, and inserting the guide bar into the top of the target page to form a guide component.

[0099] S150: when generating the layout coordinates of the target commodity in the target page with the guide component, determining the layout coordinates of the target commodity in the target page according to the custom height of the guide component and the size data of the target commodity to be laid out.

[0100] In the embodiment, the computer device can further generate a guide bar according to the custom text and the custom height input by the user, and insert the guide bar into the top of the target page to form a guide component, so as to effectively convey information and display commodities on the target page. In addition, when generating the layout coordinates of the target commodity in the target page with the guide component, the computer device can determine the layout coordinates of the target commodity in the target page according to the custom height of the guide component and the size data of the target commodity to be laid out.

[0101] As shown in Figure 5 , a structural schematic diagram of a layout page with a guide component inserted is provided for the embodiment of the present application. Figure 5 As can be seen, the width of the guide bar of the guide component is the width of the target page, and the height of the guide bar can be the custom height defined by the user. The custom text therein is the guide information defined by the user, such as "search results of recommended brands", "related recommendations of other brands", etc. Figure 5 It can be understood that after the guide component is inserted, the structure in the layout style of the target page will change. As can be seen from

[0102] , the insertion of the guide component does not affect the change of the horizontal coordinates in the layout coordinates of the template component, but affects the change of the vertical coordinates, so that when generating the layout coordinates of the target commodity in the target page with the guide component, the custom height of the guide component can be superimposed on the vertical coordinates of the layout coordinates after the layout coordinates are calculated, so as to update the layout coordinates, and thus the flexible adjustment of the waterfall page can be realized without affecting the layout of other components. Figure 5

[0103] ​The waterfall component layout device provided by the embodiments of the present application is described below. The waterfall component layout device described below can be referred to the waterfall component layout method described above.

[0104] In one embodiment, as shown in Figure 6 Figure 6 FIG. 1 is a structural schematic diagram of a waterfall component layout device provided by an embodiment of the present application. The present application also provides a waterfall component layout device, which includes a layout determination module 210, a component index module 220, and a component layout module 230, and specifically includes the following:

[0105] The layout determination module 210 is configured to determine a target commodity to be laid out and a target layout effect corresponding to the target commodity.

[0106] The component index module 220 is configured to determine a component index corresponding to the target commodity based on the target layout effect, and index the size data corresponding to the component index from an index library. The index library has an index relationship between a plurality of component indexes and size data established in advance by using a combination configuration algorithm.

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

[0108] In the above embodiments, when the waterfall component is laid out, the target commodity to be laid out and the target layout effect corresponding to the target commodity can be determined first as the data basis for the waterfall component layout, wherein the target layout effect can realize the customizability of the target commodity display vision. Then, the component index corresponding to the target commodity can be determined based on the target layout effect, and the size data corresponding to the component index can be indexed from the index library. The index library has an index relationship between a plurality of component indexes and size data established in advance by using a combination configuration algorithm, so unnecessary recalculation can be reduced and the efficiency of layout calculation can be improved. Finally, the layout coordinates of the target commodity in the target page can be determined based on the size data, and the target commodity 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 commodity can be flexibly adjusted without affecting other components in the target page. Based on the method, the present application can expand the display style and sorting method of page layout through the target layout effect, component index, and layout coordinates, thereby improving the flexibility and customizability of the waterfall component layout.

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

[0110] ​The layout analysis submodule is configured to analyze the target layout effect to obtain a layout style of the target page and a layout position of the target commodity in the target page.

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

[0112] In an embodiment, the index determination submodule can include:

[0113] The component sorting unit is configured to determine a first sorting of a component combination in which the layout position is located in the layout style and a second sorting of a template component corresponding to the layout position in the component combination.

[0114] The index generation unit is configured to generate the component index corresponding to the target commodity based on the first sorting and the second sorting.

[0115] In an embodiment, the component index module 220 can further include:

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

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

[0118] In an embodiment, the component index module 220 can further include:

[0119] The style determination submodule is configured to determine a plurality of layout styles and layout data of a component combination in each layout style.

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

[0121] The index establishment submodule is configured to generate, based on the cycle number and each layout order, a component index of each template component in the layout style in sequence and establish an index relationship between the component index of each template component and the size data.

[0122] In an embodiment, the component layout module 230 can include:

[0123] The sorting determination submodule is configured to determine a component combination in which the target commodity is located in the target page and a combination sorting of the component combination in the target page.

[0124] The sub-coordinate calculation submodule is configured to determine the horizontal coordinate of the target commodity in the target page according to the component width and the layout position direction, and determine the vertical coordinate of the target commodity in the target page based on the component height, the layout position direction and the combination order.

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

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

[0127] The horizontal bar insertion module is configured to generate a shopping guide horizontal bar according to the user-input custom text and the customized height, 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 configured to determine the layout coordinate of the target commodity in the target page according to the customized height of the shopping guide component and the size data of the target commodity to be laid out when generating the layout coordinate of the target commodity in the target page in which the shopping guide component exists.

[0129] In one embodiment, the present application further provides a storage medium having computer readable instructions stored therein, which, when executed by one or more processors, cause the one or more processors to perform the steps of the waterfall component layout method according to any one of the above embodiments.

[0130] In one embodiment, the present application further provides a computer device having computer readable instructions stored therein, which, when executed by one or more processors, cause the one or more processors to perform the steps of the waterfall component layout method according to any one of the above embodiments.

[0131] As shown in Figure 7 , Figure 7 Fig. 1 shows a schematic diagram of an internal structure of a computer device according to an embodiment of the present application. The computer device 300 can be provided as a server. As shown in 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 program. The application program stored in the memory 301 can include one or more than one module each corresponding to a set of instructions. In addition, the processing component 302 is configured to execute the instructions to perform the waterfall component layout method according to any one of the above embodiments.

[0132] The computer device 300 can 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 can 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 can understand that Figure 7 The structure shown in FIG. 3 is merely a block diagram of part of the structure related to the scheme of the present application, and does not constitute a limitation on the computer device to which the scheme of the present application is applied. A specific computer device can 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 the terms such as first and second, etc. are used herein merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between such entities or operations. Also, the terms "comprises", "comprising", or any other variations thereof are intended to cover a non-exclusive inclusion, so that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but can also include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without more limitations, an element defined by the phrase "comprising a..." does not exclude the existence of additional identical elements in the process, method, article, or apparatus that includes the element.

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

[0136] The above description of the disclosed embodiments enables a person 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 can 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 layout method for components, characterized in that, The method comprises: determining a target commodity to be laid out, and a target layout effect corresponding to the target commodity; determining a component index corresponding to the target commodity based on the target layout effect, and indexing size data corresponding to the component index from an index library; wherein the index library has an index relationship between a plurality of component indexes and size data established in advance by using a combination configuration algorithm; determining layout coordinates of the target commodity in a target page based on the size data, and inserting the target commodity into the target page based on the layout coordinates to form a display component; wherein the determination of the component index corresponding to the target commodity based on the target layout effect comprises: parsing the target layout effect to obtain a layout style of the target page and a layout position of the target commodity in the target page; 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; determining a first order of the component combination in which the layout position is located in the layout style, and a second order of a template component corresponding to the layout position in the component combination; generating the component index corresponding to the target commodity based on the first order and the second order; the process of establishing the index relationship between the component index and the size data comprises: determining a plurality of layout styles and typesetting data of component combinations in each layout style; for each layout style, determining the number of cycles of the component combination in the layout style, and determining the typesetting order and size data of each template component in the component combination based on the typesetting data of the component combination; generating the component index of each template component in the layout style in turn based on the number of cycles and each typesetting order, and establishing the index relationship between the component index of each template component and the size data.

2. The waterfall component layout method of claim 1, wherein, the indexing of the size data corresponding to the component index from the index library comprises: determining a layout style corresponding to the component index, and determining a style database corresponding to the layout style from the index library; indexing the component index in the style database to obtain the size data corresponding to the component index.

3. The waterfall component layout method of claim 1, wherein, The size data includes component height, component width, and layout position direction; the determination of the layout coordinates of the target commodity in the target page based on the size data comprises: determining the component combination in which the target commodity is located in the target page, and the combination order of the component combination in the target page; determining the horizontal coordinate of the target commodity in the target page according to the component width and the layout position direction, and determining the vertical coordinate of the target commodity in the target page based on the component height, the layout position direction, and the combination order; generating the layout coordinates of the target commodity in the target page based on the horizontal coordinate and the vertical coordinate.

4. The waterfall component layout method of claim 1, wherein, The method further comprises: generating a guide bar based on the user-input custom text and custom height, and inserting the guide bar into the top of the target page to form a guide component; In the target page where the guide component exists, the layout coordinates of the target commodity are generated according to the customized height of the guide component and the size data of the target commodity to be laid out.

5. A waterfall component layout apparatus, comprising: Comprise: The layout determination module is used to determine the target commodity to be laid out and the target layout effect corresponding to the target commodity. The component index module is used to determine the component index corresponding to the target commodity based on the target layout effect, and index the size data corresponding to the component index from the index library; wherein the index library has previously established an index relationship between a plurality of component indexes and size data by using a combination configuration algorithm; The component layout module is used to determine the layout coordinates of the target commodity in the target page based on the size data, and insert the target commodity into the target page based on the layout coordinates to form a display component; Wherein, the component index module comprises: The target layout effect is analyzed to obtain the layout style of the target page and the layout position of the target commodity in the target page; the layout style is obtained by combining and splicing a plurality of same components; the component combination is obtained by typesetting a plurality of template components with different sizes; Determine the first order of the component combination in which 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; Generate the component index corresponding to the target commodity based on the first order and the second order; The component index module further comprises: Determine a plurality of layout styles and the typesetting data of the component combination in each layout style; For each layout style, determine the cycle number of the component combination in the layout style, and determine the typesetting order and size data of each template component in the component combination based on the typesetting data of the component combination; Based on the cycle number and each typesetting order, generate the component index of each template component in the layout style in turn, and establish the index relationship between the component index of each template component and the size data.

6. A storage medium characterized by: The storage medium has computer readable instructions stored therein, and the computer readable instructions are executed by one or more processors to cause the one or more processors to perform the steps of the waterfall component layout method according to any one of claims 1 to 4.

7. A computer device, comprising: Comprise: One or more processors, and a memory; The memory has computer readable instructions stored therein, and the computer readable instructions are executed by the one or more processors to perform the steps of the waterfall component layout method according to any one of claims 1 to 4.

Images