Page typesetting method and device, electronic equipment and storage medium

Abstract

The invention relates to a page typesetting method and device, electronic equipment and a storage medium. The method comprises the steps that to-be-loaded first-class elements and loading attribute information of the first-class elements are acquired; the first class of elements need to be loaded in the at least two display areas; based on the loading attribute information of the first type of elements, a target display area is determined, and the target display area is used for loading the first type of elements; adjusting elements in the target display area to enable the accumulated sizes of the elements in the target display area to be consistent; and loading the first class of elements into the target display area. According to the method and the device, after the first type of elements are inserted, no blank area is left, so that the purpose of performing mixed arrangement on the content blocks occupying a single column and the content blocks needing to cross two or more columns in the page is achieved, the continuity and the attractiveness of page layout are kept, and the user experience is optimized.

Description

Technical Field

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

[0002] The multi-column layout is a popular web page layout in recent years. This layout presents a well-proportioned multi-column structure, and when the user scrolls down the page, it can continuously load and display new content blocks.

[0003] A significant feature of this type of page is that the content blocks have a fixed width, but their heights are not the same. This characteristic results in frequent differences in the cumulative heights of the content blocks in different columns. This layout is not suitable for inserting content blocks that need to span two or more columns. Therefore, the existing page layout cannot achieve the mixed layout of content blocks that occupy a single column and content blocks that need to span two or more columns on the same page. Summary of the Invention

[0004] To solve the above technical problems or at least partially solve the above technical problems, the present disclosure provides a page layout method, apparatus, electronic device, and storage medium.

[0005] In a first aspect, the present disclosure provides a page layout method. The page includes at least two display areas arranged in sequence along a first direction. The page layout method includes:

[0006] 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;

[0007] Based on the loading attribute information of the first type of element, determining a target display area for loading the first type of element;

[0008] Adjusting the elements in the target display area to make the cumulative sizes of the elements in the target display area consistent;

[0009] Loading the first type of element into the target display area.

[0010] In a second aspect, the present disclosure further provides a page layout apparatus. The page includes at least two display areas arranged in sequence along a first direction. The page layout apparatus includes:

[0011] An obtaining module, configured to obtain 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;

[0012] A determination module, configured to determine a target display area for loading the first type of elements based on the loading attribute information of the first type of elements.

[0013] An adjustment module, configured to adjust the elements in the target display area to make the cumulative sizes of the elements in the target display area consistent.

[0014] A loading module, configured to load the first type of elements into the target display area.

[0015] In a third aspect, the present disclosure further provides an electronic device, including:

[0016] One or more processors;

[0017] A storage device, configured to store one or more programs;

[0018] 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.

[0019] In a fourth aspect, the present disclosure further provides a computer-readable storage medium, on which a computer program is stored, and when the program is executed by a processor, the page layout method as described above is implemented.

[0020] The technical solution provided by the embodiments of the present disclosure has the following advantages compared with the prior art:

[0021] The technical solution provided by the embodiments of the present disclosure includes obtaining 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; determining a target display area for loading the first type of elements based on the loading attribute information of the first type of elements; adjusting the elements in the target display area to make the cumulative sizes of the elements in the target display area consistent; and loading the first type of elements into the target display area. In essence, when inserting the first type of elements into the page, first adjust the elements in the target display area to ensure that the edge of the last element in each target display area is aligned with the edge of the first type of elements to be inserted. This can ensure that no blank area is left after inserting the first type of elements, 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. Description of the Drawings

[0022] The drawings here are incorporated into the specification and form a part of this specification, showing embodiments consistent with the present disclosure, and are used together with the specification to explain the principles of the present disclosure.

[0023] To more clearly illustrate the technical solutions in the embodiments of the present disclosure or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, for those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0024] Figure 1 Flowchart of a page layout method provided by an embodiment of the present disclosure;

[0025] Figure 2 Schematic diagram of a page provided by an embodiment of the present disclosure;

[0026] Figure 3 Schematic diagram of another page provided by an embodiment of the present disclosure;

[0027] Figure 4 Flowchart of an implementation method of S130 provided by an embodiment of the present disclosure;

[0028] Figure 5 Flowchart of another implementation method of S130 provided by an embodiment of the present disclosure;

[0029] Figure 6 Schematic diagram of another page provided by an embodiment of the present disclosure;

[0030] Figure 7 Flowchart of another page layout method provided by an embodiment of the present disclosure;

[0031] Figure 8 Schematic diagram of the structure of a page layout device in an embodiment of the present disclosure;

[0032] Figure 9 Schematic diagram of the structure of an electronic device in an embodiment of the present disclosure. Detailed implementation manners

[0033] In order to more clearly understand the above objects, features, and advantages of the present disclosure, the following will further describe the solutions of the present disclosure. It should be noted that, without conflict, the embodiments of the present disclosure and the features in the embodiments can be combined with each other.

[0034] Many specific details are set forth in the following description in order to fully understand the present disclosure, but the present disclosure can also be implemented in other ways different from those described herein; obviously, the embodiments in the specification are only a part of the embodiments of the present disclosure, rather than all of the embodiments.

[0035] Figure 1The flowchart of a page layout method provided by an embodiment of the present disclosure. This embodiment is applicable to the situation of page layout in a client. This method can be executed by a page layout device, which can be implemented in software and / or hardware, and can be configured in an electronic device, such as a terminal, specifically including but not limited to a smart phone, a personal digital assistant, 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 situation of page layout in a server. This method can be executed by a page layout device, which can be implemented in software and / or hardware, and can be configured in an electronic device, such as a server.

[0036] 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, the case where at least two display areas are arranged in sequence along the horizontal direction in the page is taken as an example for illustration.

[0037] In this application, an element is a content block to be loaded onto the page. It can specifically be information or a summary of information. Among them, the information can be, for example, audio and video, images, or text, etc. The summary of information can be, for example, the introduction of audio and video, the introduction of images, or the introduction of text, etc. In this application, elements include first-class elements and second-class elements. The first-class elements are cross-column elements, which are content blocks that need to occupy at least two columns when loaded. The second-class elements are single-column elements, which only need to occupy one column when loaded.

[0038] Figure 2 The schematic diagram of a page provided by an embodiment of the present disclosure. Refer to Figure 2 , for example, 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-class 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., the first-class element).

[0039] As Figure 1 shown, the method can specifically include:

[0040] S110. Obtain the first-class elements to be loaded and the loading attribute information of the first-class elements; the first-class elements need to be loaded in at least two display areas.

[0041] The first type of elements need to be loaded in at least two display areas, which means that when the first type of elements are displayed, they need to occupy at least two columns, that is, the first type of elements are cross-column elements.

[0042] The loading attributes of the first type of elements can be, for example, information describing the size of the first type of elements and / or information on the loading position of the first type of elements. Based on the loading attributes of the first type of elements, it can be determined which target display area the first type of elements need to be loaded into, that is, which column they need to be loaded into.

[0043] Exemplarily, the loading attributes of the first type of elements can include at least one of the following: the distance of the loading position of the first type of elements from the top of the page, the distance of the loading position of the first type of elements from the side of the page, the width of the first type of elements, the height of the first type of elements, and the number of display areas that the first type of elements need to occupy. Exemplarily, see Figure 2 , the loading attributes of the first type of element B include the distance Top of the loading position of the first type of element B from the top of the page, the distance Left of the loading position of the first type of element B from the left side of the page, the width Width of the first type of element B, the height Height of the first type of element B, and the number Spancount of display areas that the first type of element B needs to occupy. Based on the loading attributes of the first type of element B, it can be clearly obtained that if the first type of element B is loaded, the first type of element B needs to be loaded into display area 1 and display area 2.

[0044] S120. Determine the target display area based on the loading attribute information of the first type of elements, where the target display area is used to load the first type of elements.

[0045] The target display area can be, for example, the display area that the first type of elements need to occupy if they are loaded.

[0046] There are various implementation methods for this step, and this application does not limit it. Exemplarily, in a page where the display areas are arranged in sequence horizontally and the widths of the display areas in the horizontal direction are the same, if the loading attributes of the first type of elements include the distance of the loading position of the first type of elements from the left side of the page and the number of display areas that the first type of elements need to occupy. Based on the distance of the loading position of the first type of elements from the left side of the page and the number of display areas that the first type of elements need to occupy, it can be obtained which display areas the first type of elements need to occupy if they are loaded, that is, the target display area is obtained. If the loading attributes of the first type of elements include the number of display areas that the first type of elements need to occupy, and the preset loading rule is to load in sequence from left to right. When loading elements based on the preset loading rule, it is possible to know the current display area to be loaded, and combined with the number of display areas that the first type of elements need to occupy, it can be obtained which display areas the first type of elements need to occupy if they are loaded, that is, the target display area is obtained.

[0047] S130. Adjust the elements in the target display area so that the cumulative sizes of the elements in the target display area are the same.

[0048] If on the page, the display areas are arranged in sequence horizontally; and in each display area, the elements are arranged in sequence vertically, the cumulative size of the elements in the display area can be, for example, the total height of the loaded elements in the display area vertically.

[0049] If on the page, the display areas are arranged in sequence vertically; and in each display area, the elements are arranged in sequence horizontally, the cumulative size of the elements in the display area can be, for example, the total width of the loaded elements in the display area horizontally.

[0050] The cumulative sizes of the elements in the target display area are the same. For example, it can be that the cumulative sizes of the elements in each target display area are the same. Exemplarily, if the current page is as Figure 3 shown, it is necessary to load the first type of element B. After analysis and determination, if the first type of element B is loaded, the target display areas are display area 1 and display area 2. In this step, it is necessary to adjust the sizes of the loaded elements in at least one of display area 1 and display area 2 so that the lower edges of the last loaded elements in display area 1 and the lower edges of the last loaded elements in display area 2 are flush.

[0051] S140. Load the first type of element into the target display area.

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

[0053] The above technical solution obtains the first type of element to be loaded and the 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, the target display area is determined, and the target display area is used to load the first type of element; the elements in the target display area are adjusted so that the cumulative sizes of the elements in the target display area are the same; the first type of element is loaded into the target display area. Its essence is that when inserting the first type of element into the page, first adjust the elements in the target display area 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 can ensure that no blank area is left after inserting the first type of element, and thus achieve the purpose of mixing the content blocks occupying a single column and the content blocks that need to span two columns or more columns in the page, maintaining the continuity and beauty of the page layout, and optimizing the user experience.

[0054] In the above technical solution, there are various specific implementation methods for S130, and this application does not limit this. Exemplarily, in one embodiment, see Figure 4 , the implementation method of S130 can include:

[0055] S210. In multiple target display areas, determine a first display area and a second display area, where 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 greater than the cumulative size of the elements in the first display area.

[0056] 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 cropped elements in the second display area is equal to the cumulative size of the elements in the first display area.

[0057] When cropping the elements in the second display area, all the loaded elements in the second display area can be cropped, or some of the loaded elements in the second display area can be cropped. Typically, the last loaded element in the second display area is cropped.

[0058] Exemplarily, if the current page is as Figure 3 shown, it is necessary to load the first type of element B. 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. It is necessary to adjust the sizes of the elements in the target display areas. 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 greater 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.

[0059] When cropping the elements in display area 2, all the loaded elements in display area 2 can be cropped, or only some of the loaded elements in display area 2 can be cropped. Typically, the last loaded element in display area 2 is cropped.

[0060] Further, S220 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; cropping the elements in the second display area based on the cropping size of the elements in the second display area.

[0061] Optionally, S220 may further 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 to crop the elements in the second display area, cropping the elements in the second display area based on the cropping size of the elements in the second display area.

[0062] 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 Equation (1)

[0063] offsetColumnList[m] = columnList[m] - columnList[k] (1)

[0064] Wherein, 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.

[0065] Exemplarily, determining the cropping ratio of the elements in the second display area based on the cropped size of the elements in the second display area and the original size of the elements in the second display area may include: determining the cropping ratio of the elements in the second display area based on the cropped size of the elements in the second display area, the original size of the elements in the second display area, and Equation (2).

[0066] ratio[m] = (Height - offsetColumnList[m]) / Width (2)

[0067] Wherein, offsetColumnList[m] is the cropped size of the elements in the second display area, Height is the original height of the elements in the second display area, and Width is the original width of the elements in the second display area.

[0068] In practice, cropping elements may make their core meaning incomplete, resulting in deviations in users' understanding. In response to this, by setting "determining whether to crop the elements in the second display area based on the cropping ratio of the elements in the second display area", it is essentially to evaluate the impact degree of the cropping operation on the core meaning of the elements. If this cropping operation has little impact on the core meaning of the elements, the determination result is to crop the elements in the second display area, and the first type of elements will be loaded subsequently. If this cropping operation has a greater impact on the core meaning of the elements, the determination result is not to crop the elements in the second display area, and the first type of elements will not be loaded subsequently.

[0069] 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 the optimal cropping ratio range.

[0070] The optimal cropping ratio range can be, for example, a pre-set cropping ratio range. If the cropping ratio of the elements in the second display area is within the optimal cropping ratio range, it means that the operation of cropping the elements in the second display area has little impact on the core meaning of the elements. If the cropping ratio of the elements in the second display area is outside the optimal cropping ratio range, it means that the operation of cropping the elements in the second display area has a greater impact on the core meaning of the elements.

[0071] 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 the original ratio of the elements in the second display area; determining the optimal cropping ratio range based on the original ratio of the elements in the second display area; and 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 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 elements, which can make the value of the optimal cropping ratio range more reasonable and further ensure the accuracy of the evaluation result of the impact degree of the cropping operation on the core meaning of the elements.

[0072] Exemplarily, if the element is an image, the optimal cropping ratio range of an element with an original ratio (such as the aspect ratio) of 4:3 is [a1, a2]; the optimal cropping ratio range of an element with an original ratio (such as the aspect ratio) of 1:1 is [a3, a4]. Refer to Figure 3 , if the cumulative size of the elements in the reference display area 1 is used to crop the element A2 (i.e., the last loaded element) in the display area 2. According to Equation (1), the cropping size of the element A2 is h2 - h1. According to Equation (2), the cropping ratio of the element A2 is h1 / w1. If the original ratio (such as the aspect ratio) of the element A2 is 4:3, it is determined whether the cropping ratio h1 / w1 of the element A2 satisfies a1 ≤ h1 / w1 ≤ a2. If the cropping ratio h1 / w1 of the element A2 satisfies a1 ≤ h1 / w1 ≤ a2, the element A2 is cropped based on the cropping size h2 - h1 of the element A2. Refer to Figure 2 , after cropping the element A2, the cumulative size of the elements in the display area 1 is the same as the cumulative size of the elements in the display area 2, both being h1. Subsequently, the first type of element B is loaded into the display area 1 and the display area 2. If the cropping ratio h1 / w1 of the element A2 does not satisfy a1 ≤ h1 / w1 ≤ a2, the element A2 is not cropped, and the first type of element B is not loaded into the display area 1 and the display area 2 subsequently.

[0073] It should be noted that after cropping the elements in the second display area, the loading attribute information of the elements in the second display area needs to be updated to ensure the accuracy of the calculation of the cumulative size of the elements in the subsequent display area.

[0074] Exemplarily, in another embodiment, refer to Figure 5, The implementation method of S130 may include:

[0075] S310. Among multiple target display areas, determine a third display area and a fourth display area. The cumulative size of elements in the third display area is the largest; the cumulative size of elements in the fourth display area is smaller than the cumulative size of elements in the third display area.

[0076] S320. 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.

[0077] Exemplarily, if the current page is as Figure 6 shown, it is necessary to load the first type of element B. 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. It is necessary to adjust the sizes of elements in the target display areas. The cumulative size of elements in display area 2 is the largest, so display area 2 is the third display area. The cumulative size of elements in display area 1 is smaller than the cumulative size of elements in display area 2, so display area 1 is the fourth display area, and it is necessary to load target preset elements in display area 1.

[0078] The target preset element is a pre-specified element, and the role of the target preset element is to fill the blank area. This application does not limit what specific element the target preset element is. In some scenarios, the target preset element can be an image, text, etc.

[0079] S320 may include: 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; loading the preset element in the fourth display area.

[0080] Further, "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; using the preset element with the first size as the target preset element.

[0081] Further, determining the 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 may include: determining the first size based on the cumulative size of elements in the third display area, the cumulative size of elements in the fourth display area, and Equation (3)

[0082] C = columnList[n] - columnList[p] (3)

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

[0084] Exemplarily, refer to Figure 6 , if based on the cumulative size of the elements in display area 2, the target preset element is loaded in display area 1, according to Equation (3), the first size should be h2 - h1. In the preset element library, search for the element with the size of h2 - h1, and use the found element with the size of h2 - h1 as the target preset element. Subsequently, load the target preset element in the fourth display area.

[0085] Based on the above technical solution, optionally, S120 may include: judging whether the remaining display area on the current page can accommodate the first type of element based on the loading attribute information of the first type of element; if the judgment result is that it can accommodate the first type of element, determine the target display area based on the loading attribute information of the first type of element.

[0086] Exemplarily, it is possible to judge whether the remaining display area on the current page can accommodate the first type of element based on the number of display areas Spancount that the first type of element needs to occupy and the current display area to be inserted.

[0087] Among them, the current display area to be inserted is the first target display area for loading the first type of element, which can be obtained according to the loading attribute information of the first type of element.

[0088] Exemplarily, if the loading attribute information of the first type of element includes the distance Left from the loading position of the first type of element to the left side of the page, it is possible to determine which display area is specifically the first target display area for loading the first type of element based on the distance Left from the loading position of the first type of element to the left side of the page. For example, refer to Figure 3 , if the width of each display area is w1, and if the distance Left from the loading position of a first type of element to the left side of the page is w1 + w1, it can be obtained that the first target display area for loading this first type of element is specifically display area 3.

[0089] In some other scenarios, the current display area to be inserted can be obtained according to the preset loading rule. Exemplarily, refer to Figure 3 , if the preset loading rule is to load in sequence from left to right, and the previous element has been loaded into display area 3, and currently a first type of element needs to be loaded, the first target display area for this first type of element is display area 1.

[0090] Optionally, it is possible to judge whether the remaining display area on the current page can accommodate the first type of element based on Equation (4);

[0091] M - J + 1 - SpanCount ≥ 0 (4)

[0092] Where 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.

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

[0094] Based on the above technical solution, optionally, S110 may include: determining whether the number of the second type of elements continuously loaded in the page up to the current moment is greater than or equal to a preset value; the second type of elements need to be loaded in one display area; if so, obtaining the first type of elements to be loaded and the loading attribute information of the first type of elements. The essence of such a setting is to control the frequency of continuously inserting the second type of elements, avoiding destroying the continuity and aesthetics of the page due to frequently inserting cross-column elements. In addition, since inserting cross-column elements usually requires additional calculations and rendering, if the frequency is too high, it will cause the page loading performance to decline, affecting the page response speed and user experience.

[0095] Figure 7 It is a flowchart of another page layout method provided by an embodiment of the present disclosure. Refer to Figure 7 and this page layout method includes:

[0096] S410, obtaining an element set; the element set includes the first type of elements and the second type of elements, and then execute S420.

[0097] The element set may be, for example, the element set sent by the server to the terminal after receiving an element pulling request sent by the terminal. It includes multiple first type of elements and multiple second type of elements.

[0098] S420, inserting the first type of elements in the element set into the first queue, and inserting the second type of elements in the element set into the second queue, and then execute S430.

[0099] The essence of this step is to classify the elements in the element set.

[0100] S430. Determine whether the number of the second type of elements continuously loaded on the page up to 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, execute S440; if not, execute S490.

[0101] S440. Extract the first type of elements and the loading attribute information of the first type of elements from the first queue, and execute S450.

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

[0103] S460. Based on the loading attribute information of the first type of elements, determine the target display area, and execute S470.

[0104] S470. Adjust the elements in the target display area so that the cumulative sizes of the elements in the target display area are consistent, and execute S480.

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

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

[0107] S500. Based on the loading attribute information of the second type of elements, load the second type of elements into the page.

[0108] 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 columns or more columns in the page, and maintain the continuity and beauty of the page layout.

[0109] It can be understood that before using the technical solutions disclosed in the embodiments of the present disclosure, the types, usage scopes, usage scenarios, etc. of the personal information involved in the present disclosure should be informed to users and the authorization of users should be obtained through appropriate means in accordance with relevant laws and regulations.

[0110] For example, when receiving an active request from a user, a prompt message is sent to the user to clearly prompt the user that the operation requested by the user will require obtaining and using the user's personal information. Thus, the user can autonomously choose whether to provide personal information to software or hardware such as an electronic device, an application program, a server, or a storage medium that executes the operation of the technical solution of the present disclosure according to the prompt message.

[0111] As an optional but non-limiting implementation, in response to receiving an active request from a user, the way of sending a prompt message to the user can be, for example, in the form of a pop-up window, and the prompt message can be presented in text in the pop-up window. In addition, the pop-up window can also carry selection controls for the user to choose "agree" or "disagree" to provide personal information to the electronic device.

[0112] It can be understood that the above-mentioned notification and the process of obtaining user authorization are only illustrative and do not limit the implementation manners of the present disclosure. Other manners that comply with relevant laws and regulations can also be applied to the implementation manners of the present disclosure.

[0113] It should be noted that for the foregoing method embodiments, for the sake of simple description, they are all expressed as a series of action combinations. However, those skilled in the art should know that the present invention is not limited by the described action sequence, because according to the present invention, certain steps can be performed in other sequences or simultaneously. Secondly, those skilled in the art should also know that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily essential to the present invention.

[0114] Figure 8 It is a schematic structural diagram of a page layout device in an embodiment of the present disclosure. The page layout device provided by the embodiment of the present disclosure can be configured in a client or can be configured in a server. The page includes at least two display areas arranged in sequence along a first direction. Refer to Figure 8 , and the page layout device specifically includes:

[0115] An acquisition module 610, configured to acquire 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;

[0116] A determination module 620, configured to determine a target display area based on the loading attribute information of the first type of element, where the target display area is used to load the first type of element;

[0117] An adjustment module 630, 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;

[0118] A loading module 640, configured to load the first type of element into the target display area.

[0119] Further, the adjustment module 630 is configured to:

[0120] In multiple target display areas, determine a first display area and a second display area, where 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 greater than the cumulative size of the elements in the first display area;

[0121] 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.

[0122] Further, the adjustment module 630 is configured to:

[0123] Based on the cumulative size of the elements in the first display area, determine the cropping size of the elements in the second display area;

[0124] 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 the cropping ratio of the elements in the second display area;

[0125] Based on the cropping ratio of the elements in the second display area, determine whether to crop the elements in the second display area;

[0126] If the determination result is to crop the elements in the second display area, crop the elements in the second display area based on the cropping size of the elements in the second display area.

[0127] Further, the adjustment module 630 is configured to:

[0128] Determine the original ratio of the elements in the second display area;

[0129] Based on the original ratio of the elements in the second display area, determine the optimal cropping ratio range;

[0130] Based on the cropping ratio of the elements in the second display area and the optimal cropping ratio range, determine whether to crop the elements in the second display area.

[0131] Further, the adjustment module 630 is configured to:

[0132] Among multiple target display areas, determine a third display area and a fourth display area, where the cumulative size of the elements in the third display area is the largest; the cumulative size of the elements in the fourth display area is smaller than the cumulative size of the elements in the third display area;

[0133] Based on the cumulative size of the elements in the third display area, load target preset elements 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.

[0134] Further, the determination module is configured to:

[0135] Based on the loading attribute information of the first type of elements, determine whether the remaining display areas in the current page can accommodate the first type of elements;

[0136] If the judgment result is that the first type of element can be accommodated, determine the target display area based on the loading attribute information of the first type of element.

[0137] Further, the obtaining module is configured to:

[0138] Judge whether the number of the second type of elements continuously loaded in the page up to 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;

[0139] If so, obtain the first type of elements to be loaded and the loading attribute information of the first type of elements.

[0140] Further, the obtaining module is further configured to:

[0141] Obtain an element set; the element set includes the first type of elements and the second type of elements;

[0142] Insert the first type of elements in the element set into the first queue, and insert the second type of elements in the element set into the second queue;

[0143] The obtaining the first type of elements to be loaded and the loading attribute information of the first type of elements includes:

[0144] Extract the first type of elements and the loading attribute information of the first type of elements from the first queue.

[0145] Further, the obtaining module is further configured to:

[0146] If the number of the second type of elements continuously loaded in the page up to the current moment is less than the preset value, extract the second type of elements and the loading attribute information of the second type of elements from the second queue;

[0147] Based on the loading attribute information of the second type of elements, load the second type of elements into the page.

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

[0149] Figure 9 It is a schematic structural diagram of an electronic device in the embodiments of the present disclosure. Specifically refer to the following Figure 9, which shows a schematic structural diagram of the electronic device 1000 suitable for implementing the embodiments of the present disclosure. The electronic device 1000 in the embodiments 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, etc., and fixed terminals such as digital TVs, desktop computers, smart home devices, etc. Figure 9 The electronic device shown is merely an example and should not impose any limitations on the functions and usage scope of the embodiments of the present disclosure.

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

[0151] Generally, 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 wiredly to exchange information. Although Figure 9 the electronic device 1000 with various devices is shown, it should be understood that it is not required to implement or have all the shown devices. More or fewer devices may be alternatively implemented or had.

[0152] In particular, according to an embodiment of the present disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, an embodiment of the present disclosure includes a computer program product that includes a computer program carried on a non-transitory computer-readable medium. The computer program contains program code for performing the method shown in the flowchart, thereby implementing the page layout method as described above. In such an embodiment, the computer program can be downloaded and installed from the network via 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-described functions defined in the method of the embodiment of the present disclosure are performed.

[0153] It should be noted that the above-mentioned computer-readable medium in the present disclosure can be a computer-readable signal medium or a computer-readable storage medium or any combination of the two. A computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the above. More specific examples of the computer-readable storage medium can 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, the computer-readable storage medium can be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. And in the present disclosure, a computer-readable signal medium can include an information signal propagated in a baseband or as part of a carrier wave, which carries computer-readable program code. Such a propagated information signal can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. The computer-readable signal medium can also be any computer-readable medium other than the computer-readable storage medium, and the computer-readable signal medium can send, propagate, or transmit 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 can be transmitted by any appropriate medium, including but not limited to: wires, optical cables, RF (radio frequency), etc., or any suitable combination of the above.

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

[0155] The above computer-readable medium can be included in the above electronic device; or it can exist separately and not be assembled into the electronic device.

[0156] The above computer-readable medium carries one or more programs, and when the above one or more programs are executed by the electronic device, the electronic device is caused to:

[0157] Obtain a first type of element to be loaded and the loading attribute information of the first type of element; the first type of element needs to be loaded in at least two display areas;

[0158] Based on the loading attribute information of the first type of element, determine a target display area for loading the first type of element;

[0159] Adjust the elements in the target display area so that the cumulative sizes of the elements in the target display area are consistent;

[0160] Load the first type of element into the target display area.

[0161] Optionally, when the above one or more programs are executed by the electronic device, the electronic device can also perform the other steps described in the above embodiments.

[0162] Computer program code for performing the operations of the present disclosure can be written in one or more programming languages or combinations thereof. The above programming languages include, but are not limited to, object-oriented programming languages such as Java, Smalltalk, C++, and also include conventional procedural programming languages such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, executed as a stand-alone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer can 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 can be connected to an external computer (e.g., by using an Internet service provider to connect through the Internet).

[0163] The flowcharts and block diagrams in the accompanying drawings illustrate the possible architectures, functions, and operations of systems, methods, and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagram may represent a module, a segment of a program, or a portion of code that contains one or more executable instructions for implementing a specified logical function. It should also be noted that, in some alternative implementations, the functions noted in the blocks may occur in a different order than that noted in the accompanying drawings. For example, two consecutive blocks shown may actually be executed substantially in parallel, or they may sometimes be executed in the reverse order, depending on the functions involved. It should also be noted that each block in the block diagram and / or flowchart, and combinations of blocks in the block diagram and / or flowchart, can be implemented by a dedicated hardware-based system that performs the specified functions or operations, or can be implemented by a combination of dedicated hardware and computer instructions.

[0164] The units described in the embodiments of the present disclosure can be implemented in software or in hardware. In some cases, the name of the unit does not constitute a limitation on the unit itself.

[0165] The functions described above herein can be performed, at least in part, by one or more hardware logic components. By way of 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 a chip (SOCs), complex programmable logic devices (CPLDs), and the like.

[0166] In the context of the present disclosure, a machine-readable medium may be a tangible medium that can contain or store a program for use by or in connection with an instruction execution system, apparatus, or device. A machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, 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 disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0167] According to one or more embodiments of the present disclosure, the present disclosure provides an electronic device, including:

[0168] One or more processors;

[0169] A memory for storing one or more programs;

[0170] When the one or more programs are executed by the one or more processors, the one or more processors implement any one of the page layout methods provided by the present disclosure.

[0171] 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, and when the program is executed by a processor, it implements any one of the page layout methods provided by the present disclosure.

[0172] The embodiments of the present disclosure further provide a computer program product, which includes a computer program or instruction, and when the computer program or instruction is executed by a processor, it implements the page layout method as described above.

[0173] It should be noted that in this document, relational terms such as "first" and "second" are only used 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 term "comprising", "including" or any other variant thereof is intended to cover a non-exclusive inclusion, such that a process, method, article or device comprising a series of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article or device. Without further limitation, an element defined by the statement "comprising a..." does not exclude the presence of additional identical elements in the process, method, article or device comprising the element.

[0174] The above are only specific embodiments of the present disclosure, enabling those skilled in the art to understand or implement the present disclosure. Various modifications to these embodiments will be obvious to those skilled in the art, and the general principles defined herein can be implemented in other embodiments without departing from the spirit or scope of the present disclosure. Therefore, the present disclosure will not be limited to the embodiments described herein, but rather to the broadest scope consistent with the principles and novel features disclosed herein.

Claims

1. A page layout method, characterized in that, The page includes at least two display areas arranged in sequence along a first direction. The page layout method includes: Obtaining first-class elements to be loaded and loading attribute information of the first-class elements; the first-class elements need to be loaded in at least two display areas; Based on the loading attribute information of the first-class elements, determining a target display area for loading the first-class elements; Adjusting the elements in the target display area to make the cumulative sizes of the elements in the target display area consistent; Loading the first-class elements into the target display area.

2. The method according to claim 1, wherein Adjusting the elements in the target display area includes: Among multiple target display areas, determining a first display area and a second display area, where 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 greater 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, cropping the elements in the second display area so that the cumulative size of the cropped elements in the second display area is equal to the cumulative size of the elements in the first display area.

3. The method according to claim 2, wherein The cropping the elements in the second display area based on the cumulative size of the elements in the first display area includes: Based on the cumulative size of the elements in the first display area, determining the cropping size 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 the cropping ratio of the elements in the second display area; Based on the cropping ratio of the elements in the second display area, determining whether to crop the elements in the second display area; If the determination result is to crop the elements in the second display area, cropping the elements in the second display area based on the cropping size of the elements in the second display area.

4. The method according to claim 3, characterized in that, The determining whether to crop the elements in the second display area based on the cropping ratio of the elements in the second display area includes: Determining the original ratio of the elements in the second display area; Based on the original ratio of the elements in the second display area, determining the optimal cropping ratio range; Based on the cropping ratio of the elements in the second display area and the optimal cropping ratio range, determining whether to crop the elements in the second display area.

5. The method according to claim 1, characterized in that, Adjusting the elements in the target display area includes: Among multiple target display areas, determining a third display area and a fourth display area, where the cumulative size of the elements in the third display area is the largest; the cumulative size of the elements in the fourth display area is smaller than the cumulative size of the elements in the third display area; Based on the cumulative size of the elements in the third display area, loading target preset elements 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 The determining the target display area based on the loading attribute information of the first-class elements includes: Based on the loading attribute information of the first-class elements, determining whether the remaining display areas in the current page can accommodate the first-class elements; If the determination result is that the first-class elements can be accommodated, determining the target display area based on the loading attribute information of the first-class elements.

7. The method according to claim 1, characterized in that Obtaining the first type of elements to be loaded and the loading attribute information of the first type of elements includes: Determining whether the number of the second type of elements continuously loaded in the page up to 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, obtaining 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, wherein It further includes: Obtaining an element set; the element set includes the first type of elements and the second type of elements; Inserting the first type of elements in the element set into a first queue, and inserting the second type of elements in the element set into a second queue; Obtaining the first type of elements to be loaded and the loading attribute information of the first type of elements includes: Extracting the first type of elements and the loading attribute information of the first type of elements from the first queue.

9. The method according to claim 8, characterized in that It further includes: If the number of the second type of elements continuously loaded in the page up to the current moment is less than the preset value, extracting the second type of elements and the loading attribute information of the second type of elements from the second queue; Based on the loading attribute information of the second type of elements, loading the second type of elements into the page.

10. A page layout device, characterized in that, The page includes at least two display areas arranged in sequence along a first direction, and the page layout device includes: An obtaining module, 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; A determining module, configured to determine a target display area based on the loading attribute information of the first type of elements, where the target display area is used to load the first type of 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, configured to load the first type of elements into the target display area.

11. An electronic device, characterized in that, The electronic device includes: One or more processors; A storage device, configured to store 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-9.

12. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by a processor, it implements the method according to any one of claims 1-9.

Images