Page display method based on flow layout, electronic device and storage medium

Abstract

The application discloses a page display method based on a flow layout, an electronic device and a storage medium. The method comprises the following steps: acquiring the width of a current display element to be displayed; determining the effective residual width of each display row that has been created; identifying a first type of display row and a second type of display row, wherein the first type of display row is a display row that is not created last, and the second type of display row is a display row that is created last; judging whether a target display row with an effective residual width greater than or equal to the current display element to be displayed exists in the first type of display row; if yes, determining the display position of the current display element to be displayed from the target display row; if no, judging whether the second type of display row is the target display row; if yes, determining the display position of the current display element to be displayed from the target display row; and if no, determining the display position of the current display element to be displayed in a new display row. By adopting the scheme, the waste of page resources can be reduced, and the utilization rate of page space can be improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of page display, in particular to a page display method based on a flow layout, an electronic device and a storage medium. BACKGROUND

[0002] With the continuous development of science and technology and society, the flow layout is widely used in the page display of Internet products due to its ability to adapt to display devices of different sizes.

[0003] The page display method based on the flow layout in the prior art is to render the display elements from left to right and from top to bottom in sequence, wherein if a current display row is not enough to accommodate a display element to be displayed, the display element is rendered in a new display row. Figure 1 For example, display elements 1-9 are rendered in sequence, and after display elements 1 and 2 are rendered in the first display row, display element 3 cannot be accommodated in the first display row, so display element 3 and display element 4 are rendered in the second display row, and so on until the rendering of display element 9 is completed.

[0004] However, the inventors have found in the implementation process that the page display method based on the flow layout in the prior art has the following defects: as shown in Figure 1 There are many idle display areas on the right side of the display rows in the page, and thus the page display method based on the flow layout in the prior art causes a waste of many page resources and a low page space utilization rate. SUMMARY

[0005] In view of the above problems, the present application is proposed to provide a page display method based on a flow layout, an electronic device and a storage medium which overcome the above problems or at least partially solve the above problems.

[0006] According to one aspect of the present application, a page display method based on a flow layout is provided, comprising: obtaining the width of a current display element to be displayed; determining the effective remaining width of each display row that has been created; identifying a first type of display row and a second type of display row from the display rows; wherein the first type of display row is a non-last created display row, and the second type of display row is a last created display row; determining whether there is a target display row in the first type of display row; wherein the effective remaining width of the target display row is greater than or equal to the width of the current display element to be displayed;

[0007] If so, determining the display position of the current display element to be displayed from the target display row;

[0008] If no, it is judged whether the second type of display row is a target display row; if the second type of display row is a target display row, the display position of the current display element to be displayed is determined from the target display row; if the second type of display row is not a target display row, a new display row is created, and the display position of the current display element to be displayed is determined in the new display row.

[0009] According to another aspect of the present application, an electronic device is provided, comprising a processor, a memory, a communication interface and a communication bus, the processor, the memory and the communication interface complete communication with each other through the communication bus; the memory is used to store at least one executable instruction, and the executable instruction causes the processor to perform the following operations: obtaining the width of a current display element to be displayed; determining the effective residual width of each display row that has been created; identifying a first type of display row and a second type of display row from the display rows; the first type of display row is a non-last created display row, and the second type of display row is a last created display row.

[0010] It is judged whether a target display row exists in the first type of display row; the effective residual width of the target display row is greater than or equal to the width of the current display element to be displayed.

[0011] If yes, the display position of the current display element to be displayed is determined from the target display row.

[0012] If no, it is judged whether the second type of display row is a target display row; if the second type of display row is a target display row, the display position of the current display element to be displayed is determined from the target display row; if the second type of display row is not a target display row, a new display row is created, and the display position of the current display element to be displayed is determined in the new display row.

[0013] According to still another aspect of the present application, a computer storage medium is provided, and the storage medium stores at least one executable instruction, and the executable instruction causes a processor to perform operations corresponding to the above-mentioned page display method based on a flow layout.

[0014] In the present application, when a display element to be displayed is laid out, it is first judged whether a target display row that can accommodate the display element to be displayed exists in a first type of display row that is not last created, and then it is judged whether a second type of display row that is last created is a target display row in the case that no target display row exists in the first type of display row, so that the waste of page resources can be reduced, and the utilization rate of page space can be improved.

[0015] The above description is only a summary of the technical solutions of the present application. In order to make the technical means of the present application more clearly understood and implemented according to the content of the specification, and in order to make the above and other purposes, features and advantages of the present application more obvious and easy to understand, the following specific embodiments of the present application are described. BRIEF DESCRIPTION OF DRAWINGS

[0016] Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiments. The accompanying drawings are included to provide a description of the preferred embodiments and are not meant to limit the present application. Moreover, the same reference numerals in the attached drawings indicate the same or similar components. In the drawings:

[0017] Figure 1 A page schematic diagram provided by the prior art is shown;

[0018] Figure 2 A flowchart of a page display method based on a flow layout provided by an embodiment of the present application is shown;

[0019] Figure 3 A schematic diagram of a first spacing, a second spacing and a third spacing provided by an embodiment of the present application is shown;

[0020] Figure 4 A page schematic diagram provided by an embodiment of the present application is shown;

[0021] Figure 5 A flowchart of a page display method based on a flow layout provided by an embodiment of the present application is shown;

[0022] Figure 6 A schematic diagram of a first spacing and a third spacing provided by an embodiment of the present application is shown;

[0023] Figure 7 A page schematic diagram provided by an embodiment of the present application is shown;

[0024] Figure 8 Another page schematic diagram provided by an embodiment of the present application is shown;

[0025] Figure 9 A flowchart of a page display method based on a flow layout provided by an embodiment of the present application is shown;

[0026] Figure 10 A page schematic diagram provided by an embodiment of the present application is shown;

[0027] Figure 11 A structural schematic diagram of an electronic device provided by an embodiment of the present application is shown. DETAILED DESCRIPTION

[0028] Exemplary embodiments of the present application will be described herein below with reference to the accompanying drawings. While exemplary embodiments of the present application are shown in the drawings, it is understood that the present application can be embodied in various forms and should not be limited by the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the application to those skilled in the art.

[0029] Embodiment One

[0030] Figure 2 A flowchart of a page display method based on a flow layout is shown. The execution subject of the page display method based on a flow layout provided by the present embodiment can be an electronic device with a display function, such as a mobile phone, a computer, a tablet, a reader, a smart wearable device, and the like. Specifically, as shown in the figure, the method comprises the following steps: Figure 2

[0031] In step S210, the width of the current display element to be displayed is obtained.

[0032] The display element is an element to be displayed in a page, and the present embodiment does not limit the specific content and format of the display element. For example, the display element can be a search result word, a historical search keyword, a recommended word, and the like; and the display element can be in the form of text or picture, and the like. In the present embodiment, the height of the display element can be consistent, but the width of the display element is uneven.

[0033] In the present embodiment, the current display element to be displayed is a display element whose display position is to be determined. As an optional implementation, a display element whose display position has not been determined can be placed in a set of display elements to be displayed, and a display element can be selected from the set in order according to the display order index value of the display element in the set as the current display element to be displayed. After the display position of the current display element to be displayed is determined, the display element is removed from the set of display elements to be displayed, and a new display element is selected from the set of display elements to be displayed as the current display element to be displayed.

[0034] After the width of the current display element to be displayed is determined, the size information of the display element can be extracted from the attribute data of the display element, and the size information includes the width information of the display element, so that the width of the display element can be obtained. Preferably, to adapt to different screen sizes, the width is a percentage width, i.e., the width represents the percentage of the absolute width of the display element to the width of the screen. ​

[0035] Step S220, determine the effective remaining width of each created display row.

[0036] The embodiment of the present application creates display rows in a one-by-one creation manner, that is, a new display row is created only when it is determined that the created display row cannot completely render the current display element to be displayed. Thus, the created display row already has display elements with determined display positions.

[0037] The effective remaining width of a display row specifically refers to the maximum width of a display element that can be accommodated by the display row. For example, the effective remaining width of the first display row is 40%, indicating that the first display row can accommodate a display element with a width less than or equal to 40%.

[0038] In an optional implementation, the effective remaining width of each created display row is specifically determined as follows: for any created display row, the target display element of the last determined display position in the display row is determined, that is, the last display element with a determined display position in the display row is the target display element of the display row; further, the first distance between the first side of the target display element and the first side of the page is calculated, and the configured second distance and third distance are obtained; and the effective remaining width of the display row is first distance-(second distance+third distance). The second distance is the configured distance between two adjacent display elements, and the third distance is the minimum distance between the first side of the display element and the first side of the page, the first side being the side parallel to the page height direction. If the display element layout manner is from left to right, the first side is the right side, and if the display element layout manner is from right to left, the first side is the left side.

[0039] For example, the current display element to be displayed is display element 3, and the created display row is the first display row. The first display row has display element 1 and display element 2 arranged according to the layout manner from left to right, wherein display element 2 is the last display element with a determined display position in the first display row, and the target display element in the first display row is display element 2. The distance between the right side of display element 2 and the right side of the page is the first distance d1, the distance between two adjacent display elements (such as display element 1 and display element 2) configured is the second distance d2, and the minimum distance between the right side of the display element and the right side of the page configured is the third distance d3. Thus, the current effective remaining width d of the first display row is d1-(d2+d3). The d represents the maximum width of the display element that can be accommodated in the first display row. Figure 3 Figure 3

[0040] ​​Step S230, identifying the current first type of display row and the second type of display row from the display rows; wherein the first type of display row is a non-last created display row, and the second type of display row is a last created display row.

[0041] Embodiments of the present application divide the created display rows into the first type of display row and the second type of display row. The second type of display row is the last created display row, and the first type of display row is other display rows except the second type of display row.

[0042] Step S240, judging whether the target display row exists in the first type of display row; wherein the effective remaining width of the target display row is greater than or equal to the width of the current display element to be displayed; if yes, executing step S260, and if no, executing step S250.

[0043] In the prior art, each time when the display element to be displayed is laid out, it is only judged whether the last created display row can accommodate the display element to be displayed. The difference between the embodiments of the present application and the prior art is that the embodiments of the present application are to identify the target display row which can accommodate the current display element to be displayed in advance from the first type of display row. In the case that the target display row exists in the first type of display row, step S260 is executed; in the case that the target display row does not exist in the first type of display row, step S250 is executed.

[0044] In an optional embodiment, the following method can be used to judge whether the target display row exists in the first type of display row: the first type of display rows are traversed in the order of the creation time; it is judged whether the effective remaining width of the current traversed first type of display row is greater than or equal to the width of the current display element to be displayed; if yes, the current traversed first type of display row is taken as the target display row; if no, the next first type of display row is traversed, and the step of judging whether the effective remaining width of the current traversed first type of display row is greater than or equal to the width of the current display element to be displayed is executed. The above steps are circularly executed until the target display row is determined or all the first type of display rows are traversed. If the target display row cannot be determined after all the first type of display rows are traversed, it indicates that the target display row does not exist in the current created first type of display row. By using this method, the accuracy of the target display row can be improved, and the page utilization rate and the original display order of the display element can be taken into account.

[0045] Step S250, judging whether the second type of display row is the target display row; if yes, executing step S260; if no, executing step S270.

[0046] In the case that the target display row does not exist in the first type of display rows, it is judged whether the second type of display row is the target display row. Specifically, it is judged whether the effective remaining width of the second type of display row is greater than or equal to the width of the display element to be displayed; if yes, the second type of display row is determined as the target display row, and step S260 is further executed; if no, step S270 is executed.

[0047] In step S260, the display position of the display element to be displayed is determined in the target display row.

[0048] For the target display row in the created display rows that can accommodate the display element to be displayed, the display position of the display element to be displayed is determined in the remaining space of the target display row.

[0049] In step S270, a new display row is created, and the display position of the display element to be displayed is determined in the new display row.

[0050] If there is no target display row in the created display rows that can accommodate the display element to be displayed, the display position of the display element to be displayed is determined in the new display row. The difference between the embodiment of the present application and the prior art will be described in detail below in combination with Figure 1 and Figure 4 In the process of determining the display position of the display element 1-9, if the display element to be displayed is the display element 4, the prior art displays the display element 4 in the second display row (i.e., the currently last created display row); while the present application displays the display element 4 in the first display row (i.e., the currently not last created display row). The Figure 1 contains 6 display rows, while the Figure 4 contains only 5 display rows, thereby improving the utilization rate of the page space.

[0051] It can be seen that, in the embodiment of the present application, when the display element to be displayed is laid out, it is first judged whether the first type of display row that is not last created contains the target display row that can accommodate the display element to be displayed, and then it is judged whether the second type of display row that is last created is the target display row in the case that the target display row does not exist in the first type of display row, thereby reducing the waste of page resources and improving the utilization rate of the page space.

[0052] Embodiment Two

[0053] Figure 5 A flowchart of a page display method provided by the embodiment two of the present application is shown. The page display method provided by the embodiment of the present application is a further improvement based on the method in the embodiment one. Specifically, as shown in Figure 4 , although the page layout obtained by using the method in the embodiment one contains 6 display rows, the page layout obtained by using the method in the embodiment two contains only 5 display rows, thereby improving the utilization rate of the page space.Figure 4 Compared with the page space obtained by using the prior art Figure 1 Waste of page space resources can be reduced, and utilization of page space can be improved Figure 4 There are still disadvantages of unevenness of the right ends of the display elements, thereby affecting the display effect of the page and reducing the browsing experience of the user. In view of this, after the display positions of the display elements are determined by using the method in Embodiment 1, the display positions in Embodiment 1 are further corrected in the embodiment of the application, so as to obtain corrected display positions, so that the display elements after the correction processing can be aligned. As shown in Figure 5 The method comprises the following steps:

[0054] Step S510, after the display positions of the display elements are determined, for any display row, a target display element with a last determined display position in the display row is determined.

[0055] After the display positions of the display elements are determined, no new display row is created, and no new display element is added in the created display row. Therefore, after the display positions of the display elements are determined, the number of the display rows is fixed, and the target display element with the last determined display position in the display row is fixed.

[0056] Step S520, a first distance between the first side of the target display element and the first side of the page is calculated, and a third distance configured is obtained; wherein the third distance is the minimum distance between the first side of the display element and the first side of the page.

[0057] The related description of the first distance and the third distance can be referred to the description in Embodiment 1, which is not repeated here. As shown in Figure 6 d3 is the minimum distance between the right side of the display element and the right side of the page, which is configured in advance; d 1-1 is the first distance between the right side of the last display element of the first display row and the right side of the page, d 1-2 is the first distance of the second display row, d 1-3 is the first distance of the third display row, d 1-4 is the first distance of the fourth display row, d 1-5 is the first distance of the fifth display row.

[0058] Step S530, a difference value between the first distance and the third distance is calculated.

[0059] Still taking Figure 6 as an example, the difference value corresponding to the first display row is d 1-1 -d3, the difference value corresponding to the second display row is d 1-2 -d3, the difference value corresponding to the third display row is d 1-3 -d3, the difference value corresponding to the fourth display row is d 1-4-d3, the difference value corresponding to the fifth display row is d. 1-5 -d3.

[0060] Step S540: Based on the difference, the width of at least one display element in the display row is corrected, and the corrected display position of each display element in the display row after the correction is determined; wherein, after the correction, the difference between the first spacing and the third spacing in the display row is a preset difference.

[0061] Based on the differences obtained in step S530, the width of the display elements contained in each display row is corrected, so that the corrected difference between the first and third spacings of the display row after the correction process is a preset difference, thereby achieving the alignment of the display elements in the display row. Figure 7 As shown, after the correction, the elements displayed in the display row can be right-aligned, thereby improving the page display effect.

[0062] In one alternative implementation, for any given display row, the difference corresponding to that display row and the number of display elements contained therein are determined, and then the difference / number of display elements is used as the width that each display element in that display row needs to increase.

[0063] In another optional implementation, to further improve the page display effect, during the correction process, specifically, it is determined whether the difference corresponding to each display row is less than a preset threshold. If so, the display row is determined to be a third-type display row, and the width of at least one display element in the display row is corrected according to the difference; otherwise, the display row is determined to be a fourth-type display row, and the width of the display elements in the display row is not corrected. Figure 6 For example, since the difference corresponding to the fourth display row is greater than or equal to the preset difference, the display row is determined to be the fourth type of display row, and the width of display element 8 in the display row is not corrected, so as to avoid the display element 8 being significantly different from the original size after correction, which would affect the user's visual experience.

[0064] Further optionally, embodiments of the present invention further include: determining whether a fourth type of display row exists among the created display rows; if so, adjusting the display order of the created display rows so that the display order of the fourth type of display row is later than the display order of the third type of display row. Combined with Figure 6 and Figure 8 , Figure 6 Since the difference corresponding to the fourth display row is greater than or equal to the threshold difference, this fourth display row is classified as a fourth-type display row, while the other display rows are classified as third-type display rows. Therefore, the width of element 8 in the fourth display row is not changed, but the widths of the other display elements are changed, and the display order of the fourth display row is moved to the end, thus generating the following... Figure 8The schematic diagram is shown, thereby further improving the page display effect and improving the visual experience of the user.

[0065] It can be seen that, after the display positions of the respective display elements are determined, the display positions are further corrected to obtain corrected display positions, so that the display elements in the parallel height direction of the page after the correction processing can be aligned, the page display effect is improved, and the visual experience of the user is improved.

[0066] Embodiment Three

[0067] Figure 9 A flowchart of a page display method based on a flow layout is shown. The page display method provided by the embodiment of the application is a further optimization of the page display method provided by the above-mentioned embodiment one and / or embodiment two. As shown in the figure, the method comprises the following steps: Figure 9

[0068] In step S910, the display order index value of each display element is obtained, and each display element is clustered based on the display order index value of each display element to generate at least one cluster. Each cluster contains at least one display element.

[0069] The display order index value can be obtained by using a corresponding processing algorithm, which is not limited in the embodiment of the application. For example, the display element is a search result, and the display order index value is the matching degree between the search result and the search word. For example, the display element is a recommended word, and the display order index value is the matching degree between the recommended word and the user portrait. The higher the matching degree, the lower the display order index value, indicating that the display result needs to be displayed preferentially. According to the display order index value of the display element, each display element is clustered. The specific clustering algorithm is not limited in the embodiment of the application, for example, a density-based clustering algorithm can be used, and a distance-based clustering algorithm can also be used. After clustering, at least one cluster is generated, and each cluster contains at least one display element. The display order index values of the display elements contained in each cluster are highly close.

[0070] In step S920, the current cluster to be displayed is determined, and the width of the current display element to be displayed is obtained from the current cluster to be displayed.

[0071] ​In an alternative embodiment, the current cluster to be displayed is determined according to the size order of the average value of the display order index value corresponding to each cluster. Specifically, the average value of the display order index value of each display element included in each cluster is calculated, and then the clusters are arranged in the order of the average value from small to large. When the method is performed for the first time, the cluster with the smallest average value is obtained as the current cluster to be displayed. After the display positions of all display elements in the current cluster to be displayed are determined, the cluster with the smallest average value from the clusters that have not been processed is selected as the current cluster to be displayed. When the display positions of all display elements in the current cluster to be displayed are not determined, the cluster is still regarded as the current cluster to be displayed. For example, the clusters are arranged in the order of the average value from small to large as follows: cluster C1 < cluster C2 < cluster C3. Then, cluster C1 is selected as the current cluster to be processed. After the display positions of all display elements in cluster C1 are determined, cluster C2 is selected as the current cluster to be processed. After the current cluster to be displayed is determined, the width of the current display element to be displayed is obtained from the current cluster to be displayed.

[0072] In step S930, the effective remaining width of each display row created for the current cluster to be displayed is determined.

[0073] In the embodiment of the present application, each cluster corresponds to a corresponding display row, i.e., the display position of each display element in each cluster is limited in the display row corresponding to the cluster. In an alternative embodiment, the last display row created for the last cluster to be displayed is regarded as the first display row created for the current cluster to be displayed. The display rows created for the current cluster to be displayed refer to the display rows starting from the first display row created for the current cluster to be displayed to the current display row.

[0074] In addition, for the first to-be-displayed cluster, the created display row corresponding to the cluster refers to the display row generated from the starting point of processing to the current time. For example, in the order of the average value corresponding to the cluster from small to large, cluster C1 < cluster C2 < cluster C3, the created display row corresponding to cluster C1 is the display row generated from the first display element of C1 to the current time; after processing the last display element in cluster C1, the current generated display row is display row 5, which indicates that display row 5 is the last created display row of cluster C1, and the created display row corresponding to cluster C2 is the display row generated from the creation time of display row 5 to the current time, that is, display row 5 is the first created display row of cluster C2. After processing the last display element in cluster C2, the current generated display row is display row 8, which indicates that display row 8 is the last created display row of cluster C2, and the created display row corresponding to cluster C3 is the display row generated from the creation time of display row 8 to the current time, that is, display row 8 is the first created display row of cluster C3.

[0075] Step S940, identifying the first type of display row and the second type of display row corresponding to the current to-be-displayed cluster from the created display rows corresponding to the current to-be-displayed cluster.

[0076] The first type of display row is the non-last created display row in the created display rows corresponding to the current to-be-displayed cluster, and the second type of display row is the last created display row in the created display rows corresponding to the current to-be-displayed cluster.

[0077] Step S950, determining whether the target display row exists in the first type of display row corresponding to the current to-be-displayed cluster; if not, performing step S960; if yes, performing step S970.

[0078] Step S960, determining whether the second type of display row corresponding to the current to-be-displayed cluster is the target display row; if yes, performing step S970, if not, performing step S980.

[0079] Step S970, determining the display position of the current to-be-displayed display element from the target display row.

[0080] Step S980, creating a new display row corresponding to the current to-be-displayed cluster, and determining the display position of the current to-be-displayed display element in the new display row.

[0081] In the above embodiment, the display row corresponding to the cluster is created in the order of the average value corresponding to the cluster from small to large, but the present application is not limited thereto. For example, the display row corresponding to the cluster can be created in the order of the average value corresponding to the cluster from large to small. Figure 10For example, the class cluster C1 contains display elements 1-9, the class cluster C2 contains display elements 10-14, and the display rows corresponding to the class cluster C1 include the first to fifth display rows. The display rows corresponding to the class cluster C2 include the fifth to seventh display rows. When the display element 10 is laid out in the class cluster C2, since the created display row corresponding to the class cluster C2 is the fifth display row at this time, even if the fourth display row can accommodate the display element 10, the display element 10 is no longer laid out in the fourth display row.

[0082] Therefore, according to the embodiment of the present application, the clustering processing is performed according to the display order index value of the display element, so that at least one class cluster is generated, and the display order index value of the display element contained in each class cluster is highly close. Each class cluster has a corresponding display row range, so that the display element of the class cluster is only allowed to be rearranged in the display row range, so that the display element with a too high display order index value is avoided from being displayed too early, and the utilization of the page space and the original display order of the display element are taken into account.

[0083] Embodiment Four

[0084] The embodiment four of the present application provides a non-volatile computer storage medium, and the computer storage medium stores at least one executable instruction. The computer executable instruction can execute the method in any method embodiment.

[0085] The executable instruction can be specifically used to make the processor execute the following operations: obtaining the width of a current display element to be displayed; determining the effective remaining width of each created display row; identifying a first type of display row and a second type of display row from the display rows; the first type of display row is a non-last created display row, and the second type of display row is a last created display row; judging whether there is a target display row in the first type of display row; the effective remaining width of the target display row is greater than or equal to the width of the current display element to be displayed; if yes, determining the display position of the current display element to be displayed from the target display row; if no, judging whether the second type of display row is a target display row; if the second type of display row is a target display row, determining the display position of the current display element to be displayed from the target display row; if the second type of display row is not a target display row, creating a new display row, and determining the display position of the current display element to be displayed in the new display row.

[0086] In an alternative embodiment, the executable instructions cause the processor to perform the following operations: sequentially traversing the first type of display lines in the order of the creation time of the first type of display lines; determining whether the effective remaining width of the currently traversed first type of display line is greater than or equal to the width of the currently to-be-displayed display element; if yes, taking the currently traversed first type of display line as the target display line; if no, traversing the next first type of display line and performing the step of determining whether the effective remaining width of the currently traversed first type of display line is greater than or equal to the width of the currently to-be-displayed display element.

[0087] In an alternative embodiment, the executable instructions cause the processor to perform the following operations: for any created display line, determining the target display element with the last determined display position in the display line; calculating the first spacing between the first side of the target display element and the first side of the page, and obtaining the configured second spacing and third spacing; wherein the second spacing is the spacing between two adjacent display elements, and the third spacing is the minimum spacing between the first side of the display element and the first side of the page; and the effective remaining width of the display line is the first spacing minus (the second spacing plus the third spacing).

[0088] In an alternative embodiment, the executable instructions cause the processor to perform the following operations: after determining the display positions of the display elements, for any display line, determining the target display element with the last determined display position in the display line; calculating the first spacing between the first side of the target display element and the first side of the page, and obtaining the configured third spacing; wherein the third spacing is the minimum spacing between the first side of the display element and the first side of the page; calculating the difference between the first spacing and the third spacing; modifying the width of at least one display element in the display line according to the difference, and determining the modified display positions of the display elements in the display line after the modification; wherein the modified difference between the first spacing and the third spacing in the display line after the modification is a preset difference.

[0089] In an alternative embodiment, the executable instructions cause the processor to perform the following operations: determining whether the difference is less than a preset threshold; if yes, determining that the display line is a third type of display line, and modifying the width of at least one display element in the display line according to the difference; if no, determining that the display line is a fourth type of display line, and not modifying the width of the display elements in the display line.

[0090] In an alternative embodiment, the executable instructions cause the processor to perform the following operations: determining whether there is a fourth type of display line in the created display lines; if yes, adjusting the display order of the created display lines so that the display order of the fourth type of display line is later than the display order of the third type of display line.

[0091] In one optional implementation, the executable instructions cause the processor to perform the following operations: before obtaining the width of the currently displayed element, obtain the display order index value of each display element; based on the display order index value of each display element, perform clustering processing on each display element to generate at least one cluster; wherein each cluster contains at least one display element.

[0092] In one optional implementation, the executable instructions cause the processor to perform the following operations: determine the current cluster to be displayed; obtain the width of the display element to be displayed from the current cluster to be displayed; determine the effective remaining width of each created display row corresponding to the current cluster to be displayed; identify the first type display row and the second type display row corresponding to the current cluster to be displayed from the created display rows corresponding to the current cluster to be displayed; determine whether there is a target display row in the first type display row corresponding to the current cluster to be displayed; and determine whether the second type display row corresponding to the current cluster to be displayed is the target display row.

[0093] In one alternative implementation, the executable instructions cause the processor to perform the following operation: take the last created display row corresponding to the previous cluster to be displayed as the first created display row corresponding to the current cluster to be displayed.

[0094] In one alternative implementation, the executable instructions cause the processor to perform the following operation: determine the current cluster to be displayed based on the average value of the display order index corresponding to the cluster.

[0095] Therefore, when laying out the display element to be displayed, the embodiments of the present invention first determine whether there is a target display row in the first type of display row that is not the last created row that can accommodate the display element to be displayed. If there is no target display row in the first type of display row, then it determines whether the last created second type of display row is the target display row. This can reduce the waste of page resources and improve the utilization rate of page space.

[0096] Example 5

[0097] Figure 11 A schematic diagram of an electronic device according to Embodiment 5 of the present invention is shown. The specific embodiments of the present invention do not limit the specific implementation of the electronic device. Figure 11 As shown, the electronic device may include: a processor 1102, a communications interface 1104, a memory 1106, and a communications bus 1108.

[0098] The processor 1102, the communication interface 1104, and the memory 1106 communicate with each other through a communication bus 1108. The communication interface 1104 is configured to communicate with network elements such as clients or other servers. The processor 1102 is configured to execute the program 1110, and can execute the related steps in the above method embodiments. Specifically, the program 1110 can include program code including computer operation instructions. The processor 1102 can be a central processing unit (CPU), or an application specific integrated circuit (ASIC), or one or more integrated circuits configured to implement embodiments of the present application. One or more processors included in the electronic device can be the same type of processor, such as one or more CPUs; or can be different types of processors, such as one or more CPUs and one or more ASICs. The memory 1106 is configured to store the program 1110. The memory 1106 can include a high-speed RAM memory, and can also include a non-volatile memory such as at least one disk memory.

[0099] The program 1110 can be specifically configured to cause the processor 1102 to perform the following operations: obtaining a width of a current display element to be displayed; determining effective remaining widths of each display row that has been created; identifying a first type of display row and a second type of display row from the display rows; the first type of display row is a non-last created display row, and the second type of display row is a last created display row; determining whether there is a target display row in the first type of display row; the effective remaining width of the target display row is greater than or equal to the width of the current display element to be displayed; if yes, determining a display position of the current display element to be displayed from the target display row; if no, determining whether the second type of display row is a target display row; if the second type of display row is a target display row, determining a display position of the current display element to be displayed from the target display row; if the second type of display row is not a target display row, creating a new display row, and determining a display position of the current display element to be displayed in the new display row.

[0100] In an alternative implementation, the program 1110 can be specifically configured to cause the processor 1102 to perform the following operations: sequentially traversing the first type of display lines in the order of the creation time of the first type of display lines; determining whether the effective remaining width of the currently traversed first type of display line is greater than or equal to the width of the currently to-be-displayed display element; if yes, taking the currently traversed first type of display line as the target display line; if no, traversing the next first type of display line and performing the step of determining whether the effective remaining width of the currently traversed first type of display line is greater than or equal to the width of the currently to-be-displayed display element.

[0101] In an alternative implementation, the program 1110 can be specifically configured to cause the processor 1102 to perform the following operations: for any created display line, determining the target display element with the last determined display position in the display line; calculating the first interval between the first side of the target display element and the first side of the page, and obtaining the configured second interval and third interval; wherein the second interval is the interval between two adjacent display elements, and the third interval is the minimum interval between the first side of the display element and the first side of the page; and the effective remaining width of the display line is the first interval minus (the second interval plus the third interval).

[0102] In an alternative implementation, the program 1110 can be specifically configured to cause the processor 1102 to perform the following operations: after determining the display positions of the display elements, for any display line, determining the target display element with the last determined display position in the display line; calculating the first interval between the first side of the target display element and the first side of the page, and obtaining the configured third interval; wherein the third interval is the minimum interval between the first side of the display element and the first side of the page; calculating the difference between the first interval and the third interval; modifying the width of at least one display element in the display line according to the difference, and determining the modified display positions of the display elements in the display line after the modification; wherein the modified difference between the first interval and the third interval in the display line after the modification is a preset difference.

[0103] In an alternative implementation, the program 1110 can be specifically configured to cause the processor 1102 to perform the following operations: determining whether the difference is less than a preset threshold; if yes, determining that the display line is a third type of display line, and modifying the width of at least one display element in the display line according to the difference; if no, determining that the display line is a fourth type of display line, and not modifying the width of the display elements in the display line.

[0104] In an optional implementation, the program 1110 can be specifically configured to cause the processor 1102 to perform the following operation: determining whether a fourth type of display row exists in the created display rows; and adjusting the display order of the created display rows so that the display order of the fourth type of display row is later than the display order of the third type of display row.

[0105] In an optional implementation, the program 1110 can be specifically configured to cause the processor 1102 to perform the following operation: obtaining the display order index value of each display element before obtaining the width of the current display element to be displayed; and performing clustering processing on each display element based on the display order index value of each display element to generate at least one cluster; wherein each cluster contains at least one display element.

[0106] In an optional implementation, the program 1110 can be specifically configured to cause the processor 1102 to perform the following operation: determining a current cluster to be displayed, obtaining the width of the current display element to be displayed from the current cluster to be displayed; determining the effective remaining width of each created display row corresponding to the current cluster to be displayed; identifying a first type of display row and a second type of display row corresponding to the current cluster to be displayed from each created display row corresponding to the current cluster to be displayed; determining whether a target display row exists in the first type of display row corresponding to the current cluster to be displayed; and determining whether a target display row exists in the second type of display row corresponding to the current cluster to be displayed.

[0107] In an optional implementation, the program 1110 can be specifically configured to cause the processor 1102 to perform the following operation: taking the last created display row corresponding to the last cluster to be displayed as the first created display row corresponding to the current cluster to be displayed.

[0108] In an optional implementation, the program 1110 can be specifically configured to cause the processor 1102 to perform the following operation: determining the current cluster to be displayed according to the size order of the average value of the display order index value corresponding to the cluster.

[0109] Therefore, in the embodiment of the present application, when the display element to be displayed is arranged, it is first determined whether a target display row capable of accommodating the display element to be displayed exists in the first type of display row which is not the last created display row, and then it is determined whether the last created second type of display row is a target display row in the case that no target display row exists in the first type of display row, so that the waste of page resources can be reduced and the utilization rate of page space can be improved.

[0110] The algorithms and displays presented herein are not inherently related to any particular computer, virtual system, or other apparatus. Various general purpose systems can be used with programs in accordance with the teachings herein, or it can prove convenient to construct more specialized apparatus to perform the required method steps. The required structure for a variety of these systems will be apparent from the description above. In addition, the present embodiments are not described with reference to any particular programming language. It will be appreciated that a variety of programming languages can be used to implement the teachings of the application as described herein, and any references below to specific languages are provided for disclosure of enablement only.

[0111] In the description provided herein, numerous specific details are set forth. However, it is understood that embodiments of the application can be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been described in detail in order to avoid obscuring the understanding of this description.

[0112] Similarly, it is to be understood that the mechanical details of the application that have been set forth in the description above of exemplary embodiments of the application are intended to be illustrative only. As such, the scope of the application is not to be construed as being limited to such preferred embodiments. In general, the number of embodiments in which concepts of the present application can be

[0113] Those skilled in the art will appreciate that the modules in the apparatuses in the embodiments can be adapted and placed in one or more apparatuses other than the embodiments. The modules or units or components in the embodiments can be combined into one module or unit or component, and further can be divided into more sub-modules or sub-units or sub-components. Any combination of all the features disclosed in the specification (including the accompanying claims, abstract and drawings), and any method or apparatus so disclosed, can be used in any combination, except that at least some of such features and / or processes or units are mutually exclusive, unless explicitly stated otherwise. Each feature disclosed in the description (including the accompanying claims, abstract and drawings) can be replaced by alternative features serving the same, equivalent or a similar purpose, unless expressly stated otherwise.

[0114] Furthermore, those skilled in the art will recognize that, while certain embodiments described herein include certain features that are not included in other embodiments, combinations of features of the different embodiments are meant to be within the scope of the application and form different embodiments. For example, in the claims below, any of the claimed embodiments can be used in any combination.

[0115] Various component embodiments of the application can be implemented in hardware, or as software modules running in one or more processors, or in combinations thereof. Those skilled in the art will appreciate that a microprocessor or digital signal processor (DSP) can be used in practice to implement some or all of the functionality of some or all of the components according to embodiments of the application. The application can also be implemented as a program of instructions for performing part or all of the methods described herein, e.g., a computer program and a computer program product. Such program of the application can be stored on a computer readable medium, or can be in the form of one or more signals. Such signals can be downloaded from an Internet website, or provided on a carrier medium, or in any other form.

[0116] It is noted that the foregoing examples have been provided merely for the purpose of explanation and are in no way to be construed as limiting of the present application. While the application has been described with reference to preferred embodiments, it is understood that the words which have been used herein are words of description, and that changes can be made within the scope and spirit of the application. In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word comprising does not exclude the presence of elements or steps not listed in a claim. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The application can be implemented by means of hardware comprising several distinct elements, and by means of a suitably programmed computer. In the system claims enumerating several means, several of these means can be embodied by one and the same item of hardware. The use of the words first, second, third, etc. do not imply any order. These words have been used to name the elements and their sequence does not have any significance. The steps of any of the methods disclosed herein do not have to be performed in the order disclosed, unless otherwise specified.

Claims

1. A page display method based on fluid layout, comprising: Obtain the display order index value for each display element; where, if the display element is a search result, the display order index value is the matching degree between the search result and the search term; if the display element is a recommended term, the display order index value is the matching degree between the recommended term and the user profile. Based on the display order index value of each display element, the display elements are clustered to generate at least one cluster; wherein each cluster contains at least one display element. Determine the current cluster to be displayed, and obtain the width of the display element to be displayed from the current cluster to be displayed; Determine the effective remaining width of each created display row corresponding to the currently displayed cluster; Identify the first type of display row and the second type of display row corresponding to the currently to be displayed cluster from the existing display rows corresponding to the cluster to be displayed; wherein, the first type of display row is not the last created display row, and the second type of display row is the last created display row; Determine whether a target display row exists in the first type of display row corresponding to the currently to be displayed cluster; wherein the effective remaining width of the target display row is greater than or equal to the width of the currently to be displayed element; If so, determine the display position of the currently displayed element from the target display row; If not, determine whether the second type of display row corresponding to the current cluster to be displayed is the target display row; if the second type of display row is the target display row, determine the display position of the current display element to be displayed from the target display row; if the second type of display row is not the target display row, create a new display row and determine the display position of the current display element to be displayed from the new display row.

2. The method according to claim 1, wherein, The step of determining whether the target display row exists in the first type of display row corresponding to the currently displayed cluster further includes: The first type of display rows are traversed sequentially according to their creation time. Determine whether the effective remaining width of the first type of display row being traversed is greater than or equal to the width of the currently displayed element; If so, then the first row of the currently traversed display category will be taken as the target display row; If not, then traverse the next first-type display row and execute the step of determining whether the effective remaining width of the currently traversed first-type display row is greater than or equal to the width of the currently displayed element.

3. The method according to claim 1, wherein, The determination of the effective remaining width of each created display row corresponding to the currently displayed cluster further includes: For any created display row, determine the last target display element in that row whose display position is determined; Calculate the first spacing between the first side of the target display element and the first side of the page, and obtain the configured second and third spacing; wherein, the second spacing is the spacing between two adjacent display elements, and the third spacing is the minimum spacing between the first side of the display element and the first side of the page; The effective remaining width of the display row is then the first spacing minus (the second spacing plus the third spacing).

4. The method according to any one of claims 1-3, wherein, After determining the display position of each display element, the method further includes: For any given row, determine the last target display element in that row whose display position is determined; Calculate the first spacing between the first edge of the target display element and the first edge of the page, and obtain the configured third spacing; wherein, the third spacing is the minimum spacing between the first edge of the display element and the first edge of the page; Calculate the difference between the first spacing and the third spacing; The width of at least one display element in the display row is corrected based on the difference, and the corrected display position of each display element in the display row is determined after the correction process; wherein, the corrected difference between the first spacing and the third spacing in the display row after the correction process is a preset difference.

5. The method according to claim 4, wherein, The step of correcting the width of at least one display element in the display row based on the difference further includes: Determine whether the difference is less than a preset threshold; If so, determine that the display behavior is a third type of display row, and correct the width of at least one display element in the display row according to the difference; If not, the display behavior is determined to be a fourth type of display row, and the width of the displayed elements in the display row is not modified.

6. The method according to claim 5, wherein, The method further includes: Determine if a fourth type of display row exists among the created display rows; If so, adjust the display order of the created display rows so that the display order of the fourth type of display rows is later than the display order of the third type of display rows.

7. The method according to any one of claims 1-3, wherein, The last created display row corresponding to the previous cluster to be displayed is used as the first created display row corresponding to the current cluster to be displayed.

8. The method according to any one of claims 1-3, wherein, The step of determining the current cluster to be displayed further includes: determining the current cluster to be displayed based on the average value of the display order index corresponding to the cluster.

9. An electronic device, comprising: The processor, memory, communication interface, and communication bus are provided, wherein the processor, memory, and communication interface communicate with each other via the communication bus. The memory is used to store at least one executable instruction, which causes the processor to perform the following operations: Obtain the display order index value for each display element; where, if the display element is a search result, the display order index value is the matching degree between the search result and the search term; if the display element is a recommended term, the display order index value is the matching degree between the recommended term and the user profile. Based on the display order index value of each display element, the display elements are clustered to generate at least one cluster; wherein each cluster contains at least one display element. Determine the current cluster to be displayed, and obtain the width of the display element to be displayed from the current cluster to be displayed; Determine the effective remaining width of each created display row corresponding to the currently displayed cluster; Identify the first type of display row and the second type of display row corresponding to the currently to be displayed cluster from the existing display rows corresponding to the cluster to be displayed; wherein, the first type of display row is not the last created display row, and the second type of display row is the last created display row; Determine whether a target display row exists in the first type of display row corresponding to the currently to be displayed cluster; wherein the effective remaining width of the target display row is greater than or equal to the width of the currently to be displayed element; If so, determine the display position of the currently displayed element from the target display row; If not, determine whether the second type of display row corresponding to the current cluster to be displayed is the target display row; if the second type of display row is the target display row, determine the display position of the current display element to be displayed from the target display row; if the second type of display row is not the target display row, create a new display row and determine the display position of the current display element to be displayed from the new display row.

10. The electronic device according to claim 9, wherein, The executable instructions cause the processor to perform the following operation: traverse the first type of display rows sequentially according to the creation time of the first type of display rows; Determine whether the effective remaining width of the first type of display row being traversed is greater than or equal to the width of the currently displayed element; If so, then the first row of the currently traversed display category will be taken as the target display row; If not, then traverse the next first-type display row and execute the step of determining whether the effective remaining width of the currently traversed first-type display row is greater than or equal to the width of the currently displayed element.

11. The electronic device according to claim 9, wherein, The executable instructions cause the processor to perform the following operation: for any created display row, determine the last target display element in the display row whose display position is determined; Calculate the first spacing between the first side of the target display element and the first side of the page, and obtain the configured second and third spacing; wherein, the second spacing is the spacing between two adjacent display elements, and the third spacing is the minimum spacing between the first side of the display element and the first side of the page; The effective remaining width of the display row is then the first spacing minus (the second spacing plus the third spacing).

12. The electronic device according to any one of claims 9-11, wherein, The executable instructions cause the processor to perform the following operations: after determining the display position of each display element, for any display row, determine the last target display element in the display row whose display position is determined; Calculate the first spacing between the first edge of the target display element and the first edge of the page, and obtain the configured third spacing; wherein, the third spacing is the minimum spacing between the first edge of the display element and the first edge of the page; Calculate the difference between the first spacing and the third spacing; The width of at least one display element in the display row is corrected based on the difference, and the corrected display position of each display element in the display row is determined after the correction process; wherein, the corrected difference between the first spacing and the third spacing in the display row after the correction process is a preset difference.

13. The electronic device according to claim 12, wherein, The executable instructions cause the processor to perform the following operation: determine whether the difference is less than a preset threshold; If so, determine that the display behavior is a third type of display row, and adjust the width of each display element in the display row according to the difference; If not, the display behavior is determined to be a fourth type of display row, and the width of the displayed elements in the display row is not modified.

14. The electronic device according to claim 13, wherein, The executable instructions cause the processor to perform the following operation: determine whether a fourth type of display row exists among the created display rows; If so, adjust the display order of the created display rows so that the display order of the fourth type of display rows is later than the display order of the third type of display rows.

15. The electronic device according to any one of claims 9-11, wherein, The executable instructions cause the processor to perform the following operation: take the last created display row corresponding to the previous cluster to be displayed as the first created display row corresponding to the current cluster to be displayed.

16. The electronic device according to any one of claims 9-11, wherein, The executable instructions cause the processor to perform the following operation: determine the current cluster to be displayed based on the average value of the display order index corresponding to the cluster.

17. A computer storage medium storing at least one executable instruction that causes a processor to perform an operation corresponding to the page display method based on a flow layout as described in any one of claims 1-8.

Images