Page typesetting method and apparatus, electronic device, and storage medium

Abstract

The present disclosure relates to a page typesetting method and apparatus, an electronic device, and a storage medium. The method comprises: acquiring a first-type element to be loaded and loading attribute information of the first-type element, the first-type element needing to be loaded in at least two display areas; determining a target display area on the basis of the loading attribute information of the first-type element, wherein the target display area is used for loading the first-type element; adjusting elements in the target display area to enable the cumulative dimensions of the elements in the target display area to be consistent; and loading the first-type element into the target display area. It can be ensured that no blank area would be left after the first-type element is inserted, thereby achieving the objective of mixed typesetting of content blocks occupying a single bar and content blocks needing to span two or more bars on pages, maintaining the continuity and aesthetics of the page layout, and optimizing the user experience.

Description

Page layout method, device, electronic device and storage medium

[0001] This application claims priority to the Chinese invention patent application entitled “Page layout method, device, electronic device and storage medium” and application number 202410132457.1 filed on January 30, 2024, the entire contents of which are incorporated by reference into this application. Technical Field

[0002] The present disclosure relates to the field of page display technology, and in particular to a page layout method, device, electronic device, and storage medium. Background Art

[0003] The multi-column layout has become a popular web page layout in recent years. This layout presents a staggered multi-column structure, and it can continue to load and display new content blocks when the user scrolls down the page.

[0004] A notable feature of this type of page is that content blocks have a fixed width but varying heights. This characteristic often results in different cumulative heights for content blocks across different columns. This layout is unsuitable for inserting content blocks that span two or more columns. Consequently, existing page layouts cannot accommodate a mix of content blocks occupying a single column and content blocks spanning two or more columns on the same page. Summary of the Invention

[0005] In order to solve the above technical problems or at least partially solve the above technical problems, the present disclosure provides a page layout method, device, electronic device and storage medium.

[0006] In a first aspect, the present disclosure provides a page layout method, wherein the page includes at least two display areas arranged in sequence along a first direction, and the page layout method includes: obtaining a first type of element to be loaded and loading attribute information of the first type of element; the first type of element needs to be loaded in at least two display areas; based on the loading attribute information of the first type of element, determining a target display area, the target display area is used to load the first type of element; adjusting the elements in the target display area so that the cumulative size of the elements in the target display area is consistent; and loading the first type of element into the target display area.

[0007] In the second aspect, the present disclosure also provides a page layout device, wherein the page includes at least two display areas arranged in sequence along a first direction, and the page layout device includes: an acquisition module for acquiring the first type of elements to be loaded and the loading attribute information of the first type of elements; the first type of elements need to be loaded in at least two display areas; a determination module for determining the target display area based on the loading attribute information of the first type of elements, and the target display area is used to load the first type of elements; an adjustment module for adjusting the elements in the target display area so that the cumulative size of the elements in the target display area is consistent; and a loading module for loading the first type of elements into the target display area.

[0008] In a third aspect, the present disclosure also provides an electronic device, comprising: one or more processors; a storage device for storing one or more programs; when the one or more programs are executed by the one or more processors, the one or more processors implement the page layout method as described above.

[0009] In a fourth aspect, the present disclosure further provides a computer-readable storage medium having a computer program stored thereon, which implements the page layout method described above when executed by a processor. BRIEF DESCRIPTION OF THE DRAWINGS

[0010] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the present disclosure.

[0011] In order to more clearly illustrate the embodiments of the present disclosure or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0012] FIG1 is a flow chart of a page layout method provided by an embodiment of the present disclosure;

[0013] FIG2 is a schematic diagram of a page provided by an embodiment of the present disclosure;

[0014] FIG3 is a schematic diagram of another page provided by an embodiment of the present disclosure;

[0015] FIG4 is a flowchart of a method for implementing S130 provided in an embodiment of the present disclosure;

[0016] FIG5 is a flowchart of another method for implementing S130 provided in an embodiment of the present disclosure;

[0017] FIG6 is a schematic diagram of another page provided by an embodiment of the present disclosure;

[0018] FIG7 is a flow chart of another page layout method provided by an embodiment of the present disclosure;

[0019] FIG8 is a schematic structural diagram of a page typesetting device according to an embodiment of the present disclosure;

[0020] FIG9 is a schematic structural diagram of an electronic device according to an embodiment of the present disclosure. DETAILED DESCRIPTION

[0021] In order to more clearly understand the above-mentioned objectives, features and advantages of the present disclosure, the scheme of the present disclosure will be further described below. It should be noted that the embodiments of the present disclosure and the features therein can be combined with each other in the absence of conflict.

[0022] In the following description, many specific details are set forth to facilitate a full understanding of the present disclosure, but the present disclosure may also be implemented in other ways different from those described herein; it is obvious that the embodiments in the specification are only part of the embodiments of the present disclosure, rather than all of the embodiments.

[0023] Figure 1 is a flow chart of a page layout method provided by an embodiment of the present disclosure. This embodiment is applicable to the case where page layout is performed in a client, and the method can be executed by a page layout device, which can be implemented in software and / or hardware, and the device can be configured in an electronic device, such as a terminal, specifically including but not limited to a smart phone, a PDA, a tablet computer, a wearable device with a display screen, a desktop computer, a laptop computer, an all-in-one computer, a smart home device, etc. Alternatively, this embodiment is applicable to the case where page layout is performed in a server, and the method can be executed by a page layout device, which can be implemented in software and / or hardware, and the device can be configured in an electronic device, such as a server.

[0024] The page includes at least two display areas arranged in sequence along a first direction. In practice, the first direction can be a horizontal direction or a vertical direction. In the page, each display area is a column. In this application, for example, at least two display areas are arranged in sequence along a horizontal direction on the page.

[0025] In this application, an element is a block of content that is loaded onto a page. Specifically, it can be information or a summary of information. Information can be, for example, audio or video, an image, or text. A summary of information can be, for example, an introduction to audio or video, an introduction to an image, or an introduction to text. In this application, elements include first-class elements and second-class elements. First-class elements are cross-column elements, which are content blocks that need to occupy at least two columns when loaded. Second-class elements are single-column elements, which are content blocks that only need to occupy one column when loaded.

[0026] Compared with the prior art, the technical solution provided by the embodiment of the present disclosure has the following advantages: the technical solution provided by the embodiment of the present disclosure obtains the first type of elements to be loaded and the loading attribute information of the first type of elements through settings; the first type of elements need to be loaded in at least two display areas; based on the loading attribute information of the first type of elements, the target display area is determined, and the target display area is used to load the first type of elements; the elements in the target display area are adjusted to make the cumulative size of the elements in the target display area consistent; and the first type of elements are loaded into the target display area. The essence is that when inserting the first type of elements into the page, the elements in the target display area are first adjusted to ensure that the last element in each target display area is aligned with the edge of the first type of element to be inserted. This ensures that no blank area will be left after the first type of elements are inserted, thereby achieving the purpose of mixing content blocks that occupy a single column and content blocks that need to span two or more columns in the page, maintaining the continuity and aesthetics of the page layout, and optimizing the user experience.

[0027] Figure 2 is a schematic diagram of a page provided by an embodiment of the present disclosure. Referring to Figure 2, illustratively, the page includes three display areas arranged in sequence along the horizontal direction, and each display area is a column. In Figure 2, element A1 only occupies display area 1 (i.e., the first column), element A2 only occupies display area 2 (i.e., the second column), and element A3 only occupies display area 3 (i.e., the third column). Therefore, elements A1-A3 are all single-column elements (i.e., second-category elements). Element B occupies display area 1 (i.e., the first column) and display area 2 (i.e., the second column) and is a cross-column element (i.e., first-category element).

[0028] As shown in FIG1 , the method may specifically include:

[0029] S110: Obtain first-category elements to be loaded and loading attribute information of the first-category elements; the first-category elements need to be loaded in at least two display areas. The first-category elements need to be loaded in at least two display areas, which means that the first-category elements need to occupy at least two columns when displayed, i.e., the first-category elements are spanning columns.

[0030] The loading attributes of the first-category elements may be, for example, information describing the size of the first-category elements and / or information describing the loading position of the first-category elements. Based on the loading attributes of the first-category elements, it is possible to determine into which target display area, that is, into which column, the first-category elements need to be loaded.

[0031] Exemplarily, the loading attributes of the first-class element may include at least one of the following: the distance between the first-class element loading position and the top of the page, the distance between the first-class element loading position and the side of the page, the width of the first-class element, the height of the first-class element, and the number of display areas that the first-class element needs to occupy. Exemplarily, referring to FIG2 , the loading attributes of the first-class element B include the distance Top between the first-class element B loading position and the top of the page, the distance Left between the first-class element B loading position and the left edge of the page, the width Width of the first-class element B, the height Height of the first-class element B, and the number Spancount of display areas that the first-class element B needs to occupy. Based on the loading attributes of the first-class element B, it can be clearly obtained that if the first-class element B is loaded, the first-class element B needs to be loaded into display area 1 and display area 2.

[0032] S120: Determine a target display area based on the loading attribute information of the first-category element, where the target display area is used to load the first-category element. The target display area may be, for example, a display area that the first-category element needs to occupy if the first-category element is loaded.

[0033] There are many ways to implement this step, and this application does not limit this. For example, in a page, each display area is arranged in sequence along the horizontal direction, and the width of each display area along the horizontal direction is the same. If the loading attribute of the first-category element includes the distance between the loading position of the first-category element and the left edge of the page, and the number of display areas that the first-category element needs to occupy. Based on the distance between the loading position of the first-category element and the left edge of the page, and the number of display areas that the first-category element needs to occupy, it is possible to obtain the display area that the first-category element needs to occupy if the first-category element is loaded, that is, to obtain the target display area. If the loading attribute of the first-category element includes the number of display areas that the first-category element needs to occupy, the preset loading rule is to load in order from left to right. When loading elements based on the preset loading rule, the display area that currently needs to be loaded can be known. Combined with the number of display areas that the first-category element needs to occupy, it is possible to obtain the display area that the first-category element needs to occupy if the first-category element is loaded, that is, to obtain the target display area.

[0034] S130: Adjust the elements in the target display area to make the cumulative sizes of the elements in the target display area consistent.

[0035] If, on a page, the display areas are arranged horizontally, and within each display area, the elements are arranged vertically, the cumulative size of the elements in the display area can be, for example, the total height of the elements loaded in the display area along the vertical direction. If, on a page, the display areas are arranged vertically, and within each display area, the elements are arranged horizontally, the cumulative size of the elements in the display area can be, for example, the total width of the elements loaded in the display area along the horizontal direction.

[0036] The cumulative sizes of the elements in the target display areas are consistent. For example, the cumulative sizes of the elements in each target display area can be the same. For example, if the current page is as shown in Figure 3, and the first type of element B needs to be loaded, after analysis, it is determined that if the first type of element B is loaded, the target display areas are display area 1 and display area 2. In this step, the size of the loaded elements in at least one of display area 1 and display area 2 needs to be adjusted so that the bottom line of the last loaded element in display area 1 is aligned with the bottom line of the last loaded element in display area 2.

[0037] S140: Load the first type of elements into the target display area.

[0038] The essence of this step is to insert the first type of elements into the target display area.

[0039] The above technical solution is configured to obtain the first type of elements to be loaded and the loading attribute information of the first type of elements; the first type of elements need to be loaded in at least two display areas; based on the loading attribute information of the first type of elements, the target display area is determined, and the target display area is used to load the first type of elements; the elements in the target display area are adjusted to make the cumulative size of the elements in the target display area consistent; and the first type of elements are loaded into the target display area. The essence of the technical solution is that when inserting the first type of elements into the page, the elements in the target display area are first adjusted to ensure that the last element in each target display area is aligned with the edge of the first type of element to be inserted. This ensures that no blank area will be left after the first type of elements are inserted, thereby achieving the purpose of mixing content blocks that occupy a single column and content blocks that need to span two or more columns in the page, maintaining the continuity and aesthetics of the page layout, and optimizing the user experience.

[0040] In the above technical solution, there are many specific implementation methods of S130, which are not limited in this application. For example, in one embodiment, referring to FIG4 , the implementation method of S130 may include:

[0041] S210 . Determine a first display area and a second display area among multiple target display areas, wherein the cumulative size of elements in the first display area is the smallest and the cumulative size of elements in the second display area is larger than the cumulative size of elements in the first display area.

[0042] S220: Based on the cumulative size of the elements in the first display area, crop the elements in the second display area so that the cumulative size of the elements in the second display area after cropping is equal to the cumulative size of the elements in the first display area.

[0043] When clipping elements in the second display area, all loaded elements in the second display area may be clipped, or some loaded elements in the second display area may be clipped. Typically, the last loaded element in the second display area is clipped.

[0044] For example, if the current page is as shown in Figure 3, and the first type of element B needs to be loaded, analysis determines that if the first type of element B is loaded, the target display areas are display area 1 and display area 2. The size of the elements in the target display areas needs to be adjusted. The cumulative size of the elements in display area 1 is the smallest, so display area 1 is the first display area. The cumulative size of the elements in display area 2 is larger than the cumulative size of the elements in display area 1, so display area 2 is the second display area, and the elements in display area 2 need to be cropped.

[0045] When clipping elements in the display area 2, all loaded elements in the display area 2 may be clipped, or only some loaded elements in the display area 2 may be clipped. Typically, the last loaded element in the display area 2 is clipped.

[0046] Furthermore, S220 may include: determining a cropping size of elements in the second display area based on the cumulative size of elements in the first display area; and cropping the elements in the second display area based on the cropping size of the elements in the second display area.

[0047] Optionally, S220 may also include: determining the cropping size of the elements in the second display area based on the cumulative size of the elements in the first display area; determining the cropping ratio of the elements in the second display area based on the cropping size of the elements in the second display area and the original size of the elements in the second display area; determining whether to crop the elements in the second display area based on the cropping ratio of the elements in the second display area; if the determination result is that the elements in the second display area are to be cropped, cropping the elements in the second display area based on the cropping size of the elements in the second display area.

[0048] Exemplarily, determining the cropping size of the elements in the second display area based on the cumulative size of the elements in the first display area may include: determining the cropping size of the elements in the second display area based on the cumulative size of the elements in the first display area and formula (1). offsetColumnList[m] = columnList[m] - columnList[k] (1)

[0049] Among them, columnList[k] is the cumulative size of the elements in the first display area, columnList[m] is the cumulative size of the elements in the second display area, and offsetColumnList[m] is the cropped size of the elements in the second display area.

[0050] Exemplarily, determining the cropping ratio of the element in the second display area based on the cropping size of the element in the second display area and the original size of the element in the second display area may include: determining the cropping ratio of the element in the second display area based on the cropping size of the element in the second display area, the original size of the element in the second display area, and formula (2). ratio[m] = (Height-offsetColumnList[m]) / Width (2)

[0051] Wherein, offsetColumnList[m] is the cropping size of the element in the second display area, Height is the original height of the element in the second display area, and Width is the original width of the element in the second display area.

[0052] In practice, cropping an element may make its core meaning incomplete, leading to a deviation in the user's understanding of it. To address this, by setting "Determine whether to crop the elements in the second display area based on the cropping ratio of the elements in the second display area", the essence is to evaluate the impact of the cropping operation on the core meaning of the elements. If the cropping operation has a small impact on the core meaning of the elements, the result is to crop the elements in the second display area, and the first category of elements will be loaded subsequently. If the cropping operation has a large impact on the core meaning of the elements, the result is to not crop the elements in the second display area, and the first category of elements will not be loaded subsequently.

[0053] Optionally, determining whether to crop the elements in the second display area based on the cropping ratio of the elements in the second display area may include: determining whether to crop the elements in the second display area based on the cropping ratio of the elements in the second display area and an optimal cropping ratio range.

[0054] The optimal cropping ratio range may be, for example, a pre-set cropping ratio range. If the cropping ratio of the element in the second display area is within the optimal cropping ratio range, it means that cropping the element in the second display area has little impact on the core meaning of the element. If the cropping ratio of the element in the second display area is outside the optimal cropping ratio range, it means that cropping the element in the second display area has a significant impact on the core meaning of the element.

[0055] Optionally, determining whether to crop the element in the second display area based on the cropping ratio of the element in the second display area may include: determining the original ratio of the element in the second display area; determining an optimal cropping ratio range based on the original ratio of the element in the second display area; and determining whether to crop the element in the second display area based on the cropping ratio of the element in the second display area and the optimal cropping ratio range. The essence of this setting is that the optimal cropping ratio range is related to the original ratio of the element, which can make the value of the optimal cropping ratio range more reasonable, further ensuring that the evaluation result of the degree of impact of the cropping operation on the core meaning of the element is accurate.

[0056] For example, if the element is an image, the optimal cropping ratio range for an element with an original ratio (such as aspect ratio) of 4:3 is [a1, a2]; the optimal cropping ratio range for an element with an original ratio (such as aspect ratio) of 1:1 is [a3, a4]. Referring to Figure 3, if the cumulative size of the elements in display area 1 is referenced, element A2 (i.e., the last element loaded) in display area 2 is cropped. According to formula (1), the cropping size of element A2 is h2-h1. According to formula (2), the cropping ratio of element A2 is h1 / w1. If the original ratio (such as aspect ratio) of element A2 is 4:3, determine whether the cropping ratio h1 / w1 of element A2 satisfies a1≤h1 / w1≤a2. If the cropping ratio h1 / w1 of element A2 satisfies a1≤h1 / w1≤a2, element A2 is cropped based on the cropping size h2-h1 of element A2. As shown in Figure 2, after element A2 is cropped, the cumulative size of the elements in display area 1 and display area 2 is the same, h1. Subsequently, the first-category element B is loaded into display areas 1 and 2. If the cropping ratio h1 / w1 of element A2 does not satisfy a1≤h1 / w1≤a2, element A2 is not cropped, and the first-category element B is not subsequently loaded into display areas 1 and 2.

[0057] It should be noted that after the elements in the second display area are cropped, the loading attribute information of the elements in the second display area needs to be updated to ensure that the cumulative size of the elements in subsequent display areas is calculated accurately.

[0058] For example, in another embodiment, referring to FIG5 , the implementation method of S130 may include:

[0059] S310: Determine a third display area and a fourth display area among multiple target display areas, wherein the cumulative size of elements in the third display area is the largest; and the cumulative size of elements in the fourth display area is smaller than the cumulative size of elements in the third display area.

[0060] S320: Based on the cumulative size of the elements in the third display area, load the target preset element in the fourth display area so that the cumulative size of the elements in the fourth display area is equal to the cumulative size of the elements in the third display area.

[0061] For example, if the current page is as shown in Figure 6, and the first type element B needs to be loaded, after analysis, it is determined that if the first type element B is loaded, the target display areas are display areas 1 and display areas 2. The size of the elements in the target display areas needs to be adjusted. The cumulative size of the elements in display area 2 is the largest, so display area 2 is the third display area. The cumulative size of the elements in display area 1 is smaller than the cumulative size of the elements in display area 2, so display area 1 is the fourth display area, and the target preset element needs to be loaded in display area 1.

[0062] The target preset element is a pre-specified element that fills the blank area. This application does not limit the specific element of the target preset element. In some scenarios, the target preset element can be an image or text.

[0063] S320 may include: determining a target preset element based on the cumulative size of elements in the third display area and the cumulative size of elements in the fourth display area; and loading the preset element in the fourth display area.

[0064] Furthermore, “determining the target preset element based on the cumulative size of elements in the third display area and the cumulative size of elements in the fourth display area” may include: determining a first size based on the cumulative size of elements in the third display area and the cumulative size of elements in the fourth display area; and taking a preset element with the first size as the target preset element.

[0065] Furthermore, determining the first size based on the cumulative size of the elements in the third display area and the cumulative size of the elements in the fourth display area may include: determining the first size based on the cumulative size of the elements in the third display area, the cumulative size of the elements in the fourth display area, and formula (3). C = columnList[n] - columnList[p] (3)

[0066] Wherein, C is the first size, columnList[n] is the cumulative size of the elements in the third display area, and columnList[p] is the cumulative size of the elements in the fourth display area.

[0067] For example, referring to Figure 6 , if a target preset element is loaded into display area 1 based on the cumulative size of elements in display area 2, according to formula (3), the first size should be h2-h1. In the preset element library, an element with a size of h2-h1 is searched, and the found element with a size of h2-h1 is used as the target preset element. Subsequently, the target preset element is loaded into the fourth display area.

[0068] Based on the above technical solution, optionally, S120 may include: judging whether the remaining display area in the current page can accommodate the first-category elements based on the loading attribute information of the first-category elements; if the judgment result is that the first-category elements can be accommodated, determining the target display area based on the loading attribute information of the first-category elements.

[0069] For example, based on the number of display areas that the first-category elements need to occupy (Spancount) and the display area currently to be inserted, it can be determined whether the remaining display area in the current page can accommodate the first-category elements. The display area currently to be inserted is the first target display area for loading the first-category elements, which can be obtained based on the loading attribute information of the first-category elements.

[0070] For example, if the loading attribute information of the first-category element includes the distance Left between the loading position of the first-category element and the left edge of the page, the first target display area for loading the first-category element can be determined based on the distance Left between the loading position of the first-category element and the left edge of the page. For example, referring to FIG3 , if the width of each display area is w1, and the distance Left between the loading position of a first-category element and the left edge of the page is w1+w1, it can be determined that the first target display area for loading the first-category element is display area 3.

[0071] In other scenarios, the display area to be inserted can be determined based on a preset loading rule. For example, referring to FIG3 , if the preset loading rule is to load elements sequentially from left to right, and the previous element was loaded into display area 3, then a first-category element needs to be loaded, and the first target display area for the first-category element is display area 1.

[0072] Optionally, based on formula (4), it can be determined whether the remaining display area in the current page can accommodate the first type of elements. M-J+1-SpanCount≥0 (4)

[0073] Wherein, M is the total number of display areas included in the page, J is the serial number of the display area to be inserted currently, and SpanCount is the number of display areas that the first type of elements need to occupy.

[0074] For example, if the total number of display areas included in the page is 6, the serial number of the display area currently to be inserted is 3, that is, the first-category element is inserted starting from display area 3, and there are 4 display areas from display area 3 to display area 6, that is, the number of display areas that the first-category element allowed to be inserted must occupy should be less than or equal to 4. In other words, if the number of display areas that a first-category element needs to occupy is less than or equal to 4, it satisfies formula (4), and the remaining display area in the current page can accommodate the first-category element. If the number of display areas that a first-category element needs to occupy is greater than 4, it does not satisfy formula (4), and the remaining display area in the current page cannot accommodate the first-category element.

[0075] On the basis of the above technical solution, optionally, S110 may include: judging whether the number of second-category elements continuously loaded in the page as of the current moment is greater than or equal to a preset value; the second-category elements need to be loaded in a display area; if so, obtaining the first-category elements to be loaded and the loading attribute information of the first-category elements. The essence of this setting is to control the frequency of continuous insertion of second-category elements to avoid destroying the continuity and aesthetics of the page due to frequent insertion of cross-column elements. In addition, since inserting cross-column elements usually requires additional calculations and rendering, if the frequency is too high, it will lead to a decrease in page loading performance, affecting the page response speed and user experience.

[0076] FIG7 is a flow chart of another page layout method provided by an embodiment of the present disclosure. Referring to FIG7 , the page layout method includes:

[0077] S410 , obtain an element set; the element set includes first-category elements and second-category elements, and execute S420 .

[0078] The element set may be, for example, an element set sent by the server to the terminal after receiving an element pull request sent by the terminal, and may include a plurality of first-category elements and a plurality of second-category elements.

[0079] S420: insert the first type of elements in the element set into the first queue, insert the second type of elements in the element set into the second queue, and execute S430. The essence of this step is to classify the elements in the element set.

[0080] S430: Determine whether the number of second-category elements continuously loaded on the page as of the current moment is greater than or equal to a preset value; if the second-category elements need to be loaded in one display area, execute S440; if not, execute S490. S440: Extract the first-category elements and their loading attribute information from the first queue, and execute S450.

[0081] S450. Based on the loading attribute information of the first-category elements, determine whether the remaining display area in the current page can accommodate the first-category elements; if so, execute S460; if not, execute S490.

[0082] S460 . Determine the target display area based on the loading attribute information of the first type of element, and execute S470 .

[0083] S470 , adjusting the elements in the target display area to make the cumulative sizes of the elements in the target display area consistent, and executing S480 .

[0084] S480: Load the first type of elements into the target display area, and execute S490.

[0085] S490: Extract the second type of elements and the loading attribute information of the second type of elements from the second queue.

[0086] S500: Load the second-category elements into the page based on the loading attribute information of the second-category elements.

[0087] The above technical solution provides a complete page layout method, which can achieve the purpose of mixing content blocks occupying a single column and content blocks that need to span two or more columns in a page, maintaining the continuity and aesthetics of the page layout.

[0088] It is understandable that before using the technical solutions disclosed in the various embodiments of this disclosure, the type, scope of use, usage scenarios, etc. of the personal information involved in this disclosure should be informed to the user and the user's authorization should be obtained in an appropriate manner in accordance with relevant laws and regulations.

[0089] For example, in response to a user's active request, a prompt message is sent to the user to clearly inform the user that the operation requested will require the acquisition and use of the user's personal information. This allows the user to independently choose whether to provide personal information to the electronic device, application, server, storage medium, or other software or hardware that performs the operations of the disclosed technical solution based on the prompt message.

[0090] As an optional but non-limiting implementation, in response to receiving a user's active request, the prompt information may be sent to the user in the form of a pop-up window, in which the prompt information may be presented in text form. Furthermore, the pop-up window may also contain a selection control for the user to select "agree" or "disagree" to provide personal information to the electronic device.

[0091] It is understandable that the above notification and user authorization process are merely illustrative and do not limit the implementation of the present disclosure. Other methods that comply with relevant laws and regulations may also be applied to the implementation of the present disclosure.

[0092] It should be noted that for the aforementioned method embodiments, for simplicity of description, they are all expressed as a series of action combinations. However, those skilled in the art should be aware that the present invention is not limited by the order of the actions described, because according to the present invention, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in this specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present invention.

[0093] Figure 8 is a structural diagram of a page typesetting device in an embodiment of the present disclosure. The page typesetting device provided by the embodiment of the present disclosure can be configured in the client, or can be configured in the server. The page includes at least two display areas arranged in sequence along a first direction, referring to Figure 8, the page typesetting device specifically includes: an acquisition module 610, for acquiring the first type of elements to be loaded and the loading attribute information of the first type of elements; the first type of elements need to be loaded in at least two display areas; a determination module 620, for determining the target display area based on the loading attribute information of the first type of elements, the target display area being used to load the first type of elements; an adjustment module 630, for adjusting the elements in the target display area so that the cumulative size of the elements in the target display area is consistent; a loading module 640, for loading the first type of elements into the target display area.

[0094] Furthermore, the adjustment module 630 is used to: determine a first display area and a second display area among the multiple target display areas, the cumulative size of the elements in the first display area is the smallest; the cumulative size of the elements in the second display area is larger than the cumulative size of the elements in the first display area; based on the cumulative size of the elements in the first display area, crop the elements in the second display area so that the cumulative size of the elements in the second display area after cropping is equal to the cumulative size of the elements in the first display area.

[0095] Furthermore, the adjustment module 630 is used to: determine the cropping size of the elements in the second display area based on the cumulative size of the elements in the first display area; determine the cropping ratio of the elements in the second display area based on the cropping size of the elements in the second display area and the original size of the elements in the second display area; determine whether to crop the elements in the second display area based on the cropping ratio of the elements in the second display area; if the determination result is that the elements in the second display area are to be cropped, crop the elements in the second display area based on the cropping size of the elements in the second display area.

[0096] Furthermore, the adjustment module 630 is used to: determine the original ratio of the elements in the second display area; determine the optimal cropping ratio range based on the original ratio of the elements in the second display area; and determine whether to crop the elements in the second display area based on the cropping ratio of the elements in the second display area and the optimal cropping ratio range.

[0097] Furthermore, the adjustment module 630 is used to: determine a third display area and a fourth display area among the multiple target display areas, the cumulative size of elements in the third display area being the largest; the cumulative size of elements in the fourth display area being smaller than the cumulative size of elements in the third display area; and based on the cumulative size of elements in the third display area, load target preset elements in the fourth display area so that the cumulative size of elements in the fourth display area is equal to the cumulative size of elements in the third display area.

[0098] Furthermore, the determination module is used to: judge whether the remaining display area in the current page can accommodate the first type of elements based on the loading attribute information of the first type of elements; if the judgment result is that the first type of elements can be accommodated, determine the target display area based on the loading attribute information of the first type of elements.

[0099] Furthermore, the acquisition module is used to: determine whether the number of second-category elements continuously loaded in the page as of the current moment is greater than or equal to a preset value; the second-category elements need to be loaded in a display area; if so, obtain the first-category elements to be loaded and the loading attribute information of the first-category elements.

[0100] Furthermore, the acquisition module is also used to: acquire an element set; the element set includes first-category elements and second-category elements; insert the first-category elements in the element set into a first queue, and insert the second-category elements in the element set into a second queue; the acquisition of the first-category elements to be loaded and the loading attribute information of the first-category elements includes: extracting the first-category elements and the loading attribute information of the first-category elements from the first queue.

[0101] Furthermore, the acquisition module is also used to: if as of the current moment, the number of second-category elements continuously loaded in the page is less than a preset value, extract the second-category elements and the loading attribute information of the second-category elements from the second queue; based on the loading attribute information of the second-category elements, load the second-category elements into the page.

[0102] The page layout device provided in the embodiment of the present disclosure can execute the steps executed by the client or server in the page layout method provided in the embodiment of the method of the present disclosure, and has the execution steps and beneficial effects, which will not be repeated here.

[0103] FIG9 is a schematic diagram of the structure of an electronic device in an embodiment of the present disclosure. Specific reference will be made below to FIG9 , which shows a schematic diagram of the structure of an electronic device 1000 suitable for implementing an embodiment of the present disclosure. The electronic device 1000 in the embodiment of the present disclosure may include, but is not limited to, mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), vehicle-mounted terminals (such as vehicle-mounted navigation terminals), wearable electronic devices, and the like, as well as fixed terminals such as digital TVs, desktop computers, smart home devices, and the like. The electronic device shown in FIG9 is merely an example and should not impose any limitations on the functions and scope of use of the embodiments of the present disclosure.

[0104] As shown in FIG9 , the electronic device 1000 may include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 1001, which can perform various appropriate actions and processes to implement the page layout method of the embodiment described in the present disclosure according to a program stored in a read-only memory (ROM) 1002 or a program loaded from a storage device 1008 into a random access memory (RAM) 1003. Various programs and information required for the operation of the electronic device 1000 are also stored in the RAM 1003. The processing device 1001, the ROM 1002, and the RAM 1003 are connected to each other via a bus 1004. An input / output (I / O) interface 1005 is also connected to the bus 1004.

[0105] Typically, the following devices may be connected to the I / O interface 1005: an input device 1006 including, for example, a touch screen, a touchpad, a keyboard, a mouse, a camera, a microphone, an accelerometer, a gyroscope, etc.; an output device 1007 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 1008 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 1009. The communication device 1009 may allow the electronic device 1000 to communicate with other devices wirelessly or by wire to exchange information. Although FIG9 shows the electronic device 1000 with various devices, it should be understood that it is not required to implement or have all of the devices shown. More or fewer devices may be implemented or have alternatively.

[0106] In particular, according to an embodiment of the present disclosure, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a non-transitory computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart, thereby implementing the page typesetting method as described above. In such an embodiment, the computer program can be downloaded and installed from the network through the communication device 1009, or installed from the storage device 1008, or installed from the ROM 1002. When the computer program is executed by the processing device 1001, the above-mentioned functions defined in the method of the embodiment of the present disclosure are performed.

[0107] It should be noted that the computer-readable medium mentioned above in the present disclosure may be a computer-readable signal medium or a computer-readable storage medium, or any combination of the two. A computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or component, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present disclosure, a computer-readable storage medium may be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, device, or component. In the present disclosure, a computer-readable signal medium may include an information signal propagated in baseband or as part of a carrier wave, which carries computer-readable program code. Such a propagated information signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport a program for use by or in conjunction with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium may be transmitted using any suitable medium, including but not limited to wires, optical cables, RF (radio frequency), etc., or any suitable combination thereof.

[0108] In some embodiments, the client and server can communicate using any known or future developed network protocol, such as HTTP (Hypertext Transfer Protocol), and can be interconnected with any form or medium of digital information communication (e.g., a communication network). Examples of communication networks include a local area network ("LAN"), a wide area network ("WAN"), an internet (e.g., the Internet), and a peer-to-peer network (e.g., an ad hoc peer-to-peer network), as well as any known or future developed network.

[0109] The computer-readable medium may be included in the electronic device, or may exist independently without being incorporated into the electronic device.

[0110] The above-mentioned computer-readable medium carries one or more programs. When the above-mentioned one or more programs are executed by the electronic device, the electronic device: obtains the first type of elements to be loaded and the loading attribute information of the first type of elements; the first type of elements need to be loaded in at least two display areas; based on the loading attribute information of the first type of elements, determines the target display area, and the target display area is used to load the first type of elements; adjusts the elements in the target display area so that the cumulative size of the elements in the target display area is consistent; and loads the first type of elements into the target display area.

[0111] Optionally, when the above one or more programs are executed by the electronic device, the electronic device may also execute other steps described in the above embodiments.

[0112] Computer program code for performing the operations of the present disclosure may be written in one or more programming languages, or a combination thereof, including, but not limited to, object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a stand-alone software package, partially on the user's computer and partially on a remote computer, or entirely on the remote computer or server. In cases involving a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., through the Internet using an Internet service provider).

[0113] The flowcharts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each box in the flowchart or block diagram can represent a module, program segment, or a part of code, and the module, program segment, or a part of code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order than that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flowchart, and the combination of the boxes in the block diagram and / or flowchart, can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0114] The units involved in the embodiments described in this disclosure may be implemented in software or hardware, wherein the name of a unit does not necessarily limit the unit itself.

[0115] The functions described above herein may be performed, at least in part, by one or more hardware logic components. For example, and without limitation, exemplary types of hardware logic components that may be used include: field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chip (SOCs), complex programmable logic devices (CPLDs), and the like.

[0116] In the context of the present disclosure, a machine-readable medium can be a tangible medium that can contain or store a program for use by or in conjunction with an instruction execution system, device or equipment. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or equipment, or any suitable combination of the foregoing. A more specific example of a machine-readable storage medium can include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0117] According to one or more embodiments of the present disclosure, the present disclosure provides an electronic device, comprising: one or more processors; a memory for storing one or more programs; when the one or more programs are executed by the one or more processors, the one or more processors implement any page layout method provided by the present disclosure.

[0118] According to one or more embodiments of the present disclosure, the present disclosure provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements any of the page layout methods provided by the present disclosure.

[0119] An embodiment of the present disclosure further provides a computer program product, which includes a computer program or instructions, and when the computer program or instructions are executed by a processor, the page layout method described above is implemented.

[0120] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "comprises," "comprising," or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article, or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or device. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of other identical elements in the process, method, article, or device comprising the element.

[0121] The foregoing description is intended only to provide specific embodiments of the present disclosure, intended to enable those skilled in the art to understand and implement the present disclosure. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present disclosure. Therefore, the present disclosure is not intended to be limited to the embodiments described herein, but rather to be construed in the broadest manner consistent with the principles and novel features disclosed herein.

Claims

1. A page layout method, wherein the page includes at least two display areas arranged sequentially along a first direction, the page layout method comprising: Obtaining first-category elements to be loaded and loading attribute information of the first-category elements; The first type of elements need to be loaded in at least two display areas; Determining a target display area based on the loading attribute information of the first-category elements, the target display area being used to load the first-category elements; Adjusting the elements in the target display area so that the cumulative sizes of the elements in the target display area are consistent; The first-type elements are loaded into the target display area.

2. The method according to claim 1, wherein adjusting the elements in the target display area comprises: Determine a first display area and a second display area among the plurality of target display areas, wherein the cumulative size of elements in the first display area is the smallest; and the cumulative size of elements in the second display area is larger than the cumulative size of elements in the first display area; Based on the cumulative size of the elements in the first display area, the elements in the second display area are cropped so that the cumulative size of the elements in the second display area after cropping is equal to the cumulative size of the elements in the first display area.

3. The method according to claim 2, wherein the clipping of elements in the second display area based on the cumulative size of the elements in the first display area comprises: determining a cropping size of elements in the second display area based on a cumulative size of elements in the first display area; determining a cropping ratio of the element in the second display area based on the cropping size of the element in the second display area and the original size of the element in the second display area; determining whether to crop the elements in the second display area based on the cropping ratio of the elements in the second display area; If the determination result is to crop the elements in the second display area, the elements in the second display area are cropped based on the cropping size of the elements in the second display area.

4. The method according to claim 3, wherein determining whether to crop the elements in the second display area based on the cropping ratio of the elements in the second display area comprises: determining an original scale of elements in the second display area; Determining an optimal cropping ratio range based on the original ratio of the elements in the second display area; Based on the cropping ratio of the elements in the second display area and the optimal cropping ratio range, it is determined whether to crop the elements in the second display area.

5. The method according to claim 1, wherein adjusting the elements in the target display area comprises: Determine a third display area and a fourth display area among the plurality of target display areas, wherein the cumulative size of elements in the third display area is the largest; and the cumulative size of elements in the fourth display area is smaller than the cumulative size of elements in the third display area; Based on the cumulative size of the elements in the third display area, a target preset element is loaded in the fourth display area, so that the cumulative size of the elements in the fourth display area is equal to the cumulative size of the elements in the third display area.

6. The method according to claim 1, wherein determining the target display area based on the loading attribute information of the first type of element comprises: Based on the loading attribute information of the first-category elements, determining whether the remaining display area in the current page can accommodate the first-category elements; If the judgment result is that the first type of elements can be accommodated, the target display area is determined based on the loading attribute information of the first type of elements.

7. The method according to claim 1, wherein obtaining the first type of elements to be loaded and the loading attribute information of the first type of elements comprises: Determining whether the number of the second-category elements continuously loaded in the page as of the current moment is greater than or equal to a preset value; The second type of elements need to be loaded in a display area; If so, obtain the first type of elements to be loaded and the loading attribute information of the first type of elements.

8. The method according to claim 7, further comprising: Obtain an element set; the element set includes first-category elements and second-category elements; Inserting the first-category elements in the element set into a first queue, and inserting the second-category elements in the element set into a second queue; The acquiring of the first-category element to be loaded and the loading attribute information of the first-category element includes: Extracting first-category elements and loading attribute information of the first-category elements from the first queue.

9. The method according to claim 8, further comprising: If the number of the second-category elements continuously loaded in the page is less than a preset value as of the current moment, extract the second-category elements and the loading attribute information of the second-category elements from the second queue; Based on the loading attribute information of the second-category elements, the second-category elements are loaded into the page.

10. A page layout device, wherein the page includes at least two display areas arranged in sequence along a first direction, the page layout device comprising: An acquisition module, configured to acquire first-category elements to be loaded and loading attribute information of the first-category elements; The first type of elements need to be loaded in at least two display areas; a determination module, configured to determine a target display area based on the loading attribute information of the first-category elements, wherein the target display area is used to load the first-category elements; an adjusting module, configured to adjust the elements in the target display area so that the cumulative sizes of the elements in the target display area are consistent; A loading module is used to load the first type of elements into the target display area.

11. An electronic device, comprising: one or more processors; a storage device for storing one or more programs; When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 9.

12. A computer-readable storage medium having a computer program stored thereon, wherein when the program is executed by a processor, the method according to any one of claims 1 to 9 is implemented.

13. A computer program product tangibly stored in a computer storage medium and comprising computer executable instructions which, when executed by a device, cause the device to perform the method according to any one of claims 1 to 9.

Images