Web page streaming layout method and device, electronic equipment and storage medium

Abstract

The invention relates to a web page streaming layout method and device, electronic equipment and a storage medium, and belongs to the technical field of page layers.The web page streaming layout method comprises the steps that the size of a layout container and the size of a plurality of layout elements are set based on a preset size value, the minimum size of the layout container is larger than or equal to the preset size value, and the size of the layout elements is larger than or equal to the preset size value; the size of the plurality of layout elements is an integral multiple of a preset size value, and the maximum size of the plurality of layout elements is smaller than or equal to the minimum size of the layout container; and performing web page streaming layout based on the layout container and the sizes of the plurality of layout elements. According to the method, while the development efficiency of the streaming layout of the web page is improved, the aesthetic degree of the page is ensured.

Description

Technical Field

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

[0002] The layout of the World Wide Web (web) refers to how to organize and arrange the structure and visual presentation of web page content in web design and development. It involves multiple aspects, and the flow layout mainly refers to how to typeset web page elements.

[0003] In the existing web flow layout, relative units are mainly used to define the size of elements, so that they can be automatically adjusted according to the size of the layout container where they are located, or arranged in sequence with a fixed width. Since the existing web flow layout uses relative units (such as percentages) to define the size of elements, it is necessary to pre-agree on the proportion of space occupied by each element in each row, indirectly solidifying the number of elements that can be presented in each row, and as the size of the layout container is adjusted, the elements themselves will be stretched or compressed.

[0004] The existing web flow layout scheme requires developers to specify the specific size of each element one by one, with low development efficiency. Moreover, if the size of the elements is set unreasonably, it is easy to cause a sense of vertical visual disorder of the layout elements, affecting the beauty of the page. Summary of the Invention

[0005] In view of this, it is necessary to provide a web page flow layout method, device, electronic device and storage medium to solve the problems of low development efficiency and poor page beauty of the existing web flow layout scheme.

[0006] To solve the above problems, the present invention provides a web page flow layout method, including: Setting the sizes of a layout container and a plurality of layout elements based on a preset size value, where the minimum size of the layout container is greater than or equal to the preset size value, the sizes of the plurality of layout elements are integer multiples of the preset size value, and the maximum size of the plurality of layout elements is less than or equal to the minimum size of the layout container; Performing a web page flow layout based on the sizes of the layout container and the plurality of layout elements.

[0007] In a possible implementation manner, the preset size value includes a preset horizontal size value and a preset vertical size value.

[0008] In a possible implementation manner, that the minimum size of the layout container is greater than or equal to the preset size value includes: The minimum horizontal size of the layout container is greater than or equal to the preset horizontal size value, and the minimum vertical size of the layout container is greater than or equal to the preset vertical size value; The sizes of the multiple layout elements are integer multiples of the preset size value, including: The horizontal sizes of the multiple layout elements are integer multiples of the preset horizontal size value, and the vertical sizes of the multiple layout elements are integer multiples of the preset vertical size value; The maximum sizes of the multiple layout elements are less than or equal to the minimum size of the layout container, including: The maximum horizontal size of the multiple layout elements is less than or equal to the minimum horizontal size of the layout container, and the maximum vertical size of the multiple layout elements is less than or equal to the minimum vertical size of the layout container.

[0009] In a possible implementation manner, the web page flow layout based on the sizes of the layout container and the multiple layout elements includes: Obtain the layout index of the multiple layout elements. The layout index is used to indicate the layout order of the layout elements. The smaller the layout index of a layout element, the higher the layout priority; Based on the layout index of the multiple layout elements, and the sizes of the layout container and the multiple layout elements, layout the multiple layout elements in the layout container.

[0010] In a possible implementation manner, the method further includes: Obtain the line break flag and exclusive line flag of the multiple layout elements. The line break flag is used to indicate whether a layout element is laid out with a line break, and the exclusive line flag is used to indicate whether a layout element is laid out on an exclusive line; Based on the layout index, line break flag and exclusive line flag of the multiple layout elements, and the sizes of the layout container and the multiple layout elements, layout the multiple layout elements in the layout container.

[0011] In a possible implementation manner, the layout of the multiple layout elements in the layout container based on the layout index, line break flag and exclusive line flag of the multiple layout elements, and the sizes of the layout container and the multiple layout elements includes: After laying out the first layout element in any row of the layout container, under the condition of satisfying at least one of the following conditions, perform a line break layout for the next layout element: The exclusive line flag of the first layout element in the current row is enabled; The exclusive line flag of the next layout element is enabled; The line break flag of the next layout element is enabled; The remaining horizontal size of the current row is smaller than the horizontal size of the next layout element.

[0012] In a possible implementation, the method further includes: After adjusting the size of the layout container, based on the layout indexes, line break flags, and exclusive line flags of the multiple layout elements, as well as the sizes of the multiple layout elements and the size of the adjusted layout container, re-layout the multiple layout elements in the adjusted layout container.

[0013] The present invention also provides a web page flow layout device, including: A setting module, configured to set the sizes of a layout container and multiple layout elements based on a preset size value, where the minimum size of the layout container is greater than or equal to the preset size value, the sizes of the multiple layout elements are integer multiples of the preset size value, and the maximum size of the multiple layout elements is less than or equal to the minimum size of the layout container; A layout module, configured to perform web page flow layout based on the sizes of the layout container and the multiple layout elements.

[0014] The present invention also provides an electronic device, including a memory and a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, the web page flow layout method as described above is implemented.

[0015] The present invention also provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the web page flow layout method as described above is implemented.

[0016] The beneficial effects of the present invention are as follows: The web page flow layout method, device, electronic device, and storage medium provided by the present invention complete the size setting of the layout container and multiple layout elements through a preset size value and corresponding setting conditions, reducing the complexity of size setting, thereby improving the development efficiency. At the same time, setting the sizes of layout elements according to the preset size value also ensures that the sizes of layout elements are not affected by the size adjustment of the layout container, thereby ensuring the aesthetic degree of the page. The present invention improves the development efficiency of web page flow layout while ensuring the aesthetic degree of the page. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] Figure 1 It is a schematic flowchart of an embodiment of the web page flow layout method provided by the present invention; Figure 2 It is a schematic diagram of an embodiment of the layout container setting provided by the present invention; Figure 3Schematic diagram of an embodiment of the adjusted layout container provided by the present invention; Figure 4 Schematic diagram of an embodiment of the flow layout effect provided by the present invention; Figure 5 Schematic diagram of an embodiment of the line break typesetting effect provided by the present invention; Figure 6 Schematic diagram of another embodiment of the line break typesetting effect provided by the present invention; Figure 7 Schematic diagram of the structure of an embodiment of the web page flow layout device provided by the present invention; Figure 8 Schematic diagram of the structure of an embodiment of the electronic device provided by the present invention. Detailed implementation manners

[0018] The preferred embodiments of the present invention will be specifically described below with reference to the accompanying drawings. The accompanying drawings form a part of this application and are used together with the embodiments of the present invention to explain the principles of the present invention, rather than to limit the scope of the present invention.

[0019] In the description of the present invention, the terms "first" and "second" are only used for descriptive purposes and cannot be understood as indicating or implying relative importance or implicitly specifying the quantity of the indicated technical features. Thus, the features defined with "first" and "second" may explicitly or implicitly include at least one of such features. In addition, the meaning of "a plurality" is at least two, such as two, three, etc., unless otherwise specifically defined.

[0020] In the description of the present invention, referring to "embodiment" means that the specific features, structures or characteristics described in combination with the embodiment may be included in at least one embodiment of the present invention. The appearance of this phrase at various positions in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment mutually exclusive with other embodiments. Those skilled in the art explicitly and implicitly understand that the described embodiments may be combined with other embodiments.

[0021] Web layout refers to how to organize and arrange the structure and visual presentation of web page content in web page design and development. It involves multiple aspects, and the flow layout mainly refers to how to typeset web page elements.

[0022] In the existing web flow layout, relative units are mainly used to define the size of elements, so that they can be automatically adjusted according to the size of the layout container where they are located, or they are arranged in sequence with a fixed width. Since the existing web flow layout uses relative units (such as percentages) to define the size of elements, it is necessary to pre-agree on the proportion of space occupied by each element in each row, indirectly solidifying the number of elements that can be presented in each row, and with the adjustment of the size of the layout container, the elements themselves will be stretched or compressed.

[0023] Existing web fluid layout solutions require developers to specify the specific sizes of elements one by one, resulting in low development efficiency. Moreover, if the element sizes are set unreasonably, it is very easy to cause a sense of vertical visual disorder in the layout elements, affecting the aesthetics of the page.

[0024] To solve the above problems, the present invention proposes a web page fluid layout method.

[0025] The following will separately elaborate on specific embodiments in detail: A specific embodiment of the present invention discloses a web page fluid layout method, in combination with Figure 1 to see, Figure 1 is a flowchart of an embodiment of the web page fluid layout method provided by the present invention, including step S101 and step S102, where: In step S101, set the sizes of the layout container and multiple layout elements based on a preset size value. The minimum size of the layout container is greater than or equal to the preset size value. The sizes of the multiple layout elements are integer multiples of the preset size value, and the maximum size of the multiple layout elements is less than or equal to the minimum size of the layout container; In step S102, perform web page fluid layout based on the sizes of the layout container and the multiple layout elements.

[0026] In the present invention, the layout container can be used to define the display range of the web interface. The web interface can be a web interface on a computer or a web interface on a mobile phone. The present invention does not make specific limitations on this. Layout elements are used to display content on the web interface. The specific content within the layout elements can be text, pictures, videos, etc. Generally, web fluid layout can be completed on the developer's terminal. The present invention can provide services related to web fluid layout, such as size setting and layout adjustment, for business personnel through a visual interface such as a program interface.

[0027] During implementation, it is first necessary to determine the preset size value. Generally, the preset size value can be determined according to the resolution of the display carrier of the web interface (such as a computer display screen or a mobile phone display screen). For example, for a display screen with a resolution of 96 Dots Per Inch (DPI), the preset size value can be set to 120 pixels (px).

[0028] After determining the preset size value, the sizes of the layout container and multiple layout elements can be set according to the preset size value. When setting, the following conditions need to be ensured: 1. The minimum size of the layout container is greater than or equal to the preset size value.

[0029] 2. The sizes of multiple layout elements are integer multiples of a preset size value.

[0030] 3. The maximum size of multiple layout elements is less than or equal to the minimum size of the layout container.

[0031] The above conditions are set to ensure the aesthetic degree of the page.

[0032] After completing the size settings of the layout container and multiple layout elements, the web page fluid layout can be performed according to the size of the layout container and the sizes of multiple layout elements.

[0033] Compared with the prior art, the web page fluid layout method provided in this embodiment completes the size settings of the layout container and multiple layout elements through a preset size value and corresponding setting conditions, reducing the complexity of size settings, thereby improving the development efficiency. At the same time, setting the sizes of layout elements according to the preset size value also ensures that the sizes of layout elements are not affected by the adjustment of the layout container size, thus ensuring the aesthetic degree of the page. The present invention improves the development efficiency of web page fluid layout while ensuring the aesthetic degree of the page.

[0034] Exemplarily, the preset size value includes a preset horizontal size value and a preset vertical size value.

[0035] Specifically, the preset size value may include a preset horizontal size value and a preset vertical size value. For example, for a display screen with a resolution of 96 DPI, the preset horizontal size value can be set to 240 px, and the preset vertical size value can be set to 120 px.

[0036] Exemplarily, the minimum size of the layout container being greater than or equal to the preset size value includes: The minimum horizontal size of the layout container is greater than or equal to the preset horizontal size value, and the minimum vertical size of the layout container is greater than or equal to the preset vertical size value; The sizes of multiple layout elements being integer multiples of the preset size value includes: The horizontal sizes of multiple layout elements are integer multiples of the preset horizontal size value, and the vertical sizes of multiple layout elements are integer multiples of the preset vertical size value; The maximum size of multiple layout elements being less than or equal to the minimum size of the layout container includes: The maximum horizontal size of multiple layout elements is less than or equal to the minimum horizontal size of the layout container, and the maximum vertical size of multiple layout elements is less than or equal to the minimum vertical size of the layout container.

[0037] Specifically, in the size setting condition, the minimum size of the layout container is greater than or equal to a preset size value, which means that the minimum horizontal size of the layout container is greater than or equal to the preset horizontal size value, and the minimum vertical size of the layout container is greater than or equal to the preset vertical size value.

[0038] The sizes of multiple layout elements are integer multiples of the preset size value, which means that the horizontal sizes of multiple layout elements are integer multiples of the preset horizontal size value, and the vertical sizes of multiple layout elements are integer multiples of the preset vertical size value.

[0039] The maximum size of multiple layout elements is less than or equal to the minimum size of the layout container, which means that the maximum horizontal size of multiple layout elements is less than or equal to the minimum horizontal size of the layout container, and the maximum vertical size of multiple layout elements is less than or equal to the minimum vertical size of the layout container.

[0040] Exemplarily, the web page fluid layout based on the sizes of the layout container and the multiple layout elements includes: Obtain the layout index of the multiple layout elements. The layout index is used to indicate the layout order of the layout elements. The smaller the layout index of a layout element, the higher its layout priority; Based on the layout index of the multiple layout elements, and the sizes of the layout container and the multiple layout elements, layout the multiple layout elements in the layout container.

[0041] Specifically, when performing web page fluid layout according to the sizes of the layout container and multiple layout elements, the layout index of the multiple layout elements can be obtained first. The layout index can be used to indicate the layout order of the layout elements. The layout index can be set in the layout configuration item. The smaller the layout index of a layout element, the higher its layout priority. The layout index of each layout element can be set according to the requirement i.

[0042] After obtaining the layout index of the multiple layout elements, the multiple layout elements can be laid out in the layout container in the order of the layout index according to the layout index of the multiple layout elements, and the sizes of the layout container and the multiple layout elements.

[0043] Exemplarily, the method further includes: Obtain the line break flag and exclusive line flag of the multiple layout elements. The line break flag is used to indicate whether the layout element is laid out with a line break, and the exclusive line flag is used to indicate whether the layout element is laid out on an exclusive line; Based on the layout index, line break flag and exclusive line flag of the multiple layout elements, and the sizes of the layout container and the multiple layout elements, layout the multiple layout elements in the layout container.

[0044] Specifically, when performing a web page flow layout, the line break flag and the exclusive line flag of multiple layout elements can also be obtained. The line break flag can be used to indicate whether a layout element is laid out with a line break, and the exclusive line flag can be used to indicate whether a layout element is laid out on an exclusive line. The line break flag and the exclusive line flag can be represented by independent bit positions. For example, 1 can be used to indicate the enabling of the flag, and 0 can be used to indicate the disabling of the flag.

[0045] Then, according to the layout indexes, line break flags, and exclusive line flags of the multiple layout elements, as well as the sizes of the layout container and the multiple layout elements, the multiple layout elements are laid out in the layout container.

[0046] Exemplarily, laying out the multiple layout elements in the layout container based on the layout indexes, line break flags, and exclusive line flags of the multiple layout elements, as well as the sizes of the layout container and the multiple layout elements, includes: After laying out the first layout element in any row of the layout container, under the condition that at least one of the following conditions is met, the next layout element is laid out with a line break: The exclusive line flag of the first layout element in the current row is enabled; The exclusive line flag of the next layout element is enabled; The line break flag of the next layout element is enabled; The remaining horizontal size of the current row is less than the horizontal size of the next layout element.

[0047] Specifically, when laying out the multiple layout elements in the layout container according to the layout indexes, line break flags, and exclusive line flags of the multiple layout elements, as well as the sizes of the layout container and the multiple layout elements, after laying out the first layout element in a certain row of the layout container, if at least one of the following conditions is met, the next layout element can be laid out with a line break: 1. The exclusive line flag of the first layout element in the current row is enabled.

[0048] 2. The exclusive line flag of the next layout element is enabled.

[0049] 3. The line break flag of the next layout element is enabled.

[0050] 4. The remaining horizontal size of the current row is less than the horizontal size of the next layout element.

[0051] When the above conditions are not met, the next layout element is directly laid out on the current line. Similarly, if subsequent layout on the current line is still required, it is still possible to determine whether to perform line break layout of the layout element according to the above conditions. Through the setting of the above conditions, the present invention allows a layout element to perform line break layout, and can also ensure that when the size of the container is adjusted, the positions of some layout elements that need to perform line break layout or occupy a single line do not change.

[0052] Exemplarily, the method further includes: After adjusting the size of the layout container, based on the layout indexes, line break flags, and exclusive line flags of the plurality of layout elements, as well as the sizes of the plurality of layout elements and the size of the adjusted layout container, the plurality of layout elements are re-laid out in the adjusted layout container.

[0053] Specifically, after adjusting the size of the layout container, it is still possible to re-layout the plurality of layout elements in the adjusted layout container according to the above conditions, based on the layout indexes, line break flags, and exclusive line flags of the plurality of layout elements, as well as the sizes of the plurality of layout elements and the size of the adjusted layout container.

[0054] The following combines a specific embodiment to better illustrate the technical solution of the present invention: Combined with Figure 2 to see, Figure 2 is a schematic diagram of an embodiment of the layout container provided by the present invention. At this time, the preset horizontal size value is 240px, and the layout container can be rasterized according to the preset horizontal size value. When the layout container is reduced, combined with Figure 3 to see, Figure 3 is a schematic diagram of an embodiment of the adjusted layout container provided by the present invention. It is still possible to rasterize the layout container according to the preset horizontal size value. Whether the layout container becomes larger or smaller, only the number of elements that can be typeset in each row changes, and the size of a single layout space does not change.

[0055] Combined with Figure 4 to see, Figure 4 is a schematic diagram of an embodiment of the flow layout effect provided by the present invention. For layout elements that do not occupy an entire row exclusively, if the remaining space on the current row can complete the layout of the layout element, the layout element can be directly laid out on the current row. For layout elements that occupy an entire row exclusively, the layout element is directly laid out on the next row.

[0056] Combined with Figure 5 to see, Figure 5Schematic diagram of an embodiment of the line break layout effect provided by the present invention. For elements that require line break layout, even if the remaining space in the current line can complete the layout of the layout element, the layout element needs to be laid out in a new line.

[0057] Combined with Figure 6 it can be seen that Figure 6 Schematic diagram of another embodiment of the line break layout effect provided by the present invention. For layout elements that do not occupy an entire line exclusively, if the remaining space in the current line cannot complete the layout of the layout element, the layout element needs to be laid out in the next line.

[0058] When the size of the layout container changes, the present invention visually ensures that the size of the layout elements does not change, and also ensures that the positions of some layout elements that require line break layout are fixed and do not change, thus ensuring the beauty of the page.

[0059] The embodiment of the present invention also provides a web page fluid layout device. Combined with Figure 7 it can be seen that Figure 7 Schematic diagram of the structure of an embodiment of the web page fluid layout device provided by the present invention. The web page fluid layout device 700 includes: A setting module 701, configured to set the sizes of the layout container and multiple layout elements based on a preset size value. The minimum size of the layout container is greater than or equal to the preset size value. The sizes of the multiple layout elements are integer multiples of the preset size value, and the maximum size of the multiple layout elements is less than or equal to the minimum size of the layout container; A layout module 702, configured to perform web page fluid layout based on the sizes of the layout container and the multiple layout elements.

[0060] For the specific implementation manners of the various modules of the web page fluid layout device, reference can be made to the description of the above web page fluid layout method, and they have similar beneficial effects, which will not be elaborated here.

[0061] The embodiment of the present invention also provides an electronic device. Combined with Figure 8 it can be seen that Figure 8 Schematic diagram of the structure of an embodiment of the electronic device provided by the present invention. The electronic device 800 includes a processor 801, a memory 802, and a computer program stored on the memory 802 and executable on the processor 801. When the processor 801 executes the program, the above-mentioned web page fluid layout method is implemented.

[0062] As a preferred embodiment, the above-mentioned electronic device 800 further includes a display 803, configured to display the processor 801 executing the above-mentioned web page fluid layout method.

[0063] Exemplarily, a computer program may be divided into one or more modules / units, and one or more modules / units are stored in the memory 802 and executed by the processor 801 to implement the present invention. One or more modules / units may be a series of computer program instruction segments capable of performing specific functions, and the instruction segments are used to describe the execution process of the computer program in the electronic device 800. For example, the computer program may be divided into the setting module 701 and the layout module 702 in the foregoing embodiments, and the specific functions of each module are as described above and will not be elaborated herein one by one.

[0064] The electronic device 800 may be a desktop computer, a notebook, a palm computer, a smart phone, or other devices with an adjustable camera module.

[0065] Among them, the processor 801 may be an integrated circuit chip with signal processing capabilities. The foregoing processor 801 may be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it may also be a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components. It can implement or execute the various methods, steps, and logic block diagrams disclosed in the embodiments of the present invention. The general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0066] Among them, the memory 802 may be, but is not limited to, a random access memory (RAM), a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), etc. Among them, the memory 802 is used to store a program, and after receiving an execution instruction, the processor 801 executes the program. The method defined by the process disclosed in any of the foregoing embodiments of the present invention may be applied to the processor 801 or implemented by the processor 801.

[0067] Among them, the display 803 can be an LCD display screen or an LED display screen. For example, the display screen on a mobile phone.

[0068] It can be understood that Figure 8 The structure shown is only a schematic structural diagram of the electronic device 800, and the electronic device 800 may also include more or fewer components than those shown. Figure 8 than those shown. Figure 8 Each component shown in can be implemented by hardware, software, or a combination thereof.

[0069] The electronic device provided according to the above embodiments of the present invention can be implemented with reference to the content specifically described in the web page fluid layout method implemented according to the present invention, and has beneficial effects similar to those of the web page fluid layout method described above, which will not be elaborated here.

[0070] The embodiments of the present invention also provide a computer-readable storage medium, on which a computer program is stored. When the program is executed by a processor, the web page fluid layout method described above is implemented.

[0071] Generally speaking, the computer instructions for implementing the method of the present invention can be carried by any combination of one or more computer-readable storage media. A non-transitory computer-readable storage medium can include any computer-readable medium except the signal itself in transient propagation.

[0072] The 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 (non-exhaustive list) of the computer-readable storage medium include: 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 this document, 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.

[0073] Computer program code for performing the operations of the present invention may be written in one or more programming languages or combinations thereof. The programming languages include 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. In particular, the Python language suitable for neural network computing and platform frameworks based on TensorFlow, PyTorch, etc. can be used. The program code can be executed entirely on the user's computer, partially on the user's computer, executed as an independent 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 it can be connected to an external computer (e.g., connected through the Internet using an Internet service provider).

[0074] Those skilled in the art can understand that all or part of the process of implementing the method of the above embodiments can be completed by instructing relevant hardware through a computer program, and the program can be stored in a computer-readable storage medium. Among them, the computer-readable storage medium is a disk, an optical disk, a read-only memory, or a random access memory, etc.

[0075] The present invention discloses a method, device, electronic device, and storage medium for web page fluid layout. By presetting size values and corresponding setting conditions, the size settings of layout containers and multiple layout elements are completed, reducing the complexity of size settings, thereby improving development efficiency. At the same time, setting the sizes of layout elements according to the preset size values also ensures that the sizes of layout elements are not affected by the adjustment of the layout container size, thus ensuring the aesthetic degree of the page. The present invention improves the development efficiency of web page fluid layout while ensuring the aesthetic degree of the page.

[0076] As mentioned above, the above are only the preferred specific embodiments of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily thought of by those skilled in the art within the technical scope disclosed by the present invention should be covered by the protection scope of the present invention.

Claims

1. A web page flow layout method, characterized in that: include: The sizes of the layout container and the multiple layout elements are set based on a preset size value, wherein the minimum size of the layout container is greater than or equal to the preset size value, the sizes of the multiple layout elements are integer multiples of the preset size value, and the maximum size of the multiple layout elements is less than or equal to the minimum size of the layout container; Based on the sizes of the layout container and the multiple layout elements, a web page flow layout is performed.

2. The web page flow layout method according to claim 1, characterized in that: The preset size value includes a preset horizontal size value and a preset vertical size value.

3. The web page flow layout method according to claim 2, characterized in that: The minimum size of the layout container is greater than or equal to a preset size value, including: The minimum horizontal dimension of the layout container is greater than or equal to the preset horizontal dimension value, and the minimum vertical dimension of the layout container is greater than or equal to the preset vertical dimension value; The sizes of the plurality of layout elements are integer multiples of preset size values, including: The horizontal dimensions of the plurality of layout elements are integer multiples of the preset horizontal dimension value, and the vertical dimensions of the plurality of layout elements are integer multiples of the preset vertical dimension value; The maximum size of the plurality of layout elements is less than or equal to the minimum size of the layout container, including: The maximum horizontal size of the multiple layout elements is smaller than or equal to the minimum horizontal size of the layout container, and the maximum vertical size of the multiple layout elements is smaller than or equal to the minimum vertical size of the layout container.

4. The web page flow layout method according to claim 3, characterized in that: The performing web page flow layout based on the size of the layout container and the multiple layout elements includes: Obtaining layout indexes of the multiple layout elements, where the layout index is used to indicate a layout order of the layout elements, and a layout element with a smaller layout index has a higher priority in layout order; The plurality of layout elements are laid out in the layout container based on the layout indexes of the plurality of layout elements and the sizes of the layout container and the plurality of layout elements.

5. The web page flow layout method according to claim 4, characterized in that: The method further comprises: Acquire line break flags and exclusive line flags of the multiple layout elements, wherein the line break flag is used to indicate whether the layout element is laid out in a line break, and the exclusive line flag is used to indicate whether the layout element occupies an exclusive line of layout; The plurality of layout elements are laid out in the layout container based on layout indexes, line break flags and exclusive line flags of the plurality of layout elements, and sizes of the layout container and the plurality of layout elements.

6. The web page flow layout method according to claim 5, characterized in that: The step of laying out the multiple layout elements in the layout container based on the layout indexes, line break flags and exclusive line flags of the multiple layout elements, and the sizes of the layout container and the multiple layout elements, comprises: After the first layout element is laid out in any row of the layout container, the next layout element is laid out in a new line if at least one of the following conditions is met: The exclusive row flag of the first layout element in the current row is enabled; The exclusive row flag of the next layout element is enabled; The line break flag of the next layout element is enabled; The remaining horizontal size of the current row is smaller than the horizontal size of the next layout element.

7. The web page flow layout method according to claim 6, characterized in that: The method further comprises: After adjusting the size of the layout container, the multiple layout elements are re-layed out in the adjusted layout container based on the layout indexes, line break flags and exclusive line flags of the multiple layout elements, the sizes of the multiple layout elements and the adjusted size of the layout container.

8. A web page flow layout device, characterized in that: include: a setting module, configured to set the sizes of a layout container and a plurality of layout elements based on a preset size value, wherein the minimum size of the layout container is greater than or equal to the preset size value, the sizes of the plurality of layout elements are integer multiples of the preset size value, and the maximum size of the plurality of layout elements is less than or equal to the minimum size of the layout container; The layout module is used to perform web page flow layout based on the size of the layout container and the multiple layout elements.

9. An electronic device, characterized in that: The invention comprises a memory and a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the program, the web page flow layout method according to any one of claims 1 to 7 is implemented.

10. A computer-readable storage medium, characterized in that: A computer program is stored thereon, and when the computer program is executed by a processor, the web page flow layout method according to any one of claims 1 to 7 is implemented.

Images