Webpage grid layout method and device

Abstract

The invention discloses a web page grid layout method and device, and the method comprises the steps: executing a component installation instruction to install a pre-constructed grid layout component on an initial blank web page, and setting a slot to obtain a first web page; performing user-defined content configuration on the first webpage by utilizing the slot and the grid layout component to obtain a second webpage; determining the total to-be-configured grid number of the second webpage; and performing row and column rendering on the two webpages by using the total grid number to obtain a target webpage, and displaying the target webpage on a user client. According to the method, the grid layout component is constructed in advance, the component is installed on the initial blank page on which the grid layout is to be carried out, the slot can be arranged, the user-defined content configuration of the first webpage can be realized by utilizing the slot and the component, the configuration is not limited to a single configuration mode or content, and the total number of grids which are to be laid out can be determined, so that the user-defined content configuration of the first webpage can be realized. And row and column rendering is performed by using the total grid number, so that the layout process is more flexible, and various different configuration requirements under the grid layout are met.

Description

Technical Field

[0001] The present application relates to the technical field of web page grid layout, and in particular to a web page grid layout method and device. Background Art

[0002] In the field of web design and development, efficient layout methods are crucial to improving user experience and achieving effective communication of information. Grid layout of web pages, as an advanced layout concept, is gradually becoming one of the core technologies of web design. It can divide web pages into rows and columns through grid layout to divide web pages into multiple independent areas, making the layout of web pages regular and beautiful.

[0003] However, the current grid layout method for web pages is relatively simple, not flexible enough, and cannot meet a variety of different needs. Summary of the invention

[0004] In view of this, the present application provides a web page grid layout method and device, which are used to solve the problem that the current method of grid layout of web pages is relatively single, not flexible enough, and cannot meet a variety of different needs.

[0005] To achieve the above objectives, the proposed solution is as follows:

[0006] In a first aspect, a grid layout method for a web page includes:

[0007] Execute the component installation instruction to install the pre-built grid layout component on the initial blank web page and set the slot to obtain the first web page;

[0008] Using the slot and the grid layout component to perform custom content configuration on the first webpage to obtain a second webpage;

[0009] Determining the total number of grids to be configured on the second webpage;

[0010] The two web pages are rendered in rows and columns using the total number of grids to obtain a target web page, and the target web page is displayed on a user client.

[0011] Preferably, the construction process of the grid layout component includes:

[0012] Set up component structure;

[0013] Define multiple component properties, including: total grid width property, total grid number property, number of columns per row property, column spacing property, row spacing property, and alignment property;

[0014] A grid layout component is constructed using the component structure and each of the component attributes.

[0015] Preferably, the using the slot and the grid layout component to perform custom content configuration on the first webpage to obtain the second webpage includes:

[0016] Obtaining the properties of each component of the grid layout component and the grid layout requirements of the user;

[0017] According to the grid layout requirement, using each of the component attributes to perform a first configuration operation on the first webpage;

[0018] After the first configuration operation, obtain the custom style provided by the slot;

[0019] A second configuration operation is performed on the custom style according to the grid layout requirement to obtain a second webpage.

[0020] Preferably, the using the total number of grids to render the two web pages in rows and columns to obtain a target web page includes:

[0021] Get the user's grid layout requirements;

[0022] Extracting a value of each row and column corresponding to a parameter of the number of each row and column from the grid layout requirement;

[0023] Divide the total number of grids by the value of each row and column to obtain a first calculated value;

[0024] Rounding up the first calculated value to obtain a target number of rows;

[0025] Determine the number of columns corresponding to each target row;

[0026] According to the target row number and the number of columns corresponding to each target row, the second web page is rendered in rows and columns to obtain a target web page.

[0027] Preferably, determining the number of columns corresponding to each target row includes:

[0028] Traversing each of the target rows, and determining whether the currently traversed target row is the last row of the second web page;

[0029] If not, then determine that the number of columns corresponding to the target row currently traversed is the per-row column value;

[0030] If so, divide the total number of grids by the value of each row and column, and use the remainder as the number of columns of the target row currently traversed.

[0031] Preferably, the method further includes performing unit adaptation conversion on each component attribute of the grid layout component, including:

[0032] Setting a default viewport width, and overlaying the default viewport width on the target webpage using a preset overlay object;

[0033] Constructing a viewport width function and obtaining the pixel value of the target web page;

[0034] Using the pixel value as an input value of the viewport width function, so that the viewport width function outputs a first calculation result;

[0035] The first calculation result is used to perform unit adaptation conversion on each component attribute of the grid layout component.

[0036] Preferably, the calculation process of the viewport width function includes:

[0037] Determining whether the pixel value belongs to a preset valid value;

[0038] If yes, the pixel value is parsed to obtain a first floating point number;

[0039] Multiplying the first floating point number by a first preset value, and dividing the result by the default viewport width to obtain a viewport width value;

[0040] Determine whether the viewport width value is a second preset value;

[0041] If yes, taking the second preset value as the first calculation result;

[0042] If not, precision processing is performed on the viewport width value, and a viewport width unit is added to obtain a first calculation result.

[0043] Preferably, the method further includes performing unit adaptation conversion on each component attribute of the grid layout component, including:

[0044] Setting a default root element font size, and overlaying the default root element font size on the target web page using a preset overlay object;

[0045] Constructing a root element font function and obtaining a pixel value of the target web page;

[0046] Using the pixel value as an input value of the root element font function, so that the root element font function outputs a second calculation result;

[0047] The second calculation result is used to perform unit adaptation conversion on each component attribute of the grid layout component.

[0048] Preferably, the calculation process of the root element font function includes:

[0049] Determining whether the pixel value belongs to a preset valid value;

[0050] If yes, the pixel value is parsed to obtain a second floating point number;

[0051] Divide the second floating point number by the default root element font size to obtain a font size value;

[0052] Determining whether the font size value is a second preset value;

[0053] If yes, taking the second preset value as the second calculation result;

[0054] If not, precision processing is performed on the font size value, and a font size unit is added to obtain a second calculation result.

[0055] In a second aspect, a web page grid layout device includes:

[0056] A first webpage obtaining module is used to execute a component installation instruction to install a pre-built grid layout component on an initial blank webpage and set a slot to obtain a first webpage;

[0057] A second webpage obtaining module, configured to perform customized content configuration on the first webpage using the slot and the grid layout component to obtain a second webpage;

[0058] A total grid number determination module, used to determine the total grid number to be configured on the second webpage;

[0059] The row and column rendering module is used to perform row and column rendering on the two web pages using the total number of grids to obtain a target web page, and display the target web page on the user client.

[0060] It can be seen from the above technical solution that the present application first executes the component installation instruction to install the pre-built grid layout component on the initial blank web page, and sets the slot to obtain the first web page; uses the slot and the grid layout component to configure the first web page with customized content to obtain the second web page; determines the total number of grids to be configured for the second web page; uses the total number of grids to render the two web pages in rows and columns to obtain the target web page, and displays the target web page on the user client. The present application pre-builds a grid layout component, and installs the component on the initial blank page where you want to perform grid layout. You can then set the slot, and use the slot and the component to implement customized content configuration for the first web page, which is not limited to a single configuration method or content. You can also determine the total number of grids you want to layout, and use the total number of grids to render rows and columns, making the layout process more flexible and meeting a variety of different configuration requirements under the grid layout. BRIEF DESCRIPTION OF THE DRAWINGS

[0061] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying creative work.

[0062] Figure 1 An optional flow chart of a web page grid layout method provided in an embodiment of the present application;

[0063] Figure 2 A schematic diagram of the structure of a grid layout component provided in an embodiment of the present application;

[0064] Figure 3~Figure 5 A schematic diagram of the grid distribution of a web page after row and column rendering provided by an embodiment of the present application;

[0065] Figure 6 A schematic diagram of the structure of a web page grid layout device provided in an embodiment of the present application;

[0066] Figure 7 A schematic diagram of the structure of a web page grid layout device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0067] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0068] The present invention can be used in many general or special computing device environments or configurations, such as personal computers, server computers, handheld or portable devices, tablet devices, multi-processor devices, distributed computing environments including any of the above devices or devices, etc.

[0069] The embodiment of the present invention provides a grid layout method for a web page. The method can be applied to various computer terminals or smart terminals. The execution subject can be a processor or a server of the computer terminal or the smart terminal. The method flow chart of the method is as follows: Figure 1 As shown, specifically including:

[0070] S1: Execute component installation instructions to install a pre-built grid layout component on an initial blank web page and set a slot to obtain a first web page.

[0071] Specifically, the process of building a grid layout component can be roughly divided into the following steps:

[0072] Determine the requirements and functions, that is, determine the role of the component in the application. This application is to perform a grid layout of the web page, so it can be determined that the role of the component is to implement custom configuration of the web page; in addition, it is necessary to define the component interface and determine the component's input and output, such as which properties are received and which events are triggered.

[0073] Choosing technology and framework means choosing the corresponding front-end framework or library based on user needs and technology stack, so that the built components can be more efficient in application.

[0074] Create the component structure, that is, use some programming language to create the logical part of the component, and also define the appearance of the component.

[0075] Add style and layout, that is, define information such as color, font, size, etc.

[0076] Finally, implement the component logic according to the content, attributes, style and other information set in the above steps.

[0077] The grid layout component constructed in this application can be applied to any web page that needs to be laid out. First, define the component installation instruction, such as "npm i @aaaaa / web-utils", and then execute the component installation instruction on the initial blank page. We name the component ABC, then we can use import { MinisoGrid} from '@miniso / web-utils' to install the component and introduce it to the initial blank page.

[0078] In addition, slots need to be set up, which can also realize the configuration and layout of the initial blank web page.

[0079] S2: Using the slot and the grid layout component to perform custom content configuration on the first webpage to obtain a second webpage.

[0080] Slot is a mechanism for passing content in a component. It can render a grid. In this application, slot and grid layout components are combined and applied on the first web page. The following slot properties can be provided for developers to configure custom styles:

[0081] index: The index of the current item.

[0082] itemWidth: The calculated width of each item.

[0083] This can improve flexibility and enhance the developer experience.

[0084] In this step, the needs and requirements of the developer may also be obtained, and the first webpage may be customized in accordance with the needs and requirements of the user by using the slot and grid layout components to obtain the second webpage.

[0085] S3: Determine the total number of grids to be configured on the second webpage.

[0086] The total number of grids is the number of all grids that are to be laid out on the second web page, and can also be determined based on user needs.

[0087] S4: Rendering the two web pages in rows and columns using the total number of grids to obtain a target web page, and displaying the target web page on the user client.

[0088] Rendering the second web page in rows and columns using the total number of grids means laying out each grid on the second web page and displaying the content of the grid at the same time. The grid may contain information such as pictures and texts, and the target web page thus obtained is finally displayed on the user client.

[0089] It can be seen from the above technical solution that the present application first executes the component installation instruction to install the pre-built grid layout component on the initial blank web page, and sets the slot to obtain the first web page; uses the slot and the grid layout component to configure the first web page with customized content to obtain the second web page; determines the total number of grids to be configured for the second web page; uses the total number of grids to render the two web pages in rows and columns to obtain the target web page, and displays the target web page on the user client. The present application pre-builds a grid layout component, and installs the component on the initial blank page where you want to perform grid layout. You can then set the slot, and use the slot and the component to implement customized content configuration for the first web page, which is not limited to a single configuration method or content. You can also determine the total number of grids you want to layout, and use the total number of grids to render rows and columns, making the layout process more flexible and meeting a variety of different configuration requirements under the grid layout.

[0090] In the method provided in the embodiment of the present invention, the construction process of the grid layout component is specifically described as follows:

[0091] Set up component structure;

[0092] Define multiple component properties, including: total grid width property, total grid number property, number of columns per row property, column spacing property, row spacing property, and alignment property;

[0093] A grid layout component is constructed using the component structure and each of the component attributes.

[0094] Specifically, in one example, Figure 2As shown in the figure, this is a component structure diagram, which defines multiple component properties, including the total grid width property width, the total grid number property length, the number of columns per row property column, the column spacing property columnGap, the row spacing property rowGap, and the alignment property align. After the definition is completed, the grid layout component is constructed according to the component structure and each component property.

[0095] Furthermore, the example also specifically sets the attribute value of each attribute, width: 600px, length: 8, column: 3, columnGap: 10px, rowGap: 20px, align: left. Among them, align: left means that the attribute value of the alignment attribute is left alignment, and it can also be set to right alignment and center alignment.

[0096] Configuring properties for the grid layout component can dynamically adjust the number of columns, spacing and other property values ​​to meet different layout requirements. Developers or users only need to set a few basic component properties to achieve complex grid layouts. In addition, the component is not limited to installation methods and destinations, can be used independently, reduce project dependencies, do not rely on large UI libraries, and has strong compatibility.

[0097] The following is an explanation of the process of using the slot and the grid layout component to configure the first web page with customized content to obtain the second web page in the present application.

[0098] Obtaining the properties of each component of the grid layout component and the grid layout requirements of the user;

[0099] According to the grid layout requirement, using each of the component attributes to perform a first configuration operation on the first webpage;

[0100] After the first configuration operation, obtain the custom style provided by the slot;

[0101] A second configuration operation is performed on the custom style according to the grid layout requirement to obtain a second webpage.

[0102] Specifically, this step is to use the slot and grid layout components to customize the content configuration of the first web page, which requires obtaining the component attributes of the grid layout component. The component attributes can be defined by the user according to his or her own needs. Therefore, it is also necessary to obtain the user's grid layout requirements and set the attribute value of each component attribute according to the user's requirements. It should be noted that the user's grid layout requirements may set the attribute values ​​of all component attributes, or may only set the attribute values ​​of some of the attributes. Therefore, it is necessary to implement the first configuration operation on the first web page according to one or more attribute values ​​set by the user. Since the slot can also realize the configuration and layout of the initial blank web page, the custom style it provides also needs to be set by the user. Therefore, the second configuration operation is performed on the custom style according to the user's grid layout requirements to obtain the second web page.

[0103] It should be noted that the grid layout process for the web page is not yet completed at this time, and the final row and column rendering is required before the web page can be displayed on the user client. Therefore, after obtaining the second web page, it is necessary to use the total number of grids to perform row and column rendering on the second web page to obtain the final target web page, which specifically includes the following steps:

[0104] Get the user's grid layout requirements;

[0105] Extracting a value of each row and column corresponding to a parameter of the number of each row and column from the grid layout requirement;

[0106] Divide the total number of grids by the value of each row and column to obtain a first calculated value;

[0107] Rounding up the first calculated value to obtain a target number of rows;

[0108] Determine the number of columns corresponding to each target row;

[0109] According to the target row number and the number of columns corresponding to each target row, the second web page is rendered in rows and columns to obtain a target web page.

[0110] The process of determining the number of columns corresponding to each target row includes:

[0111] Traversing each of the target rows, and determining whether the currently traversed target row is the last row of the second web page;

[0112] If not, then determine that the number of columns corresponding to the target row currently traversed is the per-row column value;

[0113] If so, divide the total number of grids by the value of each row and column, and use the remainder as the number of columns of the target row currently traversed.

[0114] In the above scheme, the total number of grids is also extracted from the user's grid layout configuration. Because the total number of grids may be an even number or an odd number, without considering the alignment attribute, there are many possibilities for the target web page after rendering, such as Figure 3 , Figure 4 and Figure 5 As shown, the property values ​​of the alignment attributes are also crucial.

[0115] In addition, when rendering rows and columns, since all grids need to be rendered in the second web page, the number of rows, the number of columns in each row, the row spacing, and the column spacing also need to be determined, and the second web page is accurately laid out based on these values. Among them, the attribute values ​​of each component are determined from the user's grid layout requirements, and then calculated. The outer loop (row loop) is performed first:

[0116] The total number of grids is divided by the value of each row and column to obtain the first calculated value. Considering that there may be remainders in the first calculated value, the first calculated value is rounded up, and the obtained value is the target number of rows. In other words, the final number of rows of the target web page has been determined.

[0117] Next, continue to determine the number of columns corresponding to each row. Perform an inner loop (column loop) inside each target row. The number of loops is the attribute value of the component attribute column, so as to establish the columns of each target row. When traversing each target row, it is necessary to determine whether it is the last target row. If so, divide the total number of grids by the value of each row and column, and use the remainder as the number of columns of the last target row. If it is not the last target row, the attribute value of the component attribute column is the column value of the target row, thereby completing row and column rendering.

[0118] Furthermore, the following formula can be used to calculate the number of rows:

[0119] row = Math.ceil(length / column);

[0120] It is also possible to calculate the width of a single grid:

[0121] itemWidth = (width - (column - 1) * columnGap) / column.

[0122] Furthermore, after obtaining the target page, since component attributes such as width, columnGap, and rowGap use px (pixels) as the unit by default, rather than relative units such as rem (length) and vw (viewport width), considering the adaptation of the target page on different mobile terminals, this application also provides a method for unit adaptation conversion of component attributes, which is divided into the following two types:

[0123] 1. Convert px to vw.

[0124] Setting a default viewport width, and overlaying the default viewport width on the target webpage using a preset overlay object;

[0125] Constructing a viewport width function and obtaining the pixel value of the target web page;

[0126] Using the pixel value as an input value of the viewport width function, so that the viewport width function outputs a first calculation result;

[0127] The first calculation result is used to perform unit adaptation conversion on each component attribute of the grid layout component.

[0128] The calculation process of the viewport width function includes:

[0129] Determining whether the pixel value belongs to a preset valid value;

[0130] If yes, the pixel value is parsed to obtain a first floating point number;

[0131] Multiplying the first floating point number by a first preset value, and dividing the result by the default viewport width to obtain a viewport width value;

[0132] Determine whether the viewport width value is a second preset value;

[0133] If yes, taking the second preset value as the first calculation result;

[0134] If not, precision processing is performed on the viewport width value, and a viewport width unit is added to obtain a first calculation result.

[0135] Specifically, you can use the genPxToVwFn method to generate a conversion function, and then mount the conversion function to window.__webuiConfig__ in the corresponding project entry file. Then the grid layout component will automatically use the conversion function to perform unit adaptation conversion. For example, in an example:

[0136] The default viewport width is 750 pixels. Users can override the default viewport width by passing in the preset override object `options` and constructing a viewport width function. This function is the above conversion function. The pixel value of the target web page is obtained as the parameter of the viewport width function, and then the calculation is performed to obtain the first calculation result. The unit adaptation conversion can be performed according to the first calculation result. It has the following definition:

[0137] If the pixel value belongs to the preset valid value (this application defines the valid value as any value except 0, undefined and null), the pixel value is parsed to obtain the first floating point number, the first floating point number is multiplied by the first preset value, and then divided by the default viewport width to obtain the viewport width value, and the second preset value is defined as 0. The viewport width value obtained here may be 0. If it is 0, the first calculation result is 0 and the conversion fails. If the obtained viewport width value is not 0, it needs to be rounded to the specified number of decimal places, that is, its precision is adjusted, such as rounding to 2 decimal places, and then adding the viewport width unit vw, to obtain the first calculation result after the adaptation conversion is completed.

[0138] In addition, if the pixel value is not a valid value, that is, it is 0, undefined or null, the second preset value is used as the first calculation result and the conversion fails.

[0139] This converts fixed pixel values ​​into percentage values ​​relative to the viewport width, so that elements on the target page can be scaled appropriately according to the screen width of different devices.

[0140] 2. Convert px to rem.

[0141] Setting a default root element font size, and overlaying the default root element font size on the target web page using a preset overlay object;

[0142] Constructing a root element font function and obtaining a pixel value of the target web page;

[0143] Using the pixel value as an input value of the root element font function, so that the root element font function outputs a second calculation result;

[0144] The second calculation result is used to perform unit adaptation conversion on each component attribute of the grid layout component.

[0145] The calculation process of the root element font function includes:

[0146] Determining whether the pixel value belongs to a preset valid value;

[0147] If yes, the pixel value is parsed to obtain a second floating point number;

[0148] Divide the second floating point number by the default root element font size to obtain a font size value;

[0149] Determining whether the font size value is a second preset value;

[0150] If yes, taking the second preset value as the second calculation result;

[0151] If not, precision processing is performed on the font size value, and a font size unit is added to obtain a second calculation result.

[0152] Specifically, the rem value is calculated relative to the font size of the root element. Similar to the above conversion to viewport width units, a conversion function is generated and mounted using the genPxToRemFn method. In an example:

[0153] The default root element font size is 75 pixels, and it is overwritten, where the conversion function is the root element font function, and the pixel value of the target page is obtained as the parameter of the root element font function, and then the calculation is performed to obtain the second calculation result,

[0154] If the pixel value belongs to the preset valid value (any value except 0, undefined and null), the pixel value is parsed to obtain the second floating point number, and the second floating point number is divided by the default root element font size to obtain the font size value. The second preset value is defined as 0. The font size value obtained here may be 0. If it is 0, the first calculation result is 0 and the conversion fails. If the font size value obtained is not 0, it needs to be rounded to the specified number of decimal places, that is, its precision is adjusted, such as rounding to 2 decimal places, and then adding the font size unit rem to obtain the second calculation result after the adaptation conversion is completed.

[0155] In addition, if the pixel value is not a valid value, that is, it is 0, undefined or null, the second preset value is used as the second calculation result and the conversion fails.

[0156] In this way, the elements on the target page can be appropriately scaled according to the root element font size of different devices. The above two conversion methods are both responsive unit conversions, which can solve the problem that the existing technology needs to write multiple sets of corresponding unit styles for adaptation on different devices.

[0157] and Figure 1 Corresponding to the method described above, the embodiment of the present invention also provides a web page grid layout device for Figure 1 In the specific implementation of the method, the web page grid layout device provided by the embodiment of the present invention can be used in a computer terminal or various mobile devices, combined with Figure 6 , introduces the grid layout device of the web page, such as Figure 6 As shown, the device may include:

[0158] A first webpage obtaining module 10 is used to execute a component installation instruction to install the grid layout component on an initial blank webpage and set a slot to obtain a first webpage;

[0159] A second webpage obtaining module 20, configured to perform custom content configuration on the first webpage using the slot and the grid layout component to obtain a second webpage;

[0160] A total grid number determination module 30, used to determine the total number of grids to be configured on the second webpage;

[0161] The row and column rendering module 40 is used to perform row and column rendering on the two web pages using the total number of grids to obtain a target web page, and display the target web page on the user client.

[0162] It can be seen from the above technical solution that the present application first executes the component installation instruction to install the pre-built grid layout component on the initial blank web page, and sets the slot to obtain the first web page; uses the slot and the grid layout component to configure the first web page with customized content to obtain the second web page; determines the total number of grids to be configured for the second web page; uses the total number of grids to render the two web pages in rows and columns to obtain the target web page, and displays the target web page on the user client. The present application pre-builds a grid layout component, and installs the component on the initial blank page where you want to perform grid layout. You can then set the slot, and use the slot and the component to implement customized content configuration for the first web page, which is not limited to a single configuration method or content. You can also determine the total number of grids you want to layout, and use the total number of grids to render rows and columns, making the layout process more flexible and meeting a variety of different configuration requirements under the grid layout.

[0163] Furthermore, the embodiment of the present application provides a web page grid layout device. Optionally, Figure 7 The hardware structure diagram of the web page grid layout device is shown in FIG. Figure 7 The hardware structure of the web page grid layout device may include: at least one processor 01, at least one communication interface 02, at least one memory 03 and at least one communication bus 04.

[0164] In the embodiment of the present application, the number of the processor 01 , the communication interface 02 , the memory 03 , and the communication bus 04 is at least one, and the processor 01 , the communication interface 02 , and the memory 03 communicate with each other through the communication bus 04 .

[0165] The processor 01 may be a central processing unit (CPU), or an application specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of the present invention.

[0166] The memory 03 may include a high-speed RAM memory, and may also include a non-volatile memory (non-volatile memory), etc., such as at least one disk memory.

[0167] The memory stores a program, and the processor can call the program stored in the memory, and the program is used to execute the following web page grid layout method, including:

[0168] Execute the component installation instruction to install the pre-built grid layout component on the initial blank web page and set the slot to obtain the first web page;

[0169] Using the slot and the grid layout component to perform custom content configuration on the first webpage to obtain a second webpage;

[0170] Determining the total number of grids to be configured on the second webpage;

[0171] The two web pages are rendered in rows and columns using the total number of grids to obtain a target web page, and the target web page is displayed on a user client.

[0172] Optionally, the detailed functions and extended functions of the program may refer to the description of the grid layout method of the web page in the method embodiment.

[0173] The embodiment of the present application further provides a storage medium, which may store a program suitable for execution by a processor, and when the program is executed, controls the device where the storage medium is located to execute the following web page grid layout method, including:

[0174] Execute the component installation instruction to install the pre-built grid layout component on the initial blank web page and set the slot to obtain the first web page;

[0175] Using the slot and the grid layout component to perform custom content configuration on the first webpage to obtain a second webpage;

[0176] Determining the total number of grids to be configured on the second webpage;

[0177] The two web pages are rendered in rows and columns using the total number of grids to obtain a target web page, and the target web page is displayed on a user client.

[0178] Specifically, the storage medium may be a computer-readable storage medium, and the computer-readable storage medium may be an electronic memory such as a flash memory, an EEPROM (Electrically Erasable Programmable Read-Only Memory), an EPROM, a hard disk or a ROM.

[0179] Optionally, the detailed functions and extended functions of the program may refer to the description of the grid layout method of the web page in the method embodiment.

[0180] In addition, the functional modules in the various embodiments of the present disclosure can be integrated together to form an independent part, or each module can exist separately, or two or more modules can be integrated to form an independent part. If the function is implemented in the form of a software functional module and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present disclosure is essentially or the part that contributes to the prior art or the part of the technical solution can be embodied in the form of a software product, which is stored in a storage medium and includes a number of instructions for a computer device (which can be a personal computer, a live broadcast device, or a network device, etc.) to perform all or part of the steps of the methods of the various embodiments of the present disclosure.

[0181] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.

[0182] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0183] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A grid layout method for a web page, characterized in that: include: Execute the component installation instruction to install the pre-built grid layout component on the initial blank web page and set the slot to obtain the first web page; Using the slot and the grid layout component to perform custom content configuration on the first webpage to obtain a second webpage; Determining the total number of grids to be configured on the second webpage; The two web pages are rendered in rows and columns using the total number of grids to obtain a target web page, and the target web page is displayed on a user client.

2. The method according to claim 1, characterized in that The construction process of the grid layout component includes: Set up component structure; Define multiple component properties, including: total grid width property, total grid number property, number of columns per row property, column spacing property, row spacing property, and alignment property; A grid layout component is constructed using the component structure and each of the component attributes.

3. The method according to claim 1, characterized in that The step of using the slot and the grid layout component to perform custom content configuration on the first webpage to obtain a second webpage includes: Obtaining the properties of each component of the grid layout component and the grid layout requirements of the user; According to the grid layout requirement, using each of the component attributes to perform a first configuration operation on the first webpage; After the first configuration operation, obtain the custom style provided by the slot; A second configuration operation is performed on the custom style according to the grid layout requirement to obtain a second webpage.

4. The method according to claim 1, characterized in that The step of rendering the two web pages in rows and columns by using the total number of grids to obtain a target web page includes: Get the user's grid layout requirements; Extracting a value of each row and column corresponding to a parameter of the number of each row and column from the grid layout requirement; Divide the total number of grids by the value of each row and column to obtain a first calculated value; Rounding up the first calculated value to obtain a target number of rows; Determine the number of columns corresponding to each target row; According to the target row number and the number of columns corresponding to each target row, the second web page is rendered in rows and columns to obtain a target web page.

5. The method according to claim 4, characterized in that The determining the number of columns corresponding to each target row includes: Traversing each of the target rows, and determining whether the currently traversed target row is the last row of the second web page; If not, then determine that the number of columns corresponding to the target row currently traversed is the per-row column value; If so, divide the total number of grids by the value of each row and column, and use the remainder as the number of columns of the target row currently traversed.

6. The method according to claim 1, characterized in that It also includes performing unit adaptation conversion on each component attribute of the grid layout component, including: Setting a default viewport width, and overlaying the default viewport width on the target webpage using a preset overlay object; Constructing a viewport width function and obtaining the pixel value of the target web page; Using the pixel value as an input value of the viewport width function, so that the viewport width function outputs a first calculation result; The first calculation result is used to perform unit adaptation conversion on each component attribute of the grid layout component.

7. The method according to claim 6, characterized in that The calculation process of the viewport width function includes: Determining whether the pixel value belongs to a preset valid value; If yes, the pixel value is parsed to obtain a first floating point number; Multiplying the first floating point number by a first preset value, and dividing the result by the default viewport width to obtain a viewport width value; Determine whether the viewport width value is a second preset value; If yes, taking the second preset value as the first calculation result; If not, precision processing is performed on the viewport width value, and a viewport width unit is added to obtain a first calculation result.

8. The method according to claim 1, characterized in that It also includes performing unit adaptation conversion on each component attribute of the grid layout component, including: Setting a default root element font size, and overlaying the default root element font size on the target web page using a preset overlay object; Constructing a root element font function and obtaining a pixel value of the target web page; Using the pixel value as an input value of the root element font function, so that the root element font function outputs a second calculation result; The second calculation result is used to perform unit adaptation conversion on each component attribute of the grid layout component.

9. The method according to claim 8, characterized in that The calculation process of the root element font function includes: Determining whether the pixel value belongs to a preset valid value; If yes, the pixel value is parsed to obtain a second floating point number; Divide the second floating point number by the default root element font size to obtain a font size value; Determining whether the font size value is a second preset value; If yes, taking the second preset value as the second calculation result; If not, precision processing is performed on the font size value, and a font size unit is added to obtain a second calculation result.

10. A web page grid layout device, characterized in that: include: A first webpage obtaining module is used to execute a component installation instruction to install a pre-built grid layout component on an initial blank webpage and set a slot to obtain a first webpage; A second webpage obtaining module, configured to perform customized content configuration on the first webpage using the slot and the grid layout component to obtain a second webpage; A total grid number determination module, used to determine the total grid number to be configured on the second webpage; The row and column rendering module is used to perform row and column rendering on the two web pages using the total number of grids to obtain a target web page, and display the target web page on the user client.

Images