Page layout method and device, electronic equipment and storage medium

Abstract

The invention provides a page layout method and device, electronic equipment and a storage medium. The page layout method provided by the invention comprises the following steps: monitoring the size change of a container to obtain the size information of the container in real time, wherein the size information of the container comprises the width and height of the container; the size information of the grid cells is obtained according to the size information of the container, the container is gridded based on the size information of the grid cells, and the size information of the grid cells comprises the width and height of the grid cells; determining the screen geometric attribute of each component according to the grid layout information of each component in the container; and executing visual rendering based on the screen geometric attribute of each component in the container so as to present each component in the current page. By means of the page layout method and device, the page layout can achieve the good space utilization effect on the display device of any proportion.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and more particularly to a page layout method, apparatus, electronic device, and storage medium. Background Technology

[0002] With the widespread application of large-screen display devices in various scenarios such as data centers, monitoring centers, and showrooms, the grid layout of pages is facing new challenges.

[0003] In related technologies, page layouts employ a single-dimensional grid calculation method based on container width. This method divides the page horizontally into several columns at a fixed ratio, with the grid width calculated based on the container width, while the grid height is determined using a fixed value or a strategy that adaptively adjusts based on the internal content. This page layout method suffers from at least the following technical drawbacks in large-screen display scenarios: 1) Low vertical space utilization: Because the grid height cannot be reasonably allocated according to the container height, the vertical space is underutilized in large-screen display scenarios, easily resulting in a large number of blank areas. This problem is particularly prominent on ultra-wide screens or display devices with special aspect ratios.

[0004] 2) Insufficient cross-device aspect ratio adaptation capability: Due to the wide variety of large-screen display devices, the aspect ratios of different display devices vary significantly, such as 16:9, 21:9, 4:3, etc. Since the above page layout methods cannot respond to changes in the height direction simultaneously, it is difficult to achieve a full and harmonious visual filling effect on display devices with different aspect ratios.

[0005] 3) Difficulty in ensuring visual consistency of layout: When the container size changes, since the above page layout method only uses width in the calculation, the visual effect of the page layout varies greatly under different sizes, resulting in significant inconsistency and affecting user experience.

[0006] Therefore, there is an urgent need for a new technology that enables page layouts on display devices of any scale, including large-screen display devices, to achieve better space utilization. Summary of the Invention

[0007] In view of the above, this disclosure provides a page layout method, apparatus, electronic device, and storage medium.

[0008] According to a first aspect of this disclosure, a page layout method is provided, the page layout method comprising: Monitor container size changes to obtain container size information in real time, the container size information including the container's width and height; The size information of the grid cells is obtained based on the size information of the container, and the container is gridded based on the size information of the grid cells. The size information of the grid cells includes the width and height of the grid cells. The screen geometric properties of each component are determined based on the grid layout information of each component within the container; Visual rendering is performed based on the screen geometry properties of each component within the container to present each component on the current page.

[0009] In some embodiments of the first aspect of this disclosure, the method of listening to container size changes to obtain container size information in real time includes: using the browser's native ResizeObserver interface to listen to container size changes to obtain container size information in real time.

[0010] In some embodiments of the first aspect of this disclosure, obtaining the size information of the grid cells based on the size information of the container includes: Determine the grid configuration information of the container, which includes the number of grid rows, the number of grid columns, the grid row spacing, and the grid column spacing; The width of the container is subtracted from the sum of all horizontal spacings to obtain the net width available for the grid cell. The net width is then divided by the number of grid rows in the container to obtain the width of the grid cell. The sum of all horizontal spacings is determined based on the number of grid columns and the grid column spacing of the container. The net height usable for the grid cell is obtained by subtracting the sum of all vertical spacings from the height of the container. The net height is then divided by the number of grid columns in the container to obtain the height of the grid cell. The sum of all vertical spacings is determined based on the number of grid rows and the grid row spacing of the container.

[0011] In some embodiments of the first aspect of this disclosure, determining the grid configuration information of the container includes: determining the current aspect ratio of the container based on the container's size information, searching for first grid configuration information corresponding to the current aspect ratio of the container, and determining the searched first grid configuration information as the grid configuration information of the container.

[0012] In some embodiments of the first aspect of this disclosure, obtaining the size information of the grid cell based on the size information of the container further includes: determining the current breakpoint based on the width of the container; determining whether a breakpoint crossing has occurred based on the current breakpoint and the previous breakpoint; if a breakpoint crossing has occurred, recalculating the size information of the grid cell using the second grid configuration information corresponding to the current breakpoint and the size information of the container, and gridding the container based on the size information of the grid cell, wherein the grid configuration information includes the number of grid rows, the number of grid columns, the grid row spacing, and the grid column spacing.

[0013] In some embodiments of the first aspect of this disclosure, obtaining the size information of the grid cells based on the size information of the container, and gridding the container based on the size information of the grid cells, includes: triggering a timer to start when a change in the size of the container is detected; and when the timer reaches a predetermined duration, obtaining the size information of the grid cells based on the most recently acquired size information of the container, and gridding the container according to the size information of the grid cells.

[0014] In some embodiments of the first aspect of this disclosure, obtaining the size information of the grid cell based on the size information of the container further includes: determining whether the size information of the grid cell meets a preset condition, the preset condition including that the size of the grid cell is less than or equal to a preset upper limit of cell size and greater than or equal to a lower limit of cell size; if the size information of the grid cell does not meet the preset condition, then obtaining the size information of the grid cell again based on the size information of the container until the size information of the grid cell meets the preset condition.

[0015] According to a second aspect of this disclosure, a page layout apparatus is provided, the page layout apparatus comprising: A monitoring module is used to monitor changes in container size to obtain real-time container size information, including the container's width and height. A grid module is used to obtain the size information of grid cells based on the size information of the container, and to grid the container based on the size information of the grid cells, wherein the size information of the grid cells includes the width and height of the grid cells; A conversion module is used to determine the screen geometric properties of each component based on the grid layout information of each component within the container; The visualization module is used to perform visualization rendering based on the screen geometry properties of each component within the container to present each component on the current page.

[0016] According to a third aspect of this disclosure, an electronic device is provided, comprising: one or more processors and a memory storing a program, the program including instructions that, when executed by the processor, cause the processor to perform the methods described above.

[0017] According to a fourth aspect of this disclosure, a computer-readable storage medium storing a program is provided, the program including instructions that, when executed by one or more processors of a computing device, cause the computing device to perform the method described above.

[0018] This embodiment of the disclosure achieves a responsive grid layout with two-dimensional container adaptation by monitoring changes in container size and updating the size of grid cells in real time based on the width and height of the container. This enables the page layout to achieve better space utilization on display devices of any scale. Attached Figure Description

[0019] To more clearly illustrate the technical solutions in the embodiments of this disclosure or the prior art, the drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this disclosure. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0020] Figure 1 A flowchart illustrating a page layout method provided in an embodiment of this disclosure; Figure 2 A schematic diagram illustrating an exemplary implementation process and application example of the page layout method provided in this disclosure embodiment; Figure 3 A schematic diagram of the structure of the page layout device provided in the embodiments of this disclosure; Figure 4 A schematic structural block diagram of an electronic device provided in an embodiment of this disclosure. Detailed Implementation

[0021] The technical solutions of the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this disclosure, and not all embodiments. Based on the embodiments of this disclosure, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this disclosure.

[0022] The terminology used in the embodiments of this disclosure is for the purpose of describing particular embodiments only and is not intended to be limiting of this disclosure. The singular forms “a,” “the,” and “the” as used in the embodiments of this disclosure and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise.

[0023] Depending on the context, words such as "if," "when," etc., used here can be interpreted as "when," "when," "in response to determination," or "in response to detection." Similarly, depending on the context, the phrases "if determination" or "if detection (of the stated condition or event)" can be interpreted as "when determination," "in response to determination," "when detection (of the stated condition or event)," or "in response to detection (of the stated condition or event)."

[0024] The relevant technologies will be briefly explained below.

[0025] Among related technologies, page layout techniques include grid layout (CSS Grid Layout, Cascading StyleSheets Grid Layout), flexible box layout (Flexbox, FlexibleBoxLayoutModule), and various JavaScript grid libraries such as GridStack.js and React Grid Layout. While these technologies excel in their respective fields, they all share a common limitation: they calculate layouts based on width, with relatively simple handling of height. Although CSS Grid Layout supports two-dimensional layout, the size of its grid tracks needs to be predefined or determined based on the content, making it impossible to achieve dynamic two-dimensional calculations based on the overall container size. JavaScript grid libraries primarily focus on drag-and-drop arrangement functionality, with relatively insufficient consideration for responsive adaptation. In other words, how to calculate grid dimensions based on container width and height to achieve optimal space utilization on display devices of any aspect ratio is a pressing technical problem that needs to be solved in page layout technology.

[0026] The specific implementation methods of the embodiments disclosed herein will be described in detail below.

[0027] Figure 1 A schematic flowchart of a page layout method provided in an embodiment of this disclosure is shown. This page layout method can be applied to, but is not limited to, electronic devices including display devices. See also Figure 1 The page layout method of this disclosure embodiment may include the following steps: Step 101: Monitor container size changes to obtain container size information in real time, including the container's width and height; Step 102: Obtain the size information of the grid cells based on the size information of the container, and grid the container based on the size information of the grid cells. The size information of the grid cells includes the width and height of the grid cells. Step 103: Determine the screen geometry properties of each component based on the grid layout information of each component within the container; Step 104: Perform visual rendering based on the screen geometry properties of each component within the container to present each component on the current page.

[0028] This embodiment of the disclosure achieves a responsive grid layout with two-dimensional container adaptation by monitoring changes in container size and updating the size of grid cells in real time based on the width and height of the container. This enables the page layout to achieve better space utilization on display devices of any scale.

[0029] A container is a rectangular area used to load, organize, and position visual components such as charts, text, and images. By dividing the screen into multiple containers of different sizes and positions, a clear and orderly page structure can be built, such as top-bottom layouts, left-right column layouts, and grid layouts. When the screen size or proportion changes, the containers can scale and adjust according to preset rules, ensuring that the relative positions and proportions of the content inside remain basically unchanged, avoiding layout chaos. In practical applications, logically related components can be placed in the same container so that users can intuitively distinguish information belonging to the same category or the same analytical dimension.

[0030] In step 101, the browser's native ResizeObserver interface can be used to listen for container size changes and obtain the container's size information in real time. ResizeObserver is a JavaScript interface that automatically triggers a listener when an element's size changes. Therefore, based on ResizeObserver's container size monitoring mechanism, changes in container size can be listened to in real time, and the latest container size information can be captured, thereby achieving real-time dynamic adjustment of the layout.

[0031] Specifically, after the system starts, the initial size of the container is measured and a container size listener is registered. When the container size listener detects a change in the container size, it immediately captures the latest container size information and triggers an update of the grid cell size. Thus, the grid cell size can be calculated using the initial size of the container when the system starts, and the grid cell size can be updated in real time in response to changes in the container size during system operation.

[0032] Furthermore, step 102 also includes: triggering a timer to start when a change in container size is detected; and when the timer reaches a predetermined duration, obtaining the grid cell size information based on the most recently acquired container size information, and then gridding the container according to the grid cell size information. Here, the predetermined duration can be flexibly set as needed. For example, the predetermined duration can be, but is not limited to, 1 second or other durations. Thus, a debouncing mechanism can be used to avoid frequent updates to the grid cell size.

[0033] In some implementations, step 102 may include: determining the grid configuration information of the container; subtracting the sum of all horizontal spacings from the width of the container to obtain the net width available for the grid cell, dividing the net width by the number of grid rows in the container to obtain the width of the grid cell, the sum of all horizontal spacings being determined based on the number of grid columns and the grid column spacing of the container; subtracting the sum of all vertical spacings from the height of the container to obtain the net height available for the grid cell, dividing the net height by the number of grid columns in the container to obtain the height of the grid cell, the sum of all vertical spacings being determined based on the number of grid rows and the grid row spacing of the container.

[0034] Specifically, the sum of all horizontal spacings can be the product of the difference between the number of grid columns and 1, and the grid column spacing; the sum of all vertical spacings can be the product of the difference between the number of grid rows and 1, and the grid row spacing.

[0035] Therefore, the size of the grid cells can be calculated based on the container's two dimensions (i.e., width and height), ensuring that the layout can make full use of screen space on any aspect ratio device (especially large-screen display devices).

[0036] Furthermore, in step 102, the size information of the grid cells can be cached, and the size information of the grid cells can be recalculated only when the size of the container changes, so as to avoid repeated calculations.

[0037] In step 102, the size information of the grid cells can be obtained based on the container's size information and the pre-configured grid configuration information. The grid configuration information may include, but is not limited to, the number of grid rows, the number of grid columns, the grid row spacing, and the grid column spacing. The number of grid rows refers to the number of grid cells in the horizontal direction, the number of grid columns is the number of grid cells in the vertical direction, the grid row spacing is the distance between adjacent grid cells in two adjacent rows, and the grid column spacing is the distance between adjacent grid cells in two adjacent columns, also known as the distance between adjacent grid cells in the same row.

[0038] In practical applications, grid configuration information can be pre-configured.

[0039] In some examples, the mesh configuration information of the target container can be set by the user or use a default configuration during system initialization.

[0040] In some examples, multiple first grid configurations can be pre-configured, each corresponding to a different container aspect ratio and / or screen aspect ratio. In step 102, the current aspect ratio of the container can be determined based on its size information. The corresponding first grid configuration for the current aspect ratio is then found, and the grid cell size information is obtained using the first grid configuration for the current aspect ratio and the container's current size information. This allows for grid layout that adapts to the container's real-time aspect ratio to achieve better visual effects.

[0041] In some examples, multiple breakpoints, various second grid configurations, and the mapping relationship between the second grid configurations and breakpoints can be pre-configured. In step 102, the current breakpoint can be determined based on the container's current width. A breakpoint crossing is then determined based on the current breakpoint and the previous breakpoint. If a breakpoint crossing occurs, the grid cell dimensions are recalculated using the second grid configuration information corresponding to the current breakpoint and the container's dimensions. The container is then gridded based on these grid cell dimensions. If no breakpoint crossing occurs, there is no need to recalculate the grid cell dimensions. Therefore, when the container width crosses a breakpoint, not only are the grid dimensions recalculated, but grid parameters such as the number of grid rows, columns, row spacing, and column spacing are also adjusted to better adapt to application requirements that need to display pages on multiple devices.

[0042] Specifically, breakpoints are sorted by value from smallest to largest, and then traversed from largest to smallest to find the first breakpoint less than or equal to the current width of the container. This breakpoint is the current breakpoint. The current breakpoint is compared with the previously recorded breakpoint. If the current breakpoint is different from the previous breakpoint, it means a crossing has occurred; if the current breakpoint is the same as the previous breakpoint, it means no crossing has occurred.

[0043] In practical applications, when switching grid configuration information or updating the grid layout, a smooth transition effect can be provided, allowing components to move smoothly to the new position, thereby further improving the user experience.

[0044] Furthermore, the grid configuration information can also be pre-configured using other methods as needed. This disclosure does not limit the specific configuration method for the grid configuration information.

[0045] Furthermore, this embodiment of the disclosure also includes: pre-configuring an upper limit and a lower limit for the cell size. In step 102, after obtaining the size information of the grid cell, it is further determined whether the size information of the grid cell meets the preset conditions. The preset conditions include that the size of the grid cell is less than or equal to the preset upper limit of the cell size and greater than or equal to the lower limit of the cell size. If the size information of the grid cell does not meet the aforementioned preset conditions, the size information of the grid cell is obtained again based on the size information of the container until the size information of the grid cell meets the aforementioned preset conditions.

[0046] Specifically, if the calculated grid cell size is less than the lower limit or exceeds the upper limit, the grid cell size can be recalculated by adjusting the grid configuration information (e.g., selecting a different grid configuration or adjusting some parameters in the grid configuration information) until the grid cell size is neither less than the lower limit nor exceeds the upper limit. This prevents excessively small or large grid cells from appearing at extreme sizes on containers or screens, ensuring readability and visual appeal of the content and improving the user experience.

[0047] The upper limit of the grid cell size can include the maximum width and maximum height of the grid cell, while the lower limit can include the minimum width and minimum height of the grid cell. A grid cell size less than or equal to the preset upper limit and greater than or equal to the lower limit means that the grid cell width is greater than or equal to the minimum width and less than or equal to the maximum width, and the grid cell height is greater than or equal to the minimum height and less than or equal to the maximum height. In practical applications, the upper and lower limits of the grid cell size can be flexibly configured based on factors such as screen size, container size, application scenario, and content. This embodiment does not limit the specific values ​​of the upper and lower limits of the grid cell size.

[0048] In step 103, the grid layout information of the component may include the component's starting row, starting column, column span, and row span. The starting row and starting column of the component can be the row and column of the grid cell to which the component's reference point belongs. In specific applications, the grid layout information of the component can be pre-configured. For example, a user can add components that need to be laid out in the target container to the system and set the grid layout information of the component, such as the starting row, starting column, column span, and row span.

[0049] In step 103, the screen geometric attributes of the component may include the component's screen position and screen size. The screen position can represent the coordinates (x, y) of the component's reference point in the screen coordinate system, where x represents the horizontal coordinate and y represents the vertical coordinate. The screen size may include the height and width in the screen coordinate system. Here, the component's reference point may be, but is not limited to, the top-left corner of the component. In this embodiment of the disclosure, the component's screen geometric attributes are calculated from the component's grid layout information.

[0050] The component position transformation from grid to screen in step 103 can rearrange the component positions, update the layout, and ensure the accuracy of the layout, avoiding position deviations caused by floating-point calculation errors.

[0051] Furthermore, the method in this embodiment may also include: responding to a user's operation on any or more components in the container, calculating the grid layout information of the components in reverse based on the screen geometric properties of the components, thereby avoiding positional deviations caused by floating-point calculation errors, accurately locating the component position in the drag operation, realizing precise drag operation on the components, and further improving the user experience.

[0052] Specifically, the visual rendering in step 104 can include: style application, DOM updating, and visual rendering. In style application, the component's screen geometry properties are used to set styles, calculate style rules, and dynamically adjust styles. In DOM updating, the component's screen geometry properties are used to update the DOM content. In visual rendering, the component's screen geometry properties are used for layout calculations and drawing operations, thereby adaptively adjusting the presentation style and display position of components on the screen when the container size changes.

[0053] Furthermore, in step 104, to ensure the system maintains good performance even under complex layouts, one or more of the following optimization strategies can be adopted: 1) Use requestAnimationFrame to ensure that layout updates are synchronized with the browser rendering cycle, avoiding unnecessary repaints. 2) Apply style changes in batches to reduce the number of browser reflows. 3) Use the CSSTransform property for position adjustment to improve animation performance. Therefore, this embodiment of the disclosure can support real-time adjustment of complex layouts containing a large number of components.

[0054] Figure 2 The specific implementation process and effects of the method according to embodiments of this disclosure are illustrated. See also Figure 2The container initially has dimensions of 1920×1080, height of 1080, and width of 1920. By monitoring changes in container size, a new size change is detected: 2560×1400, height of 1440, and width of 2560. After debounce processing (i.e., the timer exceeds a predetermined duration), the latest dimensions of the grid cells are calculated using a two-dimensional method based on the container's new size of 2560×1400. The container is then re-meshed using these new dimensions. For each component in the container (i.e., component A, component B, and component C), the screen geometry of the components is updated using the re-meshed grid layout information. Based on the screen geometry of each component (i.e., component A, component B, and component C), the element positions are rearranged (i.e., the positions of components A, B, and C are rearranged) to update the layout and apply a new style for rendering. Figure 2 It also shows the presentation styles of components A, B, and C in their initial state, as well as their presentation styles in their adjusted state. Figure 2 As can be seen, the method of this disclosure embodiment realizes a responsive grid layout with two-dimensional container adaptation, which enables the page layout to achieve better space utilization on display devices of any scale.

[0055] As can be seen from the above, the embodiments of this disclosure propose a two-dimensional grid cell size calculation method that simultaneously calculates grid cell sizes based on both container width and container height. This method overcomes the limitations of traditional single-dimensional calculations and achieves a responsive grid layout that adapts to two-dimensional containers, enabling page layouts to achieve better space utilization on display devices of any aspect ratio. Furthermore, it comprehensively utilizes anti-shake, batch updates, and requestAnimationFrame to achieve a high-performance layout update mechanism. In addition, it supports bidirectional conversion between grid layout and screen position, ensuring layout accuracy and consistency. Moreover, it can automatically select appropriate grid configuration information for grid cell size calculation based on the container's aspect ratio and usage scenario, further improving screen space utilization.

[0056] Figure 3 A schematic diagram of the structure of a page layout apparatus provided in an embodiment of this disclosure is shown. See also Figure 3 The page layout device 300 of this disclosure embodiment may include: The listening module 301 is used to listen for changes in the container size in order to obtain the container's size information in real time. The container's size information includes the container's width and height. The grid module 302 is used to obtain the size information of the grid cells based on the size information of the container, and to grid the container based on the size information of the grid cells. The size information of the grid cells includes the width and height of the grid cells. The conversion module 303 is used to determine the screen geometric properties of each component based on the grid layout information of each component within the container. Visualization module 304 is used to perform visualization rendering based on the screen geometry properties of each component within the container to present each component on the current page.

[0057] Furthermore, the listening module can be used to listen for changes in container size using the browser's native ResizeObserver interface in order to obtain the container's size information in real time.

[0058] Furthermore, the grid module 302 can be specifically used to: determine the grid configuration information of the container, including the number of grid rows, the number of grid columns, the grid row spacing, and the grid column spacing; subtract the sum of all horizontal spacings from the width of the container to obtain the net width available for the grid cell, divide the net width by the number of grid rows of the container to obtain the width of the grid cell, and the sum of all horizontal spacings is determined based on the number of grid columns and the grid column spacing of the container; subtract the sum of all vertical spacings from the height of the container to obtain the net height available for the grid cell, divide the net height by the number of grid columns of the container to obtain the height of the grid cell, and the sum of all vertical spacings is determined based on the number of grid rows and the grid row spacing of the container.

[0059] Furthermore, the grid module 302 can be specifically used to: determine the current aspect ratio of the container based on the container's size information, find the first grid configuration information corresponding to the current aspect ratio of the container, and determine the found first grid configuration information as the container's grid configuration information.

[0060] Furthermore, the grid module 302 can also be used to: determine the current breakpoint based on the width of the container, and determine whether a breakpoint crossing has occurred based on the current breakpoint and the previous breakpoint; if a breakpoint crossing has occurred, then recalculate the size information of the grid cell using the second grid configuration information corresponding to the current breakpoint and the size information of the container, and grid the container based on the size information of the grid cell. The grid configuration information includes the number of grid rows, the number of grid columns, the grid row spacing, and the grid column spacing.

[0061] Furthermore, the listening module 301 can also be used to trigger the timer to start when the container size changes; the grid module 302 can also be used to: obtain the grid cell size information based on the most recently acquired container size information when the timer reaches the predetermined duration, and grid the container according to the grid cell size information.

[0062] Furthermore, the grid module 302 can also be used to: determine whether the size information of the grid cell meets the preset conditions, the preset conditions including that the size of the grid cell is less than or equal to the preset upper limit of the cell size and greater than or equal to the lower limit of the cell size; if the size information of the grid cell does not meet the preset conditions, then the size information of the grid cell is obtained again based on the size information of the container until the size information of the grid cell meets the preset conditions.

[0063] In practical applications, the page layout device 300 can be implemented through software, hardware, or a combination of both. For example, the page layout device 300 can be implemented as software running on the electronic device 400 described below.

[0064] In addition, embodiments of this disclosure also provide a computer-readable storage medium having a computer program stored thereon, the program including instructions that, when executed by one or more processors of a computing device, perform the steps of the aforementioned page layout method.

[0065] Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of this disclosure is shown. See also... Figure 4 The electronic device 400 may include a processor 401, a memory 402 storing a program, and a display device 403. The program is executed by the processor 401 to implement the method flow and / or program units corresponding to each unit in the device shown in the above embodiments of this disclosure, thereby presenting a page on the display device 403 and presenting each component on the page.

[0066] Processor 401 can process instructions that execute within the electronic device, including instructions stored in or on memory to display graphical information of a user interface on an external input / output device (such as a display device coupled to an interface). In other embodiments, multiple processors and / or multiple buses can be used with multiple memories and multiple memory sets, if desired.

[0067] Memory 402 is the computer-readable storage medium provided in this disclosure, which can be used to store non-transitory software programs, non-transitory computer-executable programs, and units, such as those in the embodiments of this disclosure. Figure 1 The page layout method shown corresponds to the program instructions / units. Processor 401 executes methods such as those described in the above embodiments by running non-transient software programs, instructions, and units stored in memory 402. Figure 1 The page layout method shown corresponds to the program, instructions, and units.

[0068] In addition, the electronic device 400 may also include an input device 404, which may include, but is not limited to, a keyboard, a mouse, a microphone, etc.

[0069] In practical applications, the processor 401, memory 402, display device 403, and input device 404 can be connected via a bus or other means. Figure 4 Taking the example of a connection between China and Israel via a bus.

[0070] The aforementioned programs (also known as software, software applications, or code) include the machine instructions of a programmable processor and can be implemented using object-oriented programming languages, assembly language, or machine language.

[0071] With the development of time and technology, the meaning of "medium" has become increasingly broad. The dissemination of computer programs is no longer limited to tangible media; they can also be downloaded directly from the network. Any combination of one or more computer-readable storage media can be used. Computer-readable storage media can be, but is not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices, or any combination thereof. More specific examples of computer-readable storage media (a non-exhaustive list) include: portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof. In this document, a 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, device, or apparatus.

[0072] The technical solutions provided in this disclosure have been described in detail above. Specific examples have been used to illustrate the principles and implementation methods of this disclosure. The descriptions of the embodiments above are only for the purpose of helping to understand the methods and core ideas of this disclosure. Furthermore, those skilled in the art will recognize that, based on the ideas of this disclosure, there will be changes in the specific implementation methods and application scope. Therefore, the content of this specification should not be construed as a limitation of this disclosure.

[0073] The above description is merely a preferred embodiment of this disclosure and is not intended to limit this disclosure. Any modifications or equivalent substitutions made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A page layout method, characterized in that, The page layout method includes: Monitor container size changes to obtain container size information in real time, the container size information including the container's width and height; The size information of the grid cells is obtained based on the size information of the container, and the container is gridded based on the size information of the grid cells. The size information of the grid cells includes the width and height of the grid cells. The screen geometric properties of each component are determined based on the grid layout information of each component within the container; Visual rendering is performed based on the screen geometry properties of each component within the container to present each component on the current page.

2. The method according to claim 1, characterized in that, The method of listening to changes in container size to obtain container size information in real time includes: using the browser's native ResizeObserver interface to listen to changes in container size to obtain container size information in real time.

3. The method according to claim 1, characterized in that, The step of obtaining the grid cell size information based on the container size information includes: Determine the grid configuration information of the container, which includes the number of grid rows, the number of grid columns, the grid row spacing, and the grid column spacing; The width of the container is subtracted from the sum of all horizontal spacings to obtain the net width available for the grid cell. The net width is then divided by the number of grid rows in the container to obtain the width of the grid cell. The sum of all horizontal spacings is determined based on the number of grid columns and the grid column spacing of the container. The net height usable for the grid cell is obtained by subtracting the sum of all vertical spacings from the height of the container. The net height is then divided by the number of grid columns in the container to obtain the height of the grid cell. The sum of all vertical spacings is determined based on the number of grid rows and the grid row spacing of the container.

4. The method according to claim 3, characterized in that, Determining the grid configuration information of the container includes: determining the current aspect ratio of the container based on the container's size information, finding the first grid configuration information corresponding to the current aspect ratio of the container, and determining the found first grid configuration information as the grid configuration information of the container.

5. The method according to claim 3, characterized in that, The step of obtaining the grid cell size information based on the container size information further includes: The current breakpoint is determined based on the width of the container, and a breakpoint crossing is determined based on the current breakpoint and the previous breakpoint. If a breakpoint is crossed, the size information of the grid cell is recalculated using the second grid configuration information corresponding to the current breakpoint and the size information of the container. The container is then gridded based on the size information of the grid cell. The grid configuration information includes the number of grid rows, the number of grid columns, the grid row spacing, and the grid column spacing.

6. The method according to claim 1, characterized in that, The step of obtaining the grid cell size information based on the container's size information and then gridding the container based on the grid cell size information includes: When a change in the container size is detected, a timer is triggered to start; When the timer reaches the predetermined duration, the size information of the grid cell is obtained based on the most recently acquired size information of the container, and the container is gridded according to the size information of the grid cell.

7. The method according to claim 1, characterized in that, The step of obtaining the grid cell size information based on the container size information further includes: Determine whether the size information of the grid cell meets preset conditions, the preset conditions including that the size of the grid cell is less than or equal to a preset upper limit of cell size and greater than or equal to a preset lower limit of cell size; If the size information of the grid cell does not meet the preset condition, the size information of the grid cell is obtained again based on the size information of the container until the size information of the grid cell meets the preset condition.

8. A page layout device, characterized in that, include: A monitoring module is used to monitor changes in container size to obtain real-time container size information, including the container's width and height. A grid module is used to obtain the size information of grid cells based on the size information of the container, and to grid the container based on the size information of the grid cells, wherein the size information of the grid cells includes the width and height of the grid cells; A conversion module is used to determine the screen geometric properties of each component based on the grid layout information of each component within the container; The visualization module is used to perform visualization rendering based on the screen geometry properties of each component within the container to present each component on the current page.

9. An electronic device, characterized in that, include: A memory for storing one or more processors and programs, the programs comprising instructions that, when executed by the processor, cause the processor to perform the method as described in any one of claims 1 to 7.

10. A computer-readable storage medium storing a program, the program comprising instructions that, when executed by one or more processors of a computing device, cause the computing device to perform the method as claimed in any one of claims 1 to 7.

Images