CN106708985B - Layout method and device for multi-column webpage - Google Patents
Layout method and device for multi-column webpage Download PDFInfo
- Publication number
- CN106708985B CN106708985B CN201611140483.0A CN201611140483A CN106708985B CN 106708985 B CN106708985 B CN 106708985B CN 201611140483 A CN201611140483 A CN 201611140483A CN 106708985 B CN106708985 B CN 106708985B
- Authority
- CN
- China
- Prior art keywords
- container
- column
- parent container
- elements
- child
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Document Processing Apparatus (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention discloses a layout method and a device of a multi-column webpage, which can at least solve the technical problem that in the prior art, when the columns of the multi-column webpage are added or deleted, the layout of the webpage cannot be adaptively adjusted due to the change of the column content in the webpage, so that the attractiveness of the layout of the webpage is influenced. The layout method of the multi-column webpage comprises the following steps: setting a parent container for storing webpage contents of a plurality of columns of webpages; setting a plurality of child containers which are respectively used for storing column data elements of corresponding columns in a parent container, and defining the height of the parent container as the maximum height corresponding to each child container; filling elements are arranged in the parent container, and the filling elements are fixed at the bottom of the parent container through absolute positioning; and setting the hierarchy of the filling elements, so that the hierarchy of the filling elements is lower than that of the column data elements.
Description
Technical Field
The invention relates to the technical field of network communication, in particular to a layout method and device of multi-column webpages.
Background
With the application and popularization of the internet, the internet has become an important tool in daily life, and people need to browse web pages in the internet even every day to acquire information required by the people. Since a web page often contains a large amount of different types of information, the more and more the web pages in multiple columns are used. In the multi-column webpage, the page content of the whole webpage is divided into a plurality of columns, and the content displayed in each column can be dynamically adjusted according to actual needs.
In the process of implementing the embodiment of the present application, the inventor finds that at least the following problems exist in the prior art: because the content displayed in each column can be dynamically adjusted according to actual needs, when the content of a certain column is increased due to adjustment, the length of the column is increased; when the content of a certain column is reduced due to adjustment, the length of the column is shortened. Accordingly, the heights of the columns are different, so that the bottoms of the columns are uneven, and a large amount of blank areas appear at the bottoms of some columns. Therefore, the conventional layout mode of the multi-column webpage cannot effectively utilize the page space of the webpage, and the page layout of the webpage is not beautiful enough, so that the visual effect of the webpage is influenced.
Disclosure of Invention
In view of the above, the present invention is proposed to provide a layout method and apparatus for a multi-column web page that overcomes or at least partially solves the above problems.
According to an aspect of the present invention, there is provided a layout method of a multi-column webpage, including: setting a parent container for storing webpage contents of the multiple columns of webpages; setting a plurality of child containers which are respectively used for storing column data elements of corresponding columns in the parent container, and defining the height of the parent container as the maximum height corresponding to each child container; setting a filling element in the parent container, and fixing the filling element at the bottom of the parent container through absolute positioning; and setting the hierarchy of the filling elements, so that the hierarchy of the filling elements is lower than the hierarchy of the column data elements.
Optionally, the step of setting a padding element in the parent container specifically includes: setting a plurality of filling elements corresponding to the column data elements of each column respectively in the parent container according to the element types of the column data elements of each column; wherein the element types of the column data elements of each column include: a picture type and/or a text type, and the padding elements comprise: a fill element of a picture type, and/or a fill element of a text type.
Optionally, the step of fixing the padding element to the bottom of the parent container by absolute positioning further comprises: and determining the corresponding coordinate range of the column data elements of each column in the horizontal direction, and fixing each filling element in the corresponding coordinate range of the column data elements of the corresponding column.
Optionally, the method according to any of the above, wherein a height of each child container is equal to a height of a hurdle data element stored in the corresponding child container, and a top of each child container is aligned with a top of the parent container.
Optionally, the height of each sub-container is adaptively adjusted according to the height change of the stored column data element; when the heights of the child containers are the same, filling elements in the parent container are in an invisible state; when the heights of the child containers are different, filling elements corresponding to column data elements stored in the child containers with the heights smaller than the height of the parent container are in a visible state.
According to another aspect of the present invention, there is provided a layout apparatus for a multi-column web page, comprising: a parent container setting module, adapted to set a parent container for storing web page contents of the plurality of columns of web pages; the child container setting module is suitable for setting a plurality of child containers which are respectively used for storing column data elements of corresponding columns in the parent container, and the parent container setting module is further used for defining the height of the parent container as the maximum height corresponding to each child container; the filling element setting module is suitable for setting filling elements in the parent container and fixing the filling elements at the bottom of the parent container through absolute positioning; and the hierarchy setting module is suitable for setting the hierarchy of the filling elements so that the hierarchy of the filling elements is lower than the hierarchy of the column data elements.
Optionally, the padding element setting module is specifically configured to set, in the parent container, a plurality of padding elements corresponding to the column data elements of each column according to the element types of the column data elements of each column; wherein the element types of the column data elements of each column include: a picture type and/or a text type, and the padding elements comprise: a fill element of a picture type, and/or a fill element of a text type.
Optionally, the padding element setting module further includes: a setting unit adapted to set an element type of the fill-in element in the parent container; and the fixing unit is suitable for fixing the filling elements at the bottom of the parent container through absolute positioning, further determining a coordinate range corresponding to the column data elements of each column in the horizontal direction, and respectively fixing each filling element in the coordinate range corresponding to the column data elements of the corresponding column.
Optionally, the apparatus according to any of the above, wherein a height of each child container is equal to a height of a hurdle data element stored in the corresponding child container, and a top of each child container is aligned with a top of the parent container.
Optionally, the height of each sub-container is adaptively adjusted according to the height change of the stored column data element; when the heights of the child containers are the same, filling elements in the parent container are in an invisible state; when the heights of the child containers are different, filling elements corresponding to column data elements stored in the child containers with the heights smaller than the height of the parent container are in a visible state.
The layout method and the device of the multi-column webpage provided by the invention have the advantages that firstly, a parent container capable of storing webpage contents of the multi-column webpage is arranged, then a plurality of child containers respectively used for storing column data elements of corresponding columns are arranged in the parent container, the height of the parent container is defined as the corresponding maximum height of the child containers, finally, a filling element fixed at the bottom of the parent container is arranged in the parent container, and the filling element in the parent container is set to be lower than the level of the column data, so that the effect of filling a blank area in the webpage by using the filling element in the parent container is realized. Therefore, the scheme in the embodiment of the application solves the problem that when the content of the webpage is added or deleted, the attractiveness of the webpage is affected due to the fact that a plurality of columns in the webpage cannot be automatically aligned, the page space of the webpage can be effectively utilized, and the attractiveness of the webpage layout is improved.
The foregoing description is only an overview of the technical solutions of the present invention, and the embodiments of the present invention are described below in order to make the technical means of the present invention more clearly understood and to make the above and other objects, features, and advantages of the present invention more clearly understandable.
Drawings
Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiments. The drawings are only for purposes of illustrating the preferred embodiments and are not to be construed as limiting the invention. Also, like reference numerals are used to refer to like parts throughout the drawings. In the drawings:
FIG. 1 is a flow chart illustrating a method for layout of a multi-column web page according to an embodiment of the present invention;
FIG. 2 is a flow chart illustrating a method for layout of a multi-column web page according to another embodiment of the present invention;
FIG. 3a is a schematic diagram illustrating a fill-in effect display of fill-in elements according to another embodiment of the present invention;
FIG. 3b is a schematic diagram of a fill element level display in accordance with another embodiment of the present invention;
FIG. 4 is a block diagram illustrating a layout apparatus for a multi-column webpage according to still another embodiment of the present invention;
fig. 5 is a block diagram illustrating a layout apparatus for a multi-column web page according to still another embodiment of the present invention.
Detailed Description
Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.
The embodiment of the invention provides a layout method and a device of a multi-column webpage, which can at least solve the technical problem that the page layout of the webpage can not be adaptively adjusted due to the change of column contents in the webpage when the content of the multi-column webpage is added or deleted in the prior art, so that the attractiveness of the page layout of the webpage is influenced.
Fig. 1 is a flowchart illustrating a layout method of a multi-column web page according to an embodiment of the present invention. As shown in fig. 1, the method comprises the steps of:
step S110: a parent container for storing web page contents of a plurality of columns of web pages is set.
Specifically, the multi-column web page is a web page having a plurality of different information columns, and the web page content of the multi-column web page is content included in the plurality of information columns. For example, if the navigation web page includes a plurality of different information fields such as "game", "movie", and "shopping", the navigation web page is a multi-column web page, and the contents included in the plurality of information fields such as "game", "movie", and "shopping" are web page contents in the information field corresponding to the navigation web page. When setting a parent container for storing the web page contents of a plurality of columns of web pages, an empty container capable of storing the web page contents of the plurality of columns of web pages is defined, and the empty container is used as the parent container for storing the web page contents of the plurality of columns of web pages.
Step S120: and setting a plurality of child containers for storing the column data elements of the corresponding columns in the parent container, and defining the height of the parent container as the maximum height corresponding to each child container.
Specifically, after the parent container is set, a plurality of child containers are further defined in the parent container, and the height, position, and other relevant parameters of the plurality of child containers are further defined. The plurality of sub-containers are respectively used for storing column data elements of corresponding columns. After the setting of the parent container and the child containers is completed, the height of the parent container including the plurality of child containers is further defined, because the parent container is to accommodate the plurality of child containers, and therefore the height of the parent container is specifically defined as the maximum height corresponding to the plurality of child containers included in the parent container, so that when the maximum height value corresponding to the plurality of child containers in the parent container is changed, the height of the parent container is changed accordingly.
Step S130: and (4) setting a filling element in the parent container, and fixing the filling element at the bottom of the parent container through absolute positioning.
Specifically, when the fill-in element is set in the parent container, the fill-in element may be set according to the column data element type of the corresponding column stored in the child container in the parent container. For example, if the column data element type of the corresponding column stored in the child container 1 in the parent container is the picture type, setting the padding element of the part corresponding to the child container 1 in the parent container as the padding element of the picture type; if the column data element type of the corresponding column stored in the child container 1 in the parent container is the character type, setting the filling element of the part, corresponding to the child container 1, in the parent container as the filling element of the character type. After the above steps are completed, the set padding element is fixed at the bottom of the parent container by an absolute positioning method, so that the set padding element can be displayed in the subsequent step (corresponding to step S140).
Step S140: and setting the hierarchy of the filling elements, so that the hierarchy of the filling elements is lower than that of the column data elements.
Specifically, one data element corresponds to only one hierarchy, and when the positions of two data elements overlap with each other, the data element with a lower hierarchy is covered by the data element with a higher hierarchy, that is, only the content corresponding to the data element with a higher hierarchy is displayed, and the content corresponding to the data element with a lower hierarchy is not displayed. Therefore, after the filling elements are set, in order to enable the filling elements to be displayed only when each information column of the webpage page is about to be blank, the levels of the filling elements need to be further set, and the levels of the filling elements are set to be lower than the levels of column data elements of each information column, so that when the column data elements displayed in the information columns in the webpage page can fill the webpage page, the filling elements are positioned below the column data elements of the displayed information columns and are in a hidden state; when column data elements displayed in an information column in a webpage page cannot fill the webpage page, low-level filling elements are correspondingly displayed and correspondingly fill the blank in the webpage, so that the layout of the webpage is more complete, and the webpage page is more attractive.
Therefore, in the layout method of the multi-column webpage provided by the invention, firstly, a parent container capable of storing the webpage content of the multi-column webpage is arranged, then a plurality of child containers respectively used for storing column data elements of corresponding columns are arranged in the parent container, the height of the parent container is defined as the maximum height corresponding to the child containers, finally, a filling element fixed at the bottom of the parent container is arranged in the parent container, and the filling element in the parent container is set to be lower than the level of the column data. In the scheme of the embodiment of the application, since the height of the parent container is equal to the height of the child container with the largest height, except for the child container with the largest height, the other child containers are empty (each child container is aligned with the top of the parent container by default) due to smaller height, and the filling elements are fixed at the bottom of the parent container through absolute positioning and have lower levels than the column data elements displayed in the child containers, so that once the other child containers are empty due to smaller height, the filling elements with lower levels arranged at the positions corresponding to the child containers with smaller height are exposed, thereby realizing automatic filling of the empty spaces and improving the aesthetic effect.
Fig. 2 is a flowchart illustrating a layout method of a multi-column web page according to another embodiment of the present invention. As shown in fig. 2, the method comprises the steps of:
step S210: a parent container for storing web page contents of a plurality of columns of web pages is set.
Specifically, the multi-column web page is a web page having a plurality of different information columns, and the web page content of the multi-column web page includes content included in the plurality of information columns. For example, if the navigation web page has a plurality of different information fields such as "game", "movie", and "shopping", the navigation web page is a multi-column web page, and the content included in the plurality of information fields such as "game", "movie", and "shopping" is the web page content in the information field corresponding to the navigation web page. When setting a parent container for storing web page contents of a plurality of columns of web pages, an empty container is defined first, and the empty container is used as the parent container for storing the web page contents of the plurality of columns of web pages. The empty container can store the web page contents of the multiple columns of web pages, and a plurality of empty sub-containers can be further defined in the empty container, so that the corresponding storage of the web page contents of each column is realized. In a specific implementation, the parent container may be implemented by < div > (in HTML, a document may be divided into separate and distinct parts) code.
Step S220: and setting a plurality of child containers for storing the column data elements of the corresponding columns in the parent container, and defining the height of the parent container as the maximum height corresponding to each child container.
Specifically, similar to setting a parent container, when setting a child container, first defining a plurality of empty containers in the parent container, and then using the defined plurality of empty containers as a plurality of child containers in the parent container, where the plurality of child containers are used to store column data elements of a corresponding column in a web page, and after setting the child container used to store the column data elements of the corresponding column, further setting the height and position related parameters of the child container: setting the height of each sub container as the height of column data elements stored in the sub container, namely setting the height of each sub container as the sum of the heights of the column data elements in each row contained in the sub container when the height of the sub container is set; the top of each child container is arranged to align with the top of the parent container containing the child container, i.e. each child container is hung on the top of the parent container from the visual effect (without adopting absolute positioning technology, the top of each child container is aligned with the top of the parent container by default). After the above setting is completed, the height of the parent container including the child container is further defined, specifically, the height of the parent container is defined as the maximum height corresponding to the height of each child container included in the parent container, that is, the maximum value of the height values of each child container included in the parent container. For example, if the parent container includes 3 child containers in total, i.e., the child container 1, the child container 2, and the child container 3, and the heights of the 3 child containers are 10, 20, and 30, respectively, the height of the parent container corresponds to the maximum height value of 30 among the height values.
Step S230: and setting a plurality of filling elements corresponding to the column data elements of each column respectively in the parent container according to the element types of the column data elements of each column.
Specifically, the element types of the column data elements of the respective columns include: picture type and/or text type; then the element type corresponding to the column data element, the type of the padding element includes: a fill element of a picture type, and/or a fill element of a text type. When the fill-in element in the parent container is set, specifically, the type of the corresponding fill-in element is set according to the element type of the column data element stored in each child container in the parent container. For example, the parent container includes 2 child containers respectively located on the left and right sides of the parent container, and the corresponding columns are hereinafter referred to as the left column and the right column. And when the filling elements of the parent container are set, the filling elements corresponding to the left column area in the parent container are set as the filling elements of the text type, and the filling elements corresponding to the right column area in the parent container are set as the filling elements of the picture type. After the type of the padding element is set, the content of the padding element in the parent container may be further set according to the specific content of the column data element in the child container, for example, if the column data of the left column is a text type and the specific content is a news report, the padding element in the parent container may also be set to be a news report.
Step S240: and fixing the filling element at the bottom of the parent container through absolute positioning.
Specifically, after the element type of the padding element is set, the set padding element is further fixed at the bottom of the parent container by an absolute positioning method. In a specific implementation, the distance length between the padding element and the bottom of the parent container is set to 0 through absolute positioning, so that the bottom of the padding element is aligned with the bottom of the parent container, and the set padding element can be displayed in a subsequent step (corresponding to step S250).
In addition, when the padding elements include multiple types of padding elements corresponding to the respective columns, respectively, it is further necessary to further determine the coordinate ranges of the column data elements of the respective columns in the horizontal direction in this step, and fix the respective padding elements in the coordinate ranges corresponding to the column data elements of the corresponding columns, respectively. Specifically, after the filling element is fixed at the bottom of the parent container, a coordinate range of the filling element in the horizontal direction is further set, so that the filling element is overlapped with the column data element of the corresponding column in the horizontal coordinate. In specific implementation, an obtaining function may be set, where the function is used to determine and obtain a coordinate range corresponding to the column data element of each column in the horizontal direction, then determine a coordinate range of each filling element corresponding to the column data element of each column in the horizontal direction according to the result, and finally fix each filling element in the determined coordinate range by an absolute positioning method, so as to achieve an effect of setting the filling element in the horizontal coordinate range to overlap with the column data element of the corresponding column.
Step S250: and setting the hierarchy of the filling elements, so that the hierarchy of the filling elements is lower than that of the column data elements.
Specifically, each data element has only one corresponding hierarchy, and when the positions of two data elements overlap each other, the data element with the higher hierarchy is overlaid on the data element with the lower hierarchy, that is, the data element with the lower hierarchy is overlaid on the display effect, so that only the data element with the higher hierarchy is displayed; when no hierarchically higher data element is overlaid on top of a hierarchically lower data element (or the hierarchically higher data element is transparent), the hierarchically lower data element is correspondingly displayed. Therefore, after the setting in step S240 is completed, the hierarchy of the padding elements in the parent container is further set, and the hierarchy of the padding elements is set to be lower than the hierarchy of the column data elements of the corresponding column of the padding elements, so that when the bottoms of one or more child containers in the parent container are all aligned with the bottom of the parent container, the padding elements of the column data elements of the corresponding column in the parent container are covered, and only the content of the column data elements of the corresponding column in the parent container is displayed in the webpage; when the bottoms of one or more child containers in the parent container are not aligned with the bottom of the parent container, namely when a blank appears in a webpage page, the filling elements of the column data elements of the corresponding column arranged in the parent container are correspondingly displayed so as to realize the effect of filling the blank between the bottom of the child container and the bottom of the parent container by the filling elements, namely, the height of the parent container is equal to the height of the child container with the largest height, and the height of each child container can be adaptively adjusted according to the height change of the stored column data elements, so that when the heights of the child containers are the same, the filling elements in the parent container are in an invisible state; when the heights of the child containers are different, filling elements corresponding to column data elements stored in the child containers with the heights smaller than the height of the parent container are in a visible state. Namely: once the column data elements in other sub-containers are empty due to the small height, the filling elements with lower levels arranged at the positions corresponding to the sub-containers with the small height are exposed, so that the blank is automatically filled, and the attractiveness of the webpage layout is improved. In a specific implementation, when setting the hierarchy of the padding elements, in order to make the padding elements located at the lowest layer of all data elements, the parameter of z-index in the CSS format of the padding elements may be set to-1.
For example, as shown in fig. 3a, fig. 3a is a schematic diagram illustrating filling effect display of filling elements, where the bottom of a child container 2 is not overlapped with the bottom of a parent container, and a corresponding filling element (a shaded portion) is displayed, so as to achieve an effect of filling a blank area of the corresponding portion (a shaded portion area), where a hierarchy of the filling element is lower than a hierarchy of column data, so column data elements of the child container 1 and the child container 2 in the diagram both cover the filling element in the diagram; as shown in fig. 3b, fig. 3b is a schematic diagram showing a hierarchy of filling elements in fig. 3a, for clarity, fig. 3b only shows filling elements, and does not show column data elements, wherein the shaded portions are filling elements, the element type of column data in the child container 1 at the position corresponding to the filling element 1 (the position of the left column) is a picture type, the element type of column data in the child container 2 at the position corresponding to the filling element 2 (the position of the right column) is a text type, and regardless of whether the column data element exists, the filling element is fixed at the bottom of the parent container, the hierarchy of the filling element is lower than the hierarchy of the column data element of the corresponding column, and the element type is consistent with the element type of the column data element in the corresponding child container.
Therefore, in the layout method of the multi-column webpage provided by the invention, firstly, a parent container capable of storing the webpage content of the multi-column webpage is arranged, then a plurality of child containers respectively used for storing column data elements of corresponding columns are arranged in the parent container, the height of the parent container is defined as the maximum height corresponding to the child containers, finally, the type of the filling element is set as the type of the column data element of the column corresponding to the filling element by arranging the filling element in the parent container, the filling element is fixed at the bottom of the parent container by an absolute positioning method, and the hierarchy of the filling element is set to be lower than that of the column data element of the corresponding column. In the scheme of the embodiment of the application, since the height of the parent container is equal to the height of the child container with the largest height, except for the child container with the largest height, the other child containers are empty (each child container is aligned with the top of the parent container by default) due to smaller height, and the filling elements are fixed at the bottom of the parent container through absolute positioning and have lower levels than the levels of the column data elements displayed in the child containers.
Fig. 4 is a block diagram illustrating a layout apparatus for a multi-column web page according to still another embodiment of the present invention. As shown in fig. 4, the apparatus includes: a parent container setting module 41, a child container setting module 42, a shim element setting module 43, and a hierarchy setting module 44.
The parent container setting module 41 is adapted to set a parent container for storing web page content of the multi-column web page.
Specifically, the multi-column web page is a web page having a plurality of different information columns, and the web page content of the multi-column web page is content included in the plurality of information columns. For example, if the navigation web page includes a plurality of different information fields such as "game", "movie", and "shopping", the navigation web page is a multi-column web page, and the contents included in the plurality of information fields such as "game", "movie", and "shopping" are web page contents in the information field corresponding to the navigation web page. When setting a parent container for storing contents of a plurality of columns of web pages, the parent container setting module 41 defines an empty container capable of storing contents of the plurality of columns of web pages, and sets the empty container as a parent container for storing contents of the plurality of columns of web pages. After the child container setting module 42 has set the child container, the parent container setting module 41 further defines the height of the set parent container, and defines the height of the set parent container as the maximum height corresponding to each child container set by the child container setting module 42.
The child container setting module 42 is adapted to set a plurality of child containers each for storing column data elements of a corresponding column within the parent container.
Specifically, after the parent container is set, the child container setting module 42 further defines a plurality of child containers in the parent container, and further defines the height, the position, and other relevant parameters of the plurality of child containers. The plurality of sub-containers are respectively used for storing column data elements of corresponding columns. After the child container setting module 42 completes the setting of the child container, the parent container setting module 41 further obtains the maximum heights corresponding to the set plurality of child containers from the child container setting module 42, and then defines the obtained maximum height as the maximum height of the parent container.
The shim element setting module 43 is adapted to set shim elements in the parent container that are fixed at the bottom of the parent container by absolute positioning.
Specifically, the fill-element setting module 43 may set the fill element according to the column data element type of the corresponding column stored in the child container in the parent container. For example, if the column data element type of the corresponding column stored in the child container 1 in the parent container is the picture type, setting the padding element of the part corresponding to the child container 1 in the parent container as the padding element of the picture type; if the column data element type of the corresponding column stored in the child container 1 in the parent container is the character type, setting the filling element of the part, corresponding to the child container 1, in the parent container as the filling element of the character type. After the above steps are completed, the padding element setting module 33 fixes the above set padding elements at the bottom of the parent container by an absolute positioning method, so that the set padding elements can be displayed after the padding elements are subjected to correlation processing by a subsequent module (corresponding to the hierarchy setting module 44).
The hierarchy setting module 44 is adapted to set a hierarchy of fill elements such that the hierarchy of fill elements is lower than the hierarchy of column data elements.
Specifically, one data element corresponds to only one hierarchy, and when the positions of two data elements overlap with each other, the data element with a lower hierarchy is covered by the data element with a higher hierarchy, that is, only the content corresponding to the data element with a higher hierarchy is displayed, and the content corresponding to the data element with a lower hierarchy is not displayed. Therefore, when the hierarchy of the padding elements is set by the hierarchy setting module 44, the hierarchy of the padding elements is set to be lower than the hierarchy of the column data elements of each information bar, so that when the column data elements displayed in the information bars in the web page can fill up the web page, the padding elements are located below the column data elements of the displayed information bars and are in a hidden state; when column data elements displayed in an information column in a webpage page cannot fill the webpage page, low-level filling elements are correspondingly displayed and correspondingly fill the blank in the webpage, so that the layout of the webpage is more complete, and the webpage page is more attractive.
It can be seen that, in the layout apparatus for multi-column web pages provided by the present invention, first, a parent container capable of storing web page contents of multi-column web pages is set by the parent container setting module 41, then, a plurality of child containers for storing column data elements of corresponding columns are set in the set parent container by the child container module 42, the height of the parent container is further defined as the maximum height corresponding to the plurality of child containers by the parent container setting module 41, finally, a padding element fixed at the bottom of the parent container is set in the parent container by the padding element setting module 43, and the padding element in the parent container is set to be lower than the level of the column data by the hierarchy setting module 44. Therefore, the solution in the embodiment of the present application can realize the layout of multiple columns of web pages by setting one parent container and setting multiple child containers in the parent container, and then setting corresponding padding elements in the parent container, and since the height of the parent container is equal to the height of the child container with the largest height, except the child container with the largest height, the other child containers are empty due to their smaller height (each child container is aligned with the top of the parent container by default), and the padding elements are fixed at the bottom of the parent container by absolute positioning and have a lower hierarchy than the column data elements displayed in the child containers, so that once the other child containers are empty due to their smaller height, the padding elements with lower hierarchy set at the positions corresponding to the child containers with smaller height will be exposed, thereby realizing the effects of automatically filling the blank and improving the aesthetic property
Fig. 5 is a block diagram illustrating a layout apparatus for a multi-column web page according to still another embodiment of the present invention. As shown in fig. 5, the apparatus includes: a parent container setting module 51, a child container setting module 52, a shim element setting module 53, and a hierarchy setting module 54. Wherein, the padding element setting module 53 further includes a setting unit 531 and a fixing unit 532.
The parent container setting module 51 is adapted to set a parent container for storing web page contents of a plurality of columns of web pages.
Specifically, when setting a parent container for storing web page contents of a plurality of columns of web pages, the parent container setting module 51 specifically defines an empty container as a parent container for storing web page contents of a plurality of columns of web pages. The empty container can store the web page contents of the multiple columns of web pages, and a plurality of empty sub-containers can be further defined in the empty container, so that the corresponding storage of the web page contents of each column is realized. In a specific implementation, the parent container body set by the parent container setting module 51 can be realized by < div > (in HTML, a document can be divided into separate and different parts). After the child container setting module 52 has set the child container, the parent container setting module 51 further defines the height of the set parent container, specifically, the height of the set parent container is defined as the maximum height corresponding to each child container set by the child container setting module 52.
The child container setting module 52 is adapted to set a plurality of child containers each for storing column data elements of a corresponding column within the parent container.
Specifically, similar to the setting of the parent container by the parent container setting module 51, when the child container is set by the child container setting module 52, a plurality of empty containers are first defined in the parent container, and then the plurality of empty containers defined above are used as a plurality of child containers in the parent container, where the plurality of child containers are used to store the column data elements of the corresponding column in the web page, and after the child container used to store the column data elements of the corresponding column is set, the child container setting module 52 further sets the height and position related parameters of the child container: setting the height of each sub container as the height of column data elements stored in the sub container, namely setting the height of each sub container as the sum of the heights of the column data elements in each row contained in the sub container when the height of the sub container is set; the top of each child container is arranged to align with the top of the parent container containing the child container, i.e. each child container is hung on the top of the parent container from the visual effect (without adopting absolute positioning technology, the top of each child container is aligned with the top of the parent container by default).
The shim element setting module 53 is adapted to set shim elements within the parent container that are fixed at the bottom of the parent container by absolute positioning. Wherein, the padding element setting module 53 further includes a setting unit 531 and a fixing unit 532.
The setting unit 531 is adapted to set an element type of the padding element within the parent container.
Specifically, the element types of the column data elements of the respective columns include: picture type and/or text type; then the element type corresponding to the column data element, the type of the padding element includes: a fill element of a picture type, and/or a fill element of a text type. When setting the padding elements in the parent container, the setting unit 531 specifically sets the types of the corresponding padding elements according to the element types of the column data elements stored in each child container in the parent container. For example, the parent container includes 2 child containers respectively located on the left and right sides of the parent container, and the corresponding columns are hereinafter referred to as the left column and the right column. If the element type of the column data element included in the left column is a text type, and the element type of the column data element included in the right column is a picture type, the setting unit 531 sets the padding element corresponding to the left column area in the parent container as the padding element of the text type, and sets the padding element corresponding to the right column area in the parent container as the padding element of the picture type. After the type of the padding element is set, the setting unit 531 may further set the content of the padding element in the parent container according to the specific content of the entry data element in the child container, for example, if the entry data in the left column is a text type and the specific content is a news report, the padding element in the parent container may also be set to be a news report.
The fixing unit 532 is adapted to fix the padding elements at the bottom of the parent container by absolute positioning, and further determine the corresponding coordinate range of the column data element of each column in the horizontal direction, and respectively fix each padding element within the coordinate range corresponding to the column data element of the corresponding column.
Specifically, the fixing unit 532 sets the distance length between the padding element and the bottom of the parent container to 0 by absolute positioning, so that the bottom of the padding element is aligned with the bottom of the parent container, and when the padding element includes a plurality of types of padding elements corresponding to the respective columns, the fixing unit 532 further needs to determine the coordinate ranges corresponding to the column data elements of the respective columns in the horizontal direction, and fix the respective padding elements in the coordinate ranges corresponding to the column data elements of the corresponding columns, respectively. Specifically, after the fixing unit 532 fixes the padding element at the bottom of the parent container, the coordinate range of the padding element in the horizontal direction is further set, so that the padding element overlaps with the column data element of the corresponding column in the horizontal coordinate. In specific implementation, an obtaining function may be set, where the function is used to determine and obtain a coordinate range corresponding to the column data element of each column in the horizontal direction, then determine a coordinate range of each filling element corresponding to the column data element of each column in the horizontal direction according to the result, and finally fix each filling element in the determined coordinate range by an absolute positioning method, so as to achieve an effect of setting the filling element in the horizontal coordinate range to overlap with the column data element of the corresponding column.
The hierarchy setting module 54 is adapted to set a hierarchy of fill elements such that the hierarchy of fill elements is lower than the hierarchy of column data elements.
Specifically, when the hierarchy setting module 54 sets the hierarchy of the padding elements in the parent container, the hierarchy setting module 54 sets the hierarchy of the padding elements in the parent container to be lower than the hierarchy of the column data elements in the corresponding column of the padding elements, and since the height of the parent container is equal to the height of the child container with the largest height, and the height of each child container can be adaptively adjusted according to the height change of the stored column data elements, when the heights of the child containers are the same, the padding elements in the parent container are in an invisible state; when the heights of the child containers are different, filling elements corresponding to column data elements stored in the child containers with the heights smaller than the height of the parent container are in a visible state. That is to say, once the column data elements in other sub-containers are empty due to the small height, the filling elements with lower levels arranged at the positions corresponding to the sub-containers with the small height are exposed, so that the blank is automatically filled, and the appearance is improved.
The specific structure and the operation principle of each module may refer to the description of the corresponding module in the device embodiment, and are not described herein again.
It can be seen that, in the layout apparatus for multi-column web pages provided by the present invention, first, a parent container capable of storing web page contents of multi-column web pages is set by the parent container setting module 51, then, a plurality of child containers for storing column data elements of corresponding columns are set in the parent container by the child container setting module 52, and further, the parent container setting module 51 defines the height of the parent container as the maximum height corresponding to the plurality of child containers, and finally, the setting unit 531 in the filling element setting module 53 sets the type of the filling element in the parent container, fixes the filling element at the bottom of the parent container by the fixing unit 532 using an absolute positioning method, and finally, sets the level of the filling element to be lower than the level of the column data elements of corresponding columns by the level setting module 54. In the scheme of the embodiment of the application, since the height of the parent container is equal to the height of the child container with the largest height, except for the child container with the largest height, the other child containers are empty (each child container is aligned with the top of the parent container by default) due to smaller height, and the filling elements are fixed at the bottom of the parent container through absolute positioning and have lower levels than the levels of the column data elements displayed in the child containers.
The algorithms and displays presented herein are not inherently related to any particular computer, virtual machine, or other apparatus. Various general purpose systems may also be used with the teachings herein. The required structure for constructing such a system will be apparent from the description above. Moreover, the present invention is not directed to any particular programming language. It is appreciated that a variety of programming languages may be used to implement the teachings of the present invention as described herein, and any descriptions of specific languages are provided above to disclose the best mode of the invention.
In the description provided herein, numerous specific details are set forth. It is understood, however, that embodiments of the invention may be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been shown in detail in order not to obscure an understanding of this description.
Similarly, it should be appreciated that in the foregoing description of exemplary embodiments of the invention, various features of the invention are sometimes grouped together in a single embodiment, figure, or description thereof for the purpose of streamlining the disclosure and aiding in the understanding of one or more of the various inventive aspects. However, the disclosed method should not be interpreted as reflecting an intention that: that the invention as claimed requires more features than are expressly recited in each claim. Rather, as the following claims reflect, inventive aspects lie in less than all features of a single foregoing disclosed embodiment. Thus, the claims following the detailed description are hereby expressly incorporated into this detailed description, with each claim standing on its own as a separate embodiment of this invention.
Those skilled in the art will appreciate that the modules in the device in an embodiment may be adaptively changed and disposed in one or more devices different from the embodiment. The modules or units or components of the embodiments may be combined into one module or unit or component, and furthermore they may be divided into a plurality of sub-modules or sub-units or sub-components. All of the features disclosed in this specification (including any accompanying claims, abstract and drawings), and all of the processes or elements of any method or apparatus so disclosed, may be combined in any combination, except combinations where at least some of such features and/or processes or elements are mutually exclusive. Each feature disclosed in this specification (including any accompanying claims, abstract and drawings) may be replaced by alternative features serving the same, equivalent or similar purpose, unless expressly stated otherwise.
Furthermore, those skilled in the art will appreciate that while some embodiments herein include some features included in other embodiments, rather than other features, combinations of features of different embodiments are meant to be within the scope of the invention and form different embodiments. For example, in the following claims, any of the claimed embodiments may be used in any combination.
The various component embodiments of the invention may be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. Those skilled in the art will appreciate that a microprocessor or Digital Signal Processor (DSP) may be used in practice to implement some or all of the functionality of some or all of the components in an apparatus according to an embodiment of the invention. The present invention may also be embodied as apparatus or device programs (e.g., computer programs and computer program products) for performing a portion or all of the methods described herein. Such programs implementing the present invention may be stored on computer-readable media or may be in the form of one or more signals. Such a signal may be downloaded from an internet website or provided on a carrier signal or in any other form.
It should be noted that the above-mentioned embodiments illustrate rather than limit the invention, and that those skilled in the art will be able to design alternative embodiments without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word "comprising" does not exclude the presence of elements or steps not listed in a claim. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The invention may be implemented by means of hardware comprising several distinct elements, and by means of a suitably programmed computer. In the unit claims enumerating several means, several of these means may be embodied by one and the same item of hardware. The usage of the words first, second and third, etcetera do not indicate any ordering. These words may be interpreted as names.
Claims (10)
1. A layout method of a multi-column webpage comprises the following steps:
setting a parent container for storing webpage contents of the multiple columns of webpages;
setting a plurality of child containers which are respectively used for storing column data elements of corresponding columns in the parent container, and defining the height of the parent container as the maximum height corresponding to each child container; setting a filling element in the parent container, and fixing the filling element at the bottom of the parent container through absolute positioning;
setting the hierarchy of the filling elements to be lower than that of the column data elements; wherein the top of each child container is aligned with the top of the parent container.
2. The method of claim 1, wherein the step of setting a shim element within the parent container specifically comprises: setting a plurality of filling elements corresponding to the column data elements of each column respectively in the parent container according to the element types of the column data elements of each column;
wherein the element types of the column data elements of each column include: a picture type and/or a text type, and the padding elements comprise: a fill element of a picture type, and/or a fill element of a text type.
3. The method of claim 2, wherein the step of securing the shim element at the bottom of the parent container by absolute positioning further comprises:
and determining the corresponding coordinate range of the column data elements of each column in the horizontal direction, and fixing each filling element in the corresponding coordinate range of the column data elements of the corresponding column.
4. A method according to any one of claims 1 to 3, wherein the height of each sub-container is equal to the height of a hurdle data element stored within the respective sub-container.
5. The method of claim 4, wherein the height of each sub-container is adaptively adjusted according to the height variation of the stored hurdle data elements;
when the heights of the child containers are the same, filling elements in the parent container are in an invisible state; when the heights of the child containers are different, filling elements corresponding to column data elements stored in the child containers with the heights smaller than the height of the parent container are in a visible state.
6. A layout apparatus for a multi-column web page, comprising:
a parent container setting module, adapted to set a parent container for storing web page contents of the plurality of columns of web pages;
the child container setting module is suitable for setting a plurality of child containers which are respectively used for storing column data elements of corresponding columns in the parent container, and the parent container setting module is further used for defining the height of the parent container as the maximum height corresponding to each child container; wherein the top of each child container is aligned with the top of the parent container;
the filling element setting module is suitable for setting filling elements in the parent container and fixing the filling elements at the bottom of the parent container through absolute positioning; and the hierarchy setting module is suitable for setting the hierarchy of the filling elements so that the hierarchy of the filling elements is lower than the hierarchy of the column data elements.
7. The apparatus according to claim 6, wherein the padding element setting module is specifically configured to set, in the parent container, a plurality of padding elements corresponding to the column data elements of the respective columns, respectively, according to element types of the column data elements of the respective columns;
wherein the element types of the column data elements of each column include: a picture type and/or a text type, and the padding elements comprise: a fill element of a picture type, and/or a fill element of a text type.
8. The apparatus of claim 7, wherein the shim element setting module further comprises:
a setting unit adapted to set an element type of the fill-in element in the parent container;
and the fixing unit is suitable for fixing the filling elements at the bottom of the parent container through absolute positioning, further determining a coordinate range corresponding to the column data elements of each column in the horizontal direction, and respectively fixing each filling element in the coordinate range corresponding to the column data elements of the corresponding column.
9. The apparatus according to any one of claims 6-8, wherein the height of each sub-container is equal to the height of the hurdle data elements stored within the respective sub-container.
10. The apparatus of claim 9, wherein the height of each sub-container is adaptively adjusted according to the height variation of the stored hurdle data elements;
when the heights of the child containers are the same, filling elements in the parent container are in an invisible state; when the heights of the child containers are different, filling elements corresponding to column data elements stored in the child containers with the heights smaller than the height of the parent container are in a visible state.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611140483.0A CN106708985B (en) | 2016-12-12 | 2016-12-12 | Layout method and device for multi-column webpage |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611140483.0A CN106708985B (en) | 2016-12-12 | 2016-12-12 | Layout method and device for multi-column webpage |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106708985A CN106708985A (en) | 2017-05-24 |
| CN106708985B true CN106708985B (en) | 2020-08-18 |
Family
ID=58937248
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201611140483.0A Active CN106708985B (en) | 2016-12-12 | 2016-12-12 | Layout method and device for multi-column webpage |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106708985B (en) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110866208B (en) * | 2019-10-10 | 2022-11-11 | 东软集团股份有限公司 | Page response type layout method, device and equipment |
| CN110781440A (en) * | 2019-10-31 | 2020-02-11 | 北京东软望海科技有限公司 | Container height adjusting method and device, computer equipment and storage medium |
| CN111290754B (en) * | 2020-01-23 | 2023-02-24 | 湖南快乐阳光互动娱乐传媒有限公司 | Component rendering method and device |
| CN113190781B (en) * | 2021-05-12 | 2023-09-01 | 北京奇艺世纪科技有限公司 | Page layout method, device, equipment and storage medium |
| CN114579241A (en) * | 2022-03-02 | 2022-06-03 | 湖南快乐阳光互动娱乐传媒有限公司 | Page rendering method, device and system |
| CN117032676B (en) * | 2023-10-09 | 2024-01-26 | 之江实验室 | Container self-adaption method and device, storage medium and electronic equipment |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101140516A (en) * | 2007-10-22 | 2008-03-12 | 金蝶软件（中国）有限公司 | Method and system for dynamic laying-out interface element |
| CN105224540A (en) * | 2014-05-29 | 2016-01-06 | 广州市动景计算机科技有限公司 | Page composing method and device |
| CN105912336A (en) * | 2016-04-11 | 2016-08-31 | 江苏中威科技软件系统有限公司 | Multi-screen adaptive method for mobile terminal front-end development |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP5383234B2 (en) * | 2009-02-03 | 2014-01-08 | キヤノン株式会社 | Information processing apparatus and print control method |
-
2016
- 2016-12-12 CN CN201611140483.0A patent/CN106708985B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101140516A (en) * | 2007-10-22 | 2008-03-12 | 金蝶软件（中国）有限公司 | Method and system for dynamic laying-out interface element |
| CN105224540A (en) * | 2014-05-29 | 2016-01-06 | 广州市动景计算机科技有限公司 | Page composing method and device |
| CN105912336A (en) * | 2016-04-11 | 2016-08-31 | 江苏中威科技软件系统有限公司 | Multi-screen adaptive method for mobile terminal front-end development |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106708985A (en) | 2017-05-24 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106708985B (en) | Layout method and device for multi-column webpage | |
| CN102663126B (en) | Method and device for displaying webpage in mobile terminal | |
| US20100179949A1 (en) | Method and system for an internet browser add-on providng simultaneous multiple interactive websites on one internet browser window | |
| US20160283096A1 (en) | Method of generating a link by utilizing a picture and system thereof | |
| CN103164541B (en) | Image presentation method and equipment | |
| CN104820589B (en) | A kind of method and its device of dynamic adaptation webpage | |
| CN108021671B (en) | Page transparent processing method and device | |
| US8924847B2 (en) | Multilayer style sheet approach and system | |
| CN103631867B (en) | Webpage display method and browser | |
| CN104217037A (en) | Method and device for displaying web page in mobile terminal | |
| CN108052565B (en) | Transparent processing method and device for page | |
| CN103631866A (en) | Webpage display method and browser | |
| CN104166656A (en) | Traffic statistic webpage display method and device | |
| CN106294301A (en) | Report form generation method and device | |
| US20130124974A1 (en) | System for Assembling Webpage's Region of Other Website into a Webpage of a Website and Method for the Same | |
| CN103019720A (en) | Method and device for processing page in browser | |
| CN109683978A (en) | A kind of method, apparatus and electronic equipment of the rendering of streaming layout interface | |
| WO2019000894A1 (en) | Method and device for generating article outline | |
| CN103034723A (en) | Page presenting method and equipment | |
| CN110020291B (en) | Webpage layout processing method and device | |
| CN106599175B (en) | Webpage element display processing method and device | |
| CN102915349A (en) | Method for displaying webpage in browser and webpage component displayed in browser | |
| CN105677674B (en) | Dynamic display method and device for page filling content | |
| CN111198731A (en) | Interface implementation method and device, electronic equipment and storage medium | |
| CN114661370A (en) | Resource loading method and device, electronic equipment and computer storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |