CN110874251A - Method and device for realizing picture wooden barrel layout - Google Patents
Method and device for realizing picture wooden barrel layout Download PDFInfo
- Publication number
- CN110874251A CN110874251A CN201810996058.4A CN201810996058A CN110874251A CN 110874251 A CN110874251 A CN 110874251A CN 201810996058 A CN201810996058 A CN 201810996058A CN 110874251 A CN110874251 A CN 110874251A
- Authority
- CN
- China
- Prior art keywords
- picture
- dom tree
- attribute
- virtual dom
- real
- 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.)
- Pending
Links
Images
Classifications
-
- 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)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a method and a device for realizing picture barrel layout, and relates to the technical field of computers. One embodiment of the method comprises: acquiring picture data, and creating an original virtual DOM tree based on the picture data; recursively constructing a real DOM tree according to the type of the virtual DOM node in the original virtual DOM tree; and setting a layout style for a container corresponding to the picture, and rendering the picture to a page according to the layout style and the real DOM tree. According to the method, the original virtual DOM tree comprising the virtual DOM nodes is created, the real DOM tree is constructed according to the types of the virtual DOM nodes, and then the picture is rendered on the page by combining the layout style, so that the wooden barrel layout of the picture is realized, the code amount is small, and the realization is simple.
Description
Technical Field
The invention relates to the field of computers, in particular to a method and a device for realizing picture barrel layout.
Background
The barrel layout is a popular web page layout structure for displaying a picture list. All pictures in the layout structure keep the original aspect ratio, all pictures in each row have the same height, and each row of pictures is guaranteed to be exactly full (except the last row). The effect of the barrel layout is shown in fig. 1.
In the prior art, when the wooden barrel layout is realized, hundreds of JavaScript scripts are needed to calculate the wooden barrel layout. The realization principle specifically comprises the following steps: in the process of traversing the picture array, according to the height, the width and the size of the container of the picture, the height, the width and the length-width ratio of each group of pictures displayed on the page are dynamically calculated so as to determine the height of each line of the picture list and the number of the pictures, and ensure that the length-width ratio of each picture is kept constant. The JavaScript is an transliterated script language, and is also a dynamic type, weak type, prototype-based language and built-in support type.
In the process of implementing the invention, the inventor finds that at least the following problems exist in the prior art:
(1) to ensure that each row of pictures are equal in height and the aspect ratio of each picture is constant, a large amount of calculation needs to be performed according to the height, width, container size and the like of the pictures, so that the code amount of the JavaScript script is large, and the implementation method is complex.
(2) If a certain picture fails to be loaded, the width and the height of the picture displayed on the page cannot be calculated, so that the calculated data of the row is lost, and the arrangement is disordered.
(3) Since the number of pictures displayed in each line needs to be calculated according to the width of the container, if the page size changes, that is, the width of the container changes, the picture list needs to be recalculated and rendered.
(4) When the picture is changed, all DOM nodes need to be directly operated, and rendering efficiency is low.
Disclosure of Invention
In view of this, embodiments of the present invention provide a method and an apparatus for implementing a picture barrel layout, in which an original virtual DOM tree including virtual DOM nodes is created, a real DOM tree is constructed according to types of the virtual DOM nodes, and a picture is rendered on a page in combination with a layout pattern, so that the picture barrel layout is implemented, a code amount is small, and implementation is simple.
To achieve the above object, according to an aspect of an embodiment of the present invention, a method for implementing a layout of a picture barrel is provided.
The method for realizing the layout of the picture wooden barrel comprises the following steps: acquiring picture data, and creating an original virtual DOM tree based on the picture data; recursively constructing a real DOM tree according to the type of the virtual DOM node in the original virtual DOM tree; and setting a layout style for a container corresponding to the picture, and rendering the picture to a page according to the layout style and the real DOM tree.
Optionally, the picture data includes picture address information, width information and height information of the picture; the types of the virtual DOM nodes comprise tags, attributes and child nodes; the creating of the original virtual DOM tree based on the picture data comprises: creating a div label, and setting the display width, the display height and the expansion factor of the picture under the style attribute of the div label; wherein the values of the display width and the expansion factor are set according to the width information and the height information; creating an img label, and setting the picture address information under the src attribute of the img label.
Optionally, the recursively constructing a real DOM tree includes: analyzing the virtual DOM node to attribute the virtual DOM node to a tag, an attribute or a child node; correspondingly creating a tag of a real DOM tree according to the tag name of the virtual DOM node; adding the attributes of the original virtual DOM tree to corresponding tags of the real DOM tree; and recursively creating child nodes of the real DOM tree according to the child nodes of the labels and the attributes in the original virtual DOM tree, and mounting the child nodes to the labels and the attributes corresponding to the real DOM tree.
Optionally, the setting a layout style for the container corresponding to the picture includes: setting an elastic layout, a container attribute and an item attribute for a container corresponding to the picture; wherein the container attribute comprises a flex-wrap attribute and the item attribute comprises a flex-grow attribute.
Optionally, the method further comprises: when the acquired picture data or the page size changes, updating the original virtual DOM tree to obtain a new virtual DOM tree; comparing the new virtual DOM tree with the original virtual DOM tree to obtain difference data; and updating the difference data into the real DOM tree to re-render the page.
To achieve the above object, according to another aspect of the embodiments of the present invention, an apparatus for implementing a picture barrel layout is provided.
The device for realizing the layout of the picture wooden barrel comprises: the creation module is used for acquiring picture data and creating an original virtual DOM tree based on the picture data; the building module is used for recursively building a real DOM tree according to the type of the virtual DOM node in the original virtual DOM tree; and the rendering module is used for setting a layout style for the container corresponding to the picture so as to render the picture on a page according to the layout style and the real DOM tree.
Optionally, the picture data includes picture address information, width information and height information of the picture; the types of the virtual DOM nodes comprise tags, attributes and child nodes; the creation module is further configured to: creating a div label, and setting the display width, the display height and the expansion factor of the picture under the style attribute of the div label; wherein the values of the display width and the expansion factor are set according to the width information and the height information; and creating an img tag, and setting the picture address information under the src attribute of the img tag.
Optionally, the building module is further configured to: analyzing the virtual DOM node to attribute the virtual DOM node to a tag, an attribute or a child node; correspondingly creating a tag of a real DOM tree according to the tag name of the virtual DOM node; adding the attributes of the original virtual DOM tree to corresponding tags of the real DOM tree; and recursively creating child nodes of the real DOM tree according to the child nodes of the labels and the attributes in the original virtual DOM tree, and mounting the child nodes to the labels and the attributes corresponding to the real DOM tree.
Optionally, the rendering module is further configured to: setting an elastic layout, a container attribute and an item attribute for a container corresponding to the picture; wherein the container attribute comprises a flex-wrap attribute and the item attribute comprises a flex-grow attribute.
Optionally, the apparatus further comprises: the updating module is used for updating the original virtual DOM tree to obtain a new virtual DOM tree when the obtained picture data changes or the page size changes; comparing the new virtual DOM tree with the original virtual DOM tree to obtain difference data; and updating the difference data into the real DOM tree to re-render the page.
To achieve the above object, according to still another aspect of embodiments of the present invention, there is provided an electronic apparatus.
An electronic device of an embodiment of the present invention includes: one or more processors; a storage device, configured to store one or more programs, which when executed by the one or more processors, cause the one or more processors to implement a method for implementing a picture barrel layout according to an embodiment of the present invention.
To achieve the above object, according to still another aspect of embodiments of the present invention, there is provided a computer-readable medium.
A computer readable medium of an embodiment of the present invention stores thereon a computer program, which when executed by a processor implements a method of implementing a picture barrel layout of an embodiment of the present invention.
One embodiment of the above invention has the following advantages or benefits: the method comprises the steps that an original virtual DOM tree comprising virtual DOM nodes is created, a real DOM tree is constructed according to the types of the virtual DOM nodes, and then a picture is rendered on a page by combining a layout style, so that the wooden barrel layout of the picture is realized, the code amount is small, and the realization is simple; setting the display width and the display height of the picture in the virtual DOM node, and when the picture loading fails, not influencing the overall layout and the arrangement mode of other pictures; by setting the container attribute and the project attribute for the pictures, when the page size changes, the pictures do not need to be reloaded, and the line can be automatically changed and the line height can be adjusted; when the data change, the virtual DOM node is automatically updated, the difference data between the original virtual DOM node and the new virtual DOM node is updated to the real DOM tree, and the changed part in the real DOM tree is only needed to be modified subsequently, so that the efficient rendering of the picture is ensured.
Further effects of the above-mentioned non-conventional alternatives will be described below in connection with the embodiments.
Drawings
The drawings are included to provide a better understanding of the invention and are not to be construed as unduly limiting the invention. Wherein:
FIG. 1 is a diagram of the effect of the layout of a wooden barrel in the prior art;
FIG. 2 is a schematic diagram of the main steps of a method for implementing a picture barrel layout according to an embodiment of the present invention;
FIG. 3 is a schematic diagram of an implementation of a virtual DOM tree, according to an embodiment of the present invention;
FIG. 4 is a schematic diagram of a main flow of a method for implementing a picture barrel layout according to an embodiment of the present invention;
FIG. 5 is a schematic diagram of a page layout effect of a current page size according to an embodiment of the invention;
FIG. 6 is a schematic diagram illustrating a page layout effect after a page size is changed according to an embodiment of the present invention;
FIG. 7 is a schematic diagram of the main modules of an apparatus for implementing a picture barrel layout according to an embodiment of the present invention;
FIG. 8 is an exemplary system architecture diagram in which embodiments of the present invention may be employed;
FIG. 9 is a schematic diagram of a computer apparatus suitable for use in an electronic device to implement an embodiment of the invention.
Detailed Description
Exemplary embodiments of the present invention are described below with reference to the accompanying drawings, in which various details of embodiments of the invention are included to assist understanding, and which are to be considered as merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the invention. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
Fig. 2 is a schematic diagram of main steps of a method for implementing a picture barrel layout according to an embodiment of the present invention. As shown in fig. 2, the method for implementing layout of picture wooden barrel according to the embodiment of the present invention mainly includes the following steps:
step S201: and acquiring picture data, and creating an original virtual DOM tree based on the picture data. The client acquires picture data from the server, wherein the picture data comprises picture address information, width information and height information of the picture. The DOM is a Document Object Model (DOM), which is a standard programming interface for processing extensible markup language. The virtual DOM is an abstraction layer built on the basis of the real DOM. The virtual DOM tree comprises virtual DOM nodes, and the types of the virtual DOM nodes comprise tags, attributes or child nodes. After obtaining picture data, a client creates a div label, and sets the display width, the display height and the expansion factor of the picture under the style attribute of the div label; creating an img label, and setting the picture address information under the src attribute of the img label; wherein the values of the display width and the expansion factor are set according to width information and height information in the picture information.
Step S202: and recursively constructing a real DOM tree according to the type of the virtual DOM node in the original virtual DOM tree. Firstly, analyzing the virtual DOM node to attribute the virtual DOM node to a label, an attribute or a child node; then correspondingly creating a tag of the real DOM tree according to the tag name of the virtual DOM node; then adding the attribute of the original virtual DOM tree to a corresponding tag of the real DOM tree; and finally, recursively creating child nodes of the real DOM tree according to the child nodes of the labels and the attributes in the original virtual DOM tree, and mounting the child nodes to the corresponding labels and the attributes in the real DOM tree.
Step S203: and setting a layout style for a container corresponding to the picture, and rendering the picture to a page according to the layout style and the real DOM tree. The container is a parent element to which an elastic layout needs to be added, and the layout style comprises the elastic layout, a container attribute and an item attribute. And the picture is acquired from the server by the browser according to the picture address information. The step sets up the elastic layout, the container attribute and the project attribute for the container corresponding to the picture. The container attribute comprises a flex-wrap attribute and is used for realizing automatic line feed when one axis is not arranged. The item attributes comprise a flex-grow attribute, and the value of the flex-grow attribute needs to be far larger than the maximum value of the flex-grow attribute of the last line of pictures in the picture list, so as to avoid the situation that the last line of pictures still fills the whole line when the number of the last line of pictures is small, and the pictures are too long and flat. After a real DOM tree is constructed and the layout style is set, the DOM tree is handed to a browser to be drawn to a page, and then the wooden barrel layout of the webpage picture can be achieved.
FIG. 3 is a schematic diagram of an implementation of a virtual DOM tree, according to an embodiment of the present invention. As shown in fig. 3, the fact maintains a virtual DOM tree in the memory and reads or writes to the virtual DOM tree. When the picture data changes, React automatically updates the virtual DOM tree, then compares the new virtual DOM tree with the old virtual DOM tree to find a changed part (diff), then puts the diff into a queue (patch), and finally updates the diffs in batch into the real DOM tree. The virtual DOM has a batch and efficient diff algorithm, because the virtual DOM can ensure that only the portions of the page that actually change are actually DOM operated, the entire page can be refreshed at any time without worrying about performance issues. The scheme utilizes the characteristics and the principle of the virtual DOM, only changes the changed part, and ensures the efficient rendering of the picture list. Wherein, React is a JavaScript library for constructing a user interface.
Fig. 4 is a schematic main flow diagram of a method for implementing a picture barrel layout according to an embodiment of the present invention. As shown in fig. 4, the method for implementing layout of picture wooden barrel according to the embodiment of the present invention mainly includes the following steps:
step S401: sending a picture identifier of a request for obtaining a picture to a server, receiving picture data returned by the server, and creating an original virtual DOM tree according to the picture data. The client sends a picture identifier for requesting to acquire a picture to the server; and after receiving the picture identification, the server feeds back the picture data corresponding to the picture identification to the client. The picture data comprises picture address information, width information and height information of the picture.
The original virtual DOM tree comprises a plurality of virtual DOM nodes, the types of the virtual DOM nodes comprise tags, attributes and sub-nodes, and the tags comprise div tags and img tags; the attributes of the div tag include a style attribute, and the style attribute is used for setting the style of the DOM node and may include any one or more of the following: color, background-color, font-size, width, flex-grow, height, and other attributes; the attributes of the img tag comprise an src attribute and an alt attribute, wherein the src attribute is used for identifying picture address information (namely the URL of the picture), and the alt attribute is used for identifying replacement text when the picture cannot be displayed. The URL is a Uniform Resource Locator, and is called Uniform Resource Locator in english. Since the JS (javascript) object in memory is operated significantly faster than the real DOM node, the JS object can be used to create the virtual DOM node so that the update of the page can be fully reflected in the JS object.
In an embodiment, the implementation process of creating the original virtual DOM tree is as follows: creating a div tag by using JS language, and adding a style attribute to the div tag; and then creating an img label, and setting picture address information for the img label, so as to obtain the original virtual DOM node. The specific implementation code may be:
in an embodiment, the value of the height attribute (i.e., the display height) in the style attribute is set to auto (auto). The value of the width attribute is set to be a preset width-height ratio, and the size of the specific width-height ratio can be adjusted automatically. The value of the width attribute (i.e., the display width) determines that there are several pictures in a line, and px in the width attribute is a pixel and is a unit of the display width. The value of the flex-grow attribute is set to be a preset width-height ratio, and the size of the specific width-height ratio can be adjusted by self. The flex-grow attribute determines how to allocate the remaining space when the parent element has the remaining space in the space allocation direction, and the value is a weight, and the default is 0, and the remaining space is allocated according to the weight. According to the scheme, the layout of the wooden barrel of the picture list is realized by setting the flex-grow attribute, and the situation that picture arrangement is carried out after a large amount of calculation is carried out by using a JavaScript script is avoided.
Step S402: and recursively constructing a real DOM tree according to the type of the virtual DOM node in the original virtual DOM tree. The virtual DOM nodes are analyzed first to determine which virtual DOM nodes belong to the tags, which attributes belong to the attributes, and which belong to the children, and a method for creating the real DOM nodes in the real DOM tree and a method for adding the attributes are selected. Then, calling a createElement method to correspondingly create a label of the real DOM tree according to the label name of the virtual DOM node; adding all the attributes of each label in the original virtual DOM tree to the corresponding label of the real DOM tree; if the label and the attribute of the original virtual DOM tree have child nodes, the createElement method is recursively called to create the child nodes of the real DOM tree, and the child nodes are mounted on the corresponding label and attribute in the real DOM tree through the appidCHild method. In the process of constructing the real DOM tree, the browser acquires a picture corresponding to the picture address information from the server.
Step S403: and setting a layout style for the container corresponding to the picture according to the user requirement. The container is a parent element needing to add an elastic layout (Flex layout), and the container defaults to have two axes: horizontal major axis and vertical cross axis, an item refers to each sub-element in the container. The layout style includes an elastic layout, a container property, and an item property. After the flexible layout is set for the container, the content of the container can be displayed in the flexible layout instead of the display mode of the conventional document flow. The implementation statement for setting the elastic layout is: display is flex.
The number of the container attributes is 6, and the container attributes are respectively a flex-direction attribute, a flex-wrap attribute, a flex-flow attribute, a just-content attribute, an align-items attribute and an align-content attribute. Wherein the flex-direction attribute is used for defining the direction of the main shaft; the flex-wrap attribute is used for defining how to wrap if one axis is not aligned; the flex-flow attribute is a shorthand form of flex-direction and flex-wrap, the default value is row nowwrap, the row marks that the main shaft is in the horizontal direction, the starting point is at the left end, and nowwrap indicates that no line change is performed; the just-content attribute is used for defining the alignment mode of the item on the main shaft; the align-items attribute is used to define how items align on the cross-axis; the align-content attribute is used to define the alignment of multiple axes, and if an item has only one axis, the attribute does not work. In an embodiment, the flex-wrap attribute is set to wrap, the corresponding statement is flex-wrap: wrap, automatic wrapping is realized if one axis is not down, and the first line is at the top of the container.
The item attributes are also 6, which are respectively an order attribute, a flex-grow attribute, a flex-basis attribute, a flex attribute and an align-self attribute. The order attribute is used for defining the arrangement sequence of the items, and the smaller the numerical value is, the earlier the arrangement is, the default is 0; the flex-grow attribute is used to define the magnification of the item, defaults to 0, i.e., if there is remaining space, it is not magnified either; the flex-shrink attribute is used to define the reduction scale of an item, defaults to 1, i.e., if there is insufficient space, the item will be reduced; the flex-basis attribute is used for defining the main shaft space occupied by the item (if the main shaft is horizontal, the attribute is set, which is equivalent to setting the width of the item, and the original width will be invalid); the flex attribute is short for flex-grow, flex-shrink and flex-base, the default value is 01 auto, and the latter two attributes are optional; the align-self attribute is used for defining the arrangement mode of the single item on the cross axis, and can cover the align-items attribute on the container. In the embodiment, by setting the flex-grow attribute of the after pseudo class of the container, the situation that when the number of the last line of pictures is small, the whole line is still full to cause the picture to be too flat and long is avoided, and the implementation statement can be as follows: flex-grow: 9999999. Wherein, the after pseudo class is used for inserting an element into the container finally to play a role of occupying.
Step S404: and rendering the picture on a page according to the layout style and the real DOM tree. Merging the layout style and the real DOM tree to obtain a rendering tree, wherein the middle finger of the rendering tree comprises a node (namely an image obtained according to the image address information) required by the rendering page; and calculating the position and the size of each node in the rendering tree so as to render and draw each node of the rendering tree onto a page of the browser.
Step S405: and when the acquired picture data changes or the page size changes, updating the original virtual DOM tree to obtain a new virtual DOM tree. And if the acquired picture data changes, for example, the picture address information of the fifth picture is changed compared with the picture data acquired in the last request, updating a corresponding virtual DOM node in the virtual DOM tree created or updated in the last time of acquiring the picture data to obtain a new virtual DOM tree. For another example, three pictures are requested to be obtained in the last time, and two pictures are requested to be obtained in the current time. The page size changes, for example, the browser page changes from 2048 × 1153 to 1280 × 1024.
Step S406: and comparing the new virtual DOM tree with the original virtual DOM tree to obtain difference data. The types of differences between the two virtual DOM trees include deletion of a tag, change of tag type, change of attribute, and moving, adding, deleting child nodes. A change in the tag type, such as from a div tag to a P tag; the change of property, such as from item1 property to item4 property. The difference of the two virtual DOM trees can be compared by calling a diff function, wherein the diff function comprises a diffProps function, a dfsswalk function and a diffChildren function, the diffProps function is used for comparing the difference of the two attributes, and the dfsswalk function is used for traversing the two virtual DOM trees with depth first; the diffChildren function is used to compare the differences of the child nodes. When comparing differences, only tags, attributes, or child nodes of the same hierarchy are compared.
Step S407: and updating the difference data into the real DOM tree to re-render the page. And calling an applyPatches function to update the real DOM tree according to different difference types in the difference data. And rendering and drawing the changed pictures on a page according to the layout style and the updated real DOM tree.
Fig. 5 is a schematic diagram of a page layout effect of a current page size according to an embodiment of the present invention, and fig. 6 is a schematic diagram of a page layout effect after a change in page size according to an embodiment of the present invention. FIG. 5 shows the page layout effect of a picture with a page size of 2048 × 1153; fig. 6 shows the page layout effect of the picture after the page size is changed from 2048 × 1153 to 1280 × 1024. As can be seen from fig. 5 and 6, when the page size changes, the number of pictures displayed in each line, the display height of each line of pictures, and the length of each picture are automatically adjusted. The layout style is preset for the pictures, so that when the size of the page changes, the client does not need to reload the pictures, the lines can be automatically changed and the line height can be adjusted after one line of the pictures is full, and then the effect can be realized by re-rendering the pictures to the page.
According to the method for realizing the picture barrel layout, disclosed by the embodiment of the invention, the original virtual DOM tree comprising the virtual DOM nodes is created, the real DOM tree is constructed according to the types of the virtual DOM nodes, and the picture is rendered on the page by combining the layout pattern, so that the picture barrel layout is realized, the code amount is small, and the realization is simple; setting the display width and the display height of the picture in the virtual DOM node, and when the picture loading fails, not influencing the overall layout and the arrangement mode of other pictures; by setting the container attribute and the project attribute for the pictures, when the page size changes, the pictures do not need to be reloaded, and the line can be automatically changed and the line height can be adjusted; when the data change, the virtual DOM node is automatically updated, the difference data between the original virtual DOM node and the new virtual DOM node is updated to the real DOM tree, and the changed part in the real DOM tree is only needed to be modified subsequently, so that the efficient rendering of the picture is ensured.
Fig. 7 is a schematic diagram of main modules of an apparatus for implementing a picture barrel layout according to an embodiment of the present invention. As shown in fig. 7, the apparatus 700 for implementing layout of picture wooden barrel according to the embodiment of the present invention mainly includes:
a creating module 701, configured to obtain picture data, and create an original virtual DOM tree based on the picture data. The client acquires picture data from the server, wherein the picture data comprises picture address information, width information and height information of the picture. The virtual DOM tree comprises virtual DOM nodes, and the types of the virtual DOM nodes comprise tags, attributes or child nodes. After obtaining picture data, a client creates a div label, and sets the display width, the display height and the expansion factor of the picture under the style attribute of the div label; creating an img label, and setting the picture address information under the src attribute of the img label; wherein the values of the display width and the expansion factor are set according to the width information and the height information.
A building module 702, configured to recursively build a real DOM tree according to the type of the virtual DOM node in the original virtual DOM tree. The virtual DOM node is analyzed to be attributed to a label, an attribute or a child node; then correspondingly creating a tag of the real DOM tree according to the tag name of the virtual DOM node; then adding the attribute of the original virtual DOM tree to a corresponding tag of the real DOM tree; and finally, recursively creating child nodes of the real DOM tree according to the child nodes of the labels and the attributes in the original virtual DOM tree, and mounting the child nodes to the corresponding labels and the attributes in the real DOM tree.
And a rendering module 703, configured to set a layout pattern for a container corresponding to the picture, so as to render the picture onto a page according to the layout pattern and the real DOM tree. The container is a parent element to which an elastic layout needs to be added, and the layout style comprises the elastic layout, a container attribute and an item attribute. The step sets up the elastic layout, the container attribute and the project attribute for the container corresponding to the picture. The container attribute comprises a flex-wrap attribute and is used for realizing automatic line feed when one axis is not arranged. The item attributes comprise a flex-grow attribute, and the value of the flex-grow attribute needs to be far larger than the maximum value of the flex-grow attribute of the last line of pictures in the picture list, so as to avoid the situation that the last line of pictures still fills the whole line when the number of the last line of pictures is small, and the pictures are too long and flat. After a real DOM tree is constructed and a layout style is set, a browser acquires a corresponding picture from a server according to picture address information, and then the picture is rendered to a page to realize the barrel layout of the webpage picture.
In addition, the apparatus 700 for implementing layout of picture wooden barrel according to the embodiment of the present invention may further include: an updating module (not shown in fig. 7) configured to update the original virtual DOM tree to obtain a new virtual DOM tree when the obtained picture data changes or the page size changes; comparing the new virtual DOM tree with the original virtual DOM tree to obtain difference data; and updating the difference data into the real DOM tree to re-render the page.
From the above description, it can be seen that the wood barrel layout of the picture is realized, the code amount is small, and the realization is simple by creating the original virtual DOM tree including the virtual DOM nodes, constructing the real DOM tree according to the types of the virtual DOM nodes, and then rendering the picture on the page in combination with the layout pattern; setting the display width and the display height of the picture in the virtual DOM node, and when the picture loading fails, not influencing the overall layout and the arrangement mode of other pictures; by setting the container attribute and the project attribute for the pictures, when the page size changes, the pictures do not need to be reloaded, and the line can be automatically changed and the line height can be adjusted; when the data change, the virtual DOM node is automatically updated, the difference data between the original virtual DOM node and the new virtual DOM node is updated to the real DOM tree, and the changed part in the real DOM tree is only needed to be modified subsequently, so that the efficient rendering of the picture is ensured.
Fig. 8 illustrates an exemplary system architecture 800 of a method for implementing a picture barrel layout or an apparatus for implementing a picture barrel layout to which embodiments of the present invention may be applied.
As shown in fig. 8, the system architecture 800 may include terminal devices 801, 802, 803, a network 804, and a server 805. The network 804 serves to provide a medium for communication links between the terminal devices 801, 802, 803 and the server 805. Network 804 may include various types of connections, such as wire, wireless communication links, or fiber optic cables, to name a few.
A user may use the terminal devices 801, 802, 803 to interact with a server 805 over a network 804 to receive or send messages or the like. The terminal devices 801, 802, 803 may have installed thereon various communication client applications, such as shopping applications, web browser applications, search applications, instant messaging tools, mailbox clients, social platform software, and the like.
The terminal devices 801, 802, 803 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop portable computers, desktop computers, and the like.
The server 805 may be a server that provides various services, such as a background management server that supports acquisition requests including picture identifications sent by users using the terminal devices 801, 802, 803. The background management server may analyze and perform other processing on the received acquisition request, and feed back a processing result (e.g., picture data corresponding to the icon identifier) to the terminal device.
It should be noted that the method for implementing the layout of the picture barrel provided in the embodiment of the present application is generally executed by the terminal devices 801, 802, and 803, and accordingly, the apparatus for implementing the layout of the picture barrel is generally disposed in the terminal devices 801, 802, and 803.
It should be understood that the number of terminal devices, networks, and servers in fig. 8 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
The invention also provides an electronic device and a computer readable medium according to the embodiment of the invention.
The electronic device of the present invention includes: one or more processors; a storage device, configured to store one or more programs, which when executed by the one or more processors, cause the one or more processors to implement a method for implementing a picture barrel layout according to an embodiment of the present invention.
The computer readable medium of the present invention has stored thereon a computer program, which when executed by a processor implements a method of implementing a picture barrel layout of an embodiment of the present invention.
Referring now to FIG. 9, shown is a block diagram of a computer system 900 suitable for use in implementing an electronic device of an embodiment of the present invention. The electronic device shown in fig. 9 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present invention.
As shown in fig. 9, the computer system 900 includes a Central Processing Unit (CPU)901 that can perform various appropriate actions and processes in accordance with a program stored in a Read Only Memory (ROM)902 or a program loaded from a storage section 908 into a Random Access Memory (RAM) 903. In the RAM 903, various programs and data necessary for the operation of the computer system 900 are also stored. The CPU 901, ROM 902, and RAM 903 are connected to each other via a bus 904. An input/output (I/O) interface 905 is also connected to bus 904.
The following components are connected to the I/O interface 905: an input portion 906 including a keyboard, a mouse, and the like; an output section 907 including components such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker; a storage portion 908 including a hard disk and the like; and a communication section 909 including a network interface card such as a LAN card, a modem, or the like. The communication section 909 performs communication processing via a network such as the internet. The drive 910 is also connected to the I/O interface 905 as necessary. A removable medium 911 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 910 as necessary, so that a computer program read out therefrom is mounted into the storage section 908 as necessary.
In particular, the processes described above with respect to the main step diagrams may be implemented as computer software programs, according to embodiments of the present disclosure. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program containing program code for performing the method illustrated in the main step diagram. In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 909, and/or installed from the removable medium 911. The above-described functions defined in the system of the present invention are executed when the computer program is executed by a Central Processing Unit (CPU) 901.
It should be noted that the computer readable medium shown in the present invention can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present invention, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present invention, however, a computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The modules described in the embodiments of the present invention may be implemented by software or hardware. The described modules may also be provided in a processor, which may be described as: a processor includes a creation module, a construction module, and a rendering module. The names of these modules do not in some cases constitute a limitation on the module itself, for example, the creation module may also be described as "a module that takes picture data based on which the original virtual DOM tree is created".
As another aspect, the present invention also provides a computer-readable medium that may be contained in the apparatus described in the above embodiments; or may be separate and not incorporated into the device. The computer readable medium carries one or more programs which, when executed by a device, cause the device to comprise: acquiring picture data, and creating an original virtual DOM tree based on the picture data; recursively constructing a real DOM tree according to the type of the virtual DOM node in the original virtual DOM tree; and setting a layout style for a container corresponding to the picture, and rendering the picture to a page according to the layout style and the real DOM tree.
From the above description, it can be seen that the wood barrel layout of the picture is realized, the code amount is small, and the realization is simple by creating the original virtual DOM tree including the virtual DOM nodes, constructing the real DOM tree according to the types of the virtual DOM nodes, and then rendering the picture on the page in combination with the layout pattern; setting the display width and the display height of the picture in the virtual DOM node, and when the picture loading fails, not influencing the overall layout and the arrangement mode of other pictures; by setting the container attribute and the project attribute for the pictures, when the page size changes, the pictures do not need to be reloaded, and the line can be automatically changed and the line height can be adjusted; when the data change, the virtual DOM node is automatically updated, the difference data between the original virtual DOM node and the new virtual DOM node is updated to the real DOM tree, and the changed part in the real DOM tree is only needed to be modified subsequently, so that the efficient rendering of the picture is ensured.
The product can execute the method provided by the embodiment of the invention, and has corresponding functional modules and beneficial effects of the execution method. For technical details that are not described in detail in this embodiment, reference may be made to the method provided by the embodiment of the present invention.
The above-described embodiments should not be construed as limiting the scope of the invention. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions can occur, depending on design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.
Claims (12)
1. A method for realizing picture barrel layout is characterized by comprising the following steps:
acquiring picture data, and creating an original virtual DOM tree based on the picture data;
recursively constructing a real DOM tree according to the type of the virtual DOM node in the original virtual DOM tree;
and setting a layout style for a container corresponding to the picture, and rendering the picture to a page according to the layout style and the real DOM tree.
2. The method of claim 1, wherein the picture data comprises picture address information, width information and height information of a picture; the types of the virtual DOM nodes comprise tags, attributes and child nodes;
the creating of the original virtual DOM tree based on the picture data comprises:
creating a div label, and setting the display width, the display height and the expansion factor of the picture under the style attribute of the div label; wherein the values of the display width and the expansion factor are set according to the width information and the height information;
creating an img label, and setting the picture address information under the src attribute of the img label.
3. The method of claim 1, wherein said recursively building a real DOM tree comprises:
analyzing the virtual DOM node to attribute the virtual DOM node to a tag, an attribute or a child node;
correspondingly creating a tag of a real DOM tree according to the tag name of the virtual DOM node;
adding the attributes of the original virtual DOM tree to corresponding tags of the real DOM tree;
and recursively creating child nodes of the real DOM tree according to the child nodes of the labels and the attributes in the original virtual DOM tree, and mounting the child nodes to the labels and the attributes corresponding to the real DOM tree.
4. The method according to claim 1, wherein the setting a layout style for the container corresponding to the picture comprises: setting an elastic layout, a container attribute and an item attribute for a container corresponding to the picture; wherein the container attribute comprises a flex-wrap attribute and the item attribute comprises a flex-grow attribute.
5. The method according to any one of claims 1 to 4, further comprising:
when the acquired picture data or the page size changes, updating the original virtual DOM tree to obtain a new virtual DOM tree;
comparing the new virtual DOM tree with the original virtual DOM tree to obtain difference data;
and updating the difference data into the real DOM tree to re-render the page.
6. The utility model provides a realize device of picture vat overall arrangement which characterized in that includes:
the creation module is used for acquiring picture data and creating an original virtual DOM tree based on the picture data;
the building module is used for recursively building a real DOM tree according to the type of the virtual DOM node in the original virtual DOM tree;
and the rendering module is used for setting a layout style for the container corresponding to the picture so as to render the picture on a page according to the layout style and the real DOM tree.
7. The apparatus of claim 6, wherein the picture data comprises picture address information, width information and height information of a picture; the types of the virtual DOM nodes comprise tags, attributes and child nodes;
the creation module is further configured to:
creating a div label, and setting the display width, the display height and the expansion factor of the picture under the style attribute of the div label; wherein the values of the display width and the expansion factor are set according to the width information and the height information; and
creating an img label, and setting the picture address information under the src attribute of the img label.
8. The apparatus of claim 6, wherein the build module is further configured to:
analyzing the virtual DOM node to attribute the virtual DOM node to a tag, an attribute or a child node;
correspondingly creating a tag of a real DOM tree according to the tag name of the virtual DOM node;
adding the attributes of the original virtual DOM tree to corresponding tags of the real DOM tree; and
and recursively creating child nodes of the real DOM tree according to the child nodes of the labels and the attributes in the original virtual DOM tree, and mounting the child nodes to the labels and the attributes corresponding to the real DOM tree.
9. The apparatus of claim 6, wherein the rendering module is further configured to: setting an elastic layout, a container attribute and an item attribute for a container corresponding to the picture; wherein the container attribute comprises a flex-wrap attribute and the item attribute comprises a flex-grow attribute.
10. The apparatus of any of claims 6 to 9, further comprising: update module for
When the acquired picture data or the page size changes, updating the original virtual DOM tree to obtain a new virtual DOM tree;
comparing the new virtual DOM tree with the original virtual DOM tree to obtain difference data; and
and updating the difference data into the real DOM tree to re-render the page.
11. An electronic device, comprising:
one or more processors;
a storage device for storing one or more programs,
when executed by the one or more processors, cause the one or more processors to implement the method of any one of claims 1-5.
12. A computer-readable medium, on which a computer program is stored, which, when being executed by a processor, carries out the method according to any one of claims 1-5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810996058.4A CN110874251A (en) | 2018-08-29 | 2018-08-29 | Method and device for realizing picture wooden barrel layout |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810996058.4A CN110874251A (en) | 2018-08-29 | 2018-08-29 | Method and device for realizing picture wooden barrel layout |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110874251A true CN110874251A (en) | 2020-03-10 |
Family
ID=69714777
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810996058.4A Pending CN110874251A (en) | 2018-08-29 | 2018-08-29 | Method and device for realizing picture wooden barrel layout |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110874251A (en) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111475760A (en) * | 2020-04-07 | 2020-07-31 | 五八有限公司 | Method for serializing DOM (document object model) nodes and rendering method and device of DOM nodes |
| CN112506509A (en) * | 2020-12-11 | 2021-03-16 | 杭州安恒信息技术股份有限公司 | Method and related device for realizing tree control supporting big data rendering |
| CN114339295A (en) * | 2022-01-13 | 2022-04-12 | 山东捷瑞数字科技股份有限公司 | Method and system for updating and optimizing webpage live content data |
| CN114969236B (en) * | 2022-07-25 | 2022-11-25 | 倍智智能数据运营有限公司 | Method for realizing user-defined map annotation based on React |
| CN117539491A (en) * | 2024-01-09 | 2024-02-09 | 腾讯科技（深圳）有限公司 | Page layout method, page layout device, electronic device, storage medium and program product |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| NL1025125C2 (en) * | 2003-11-07 | 2005-05-10 | Backbase B V | Method, design and system for expanding a mark-up language. |
| CN105630902A (en) * | 2015-12-21 | 2016-06-01 | 明博教育科技股份有限公司 | Method for rendering and incrementally updating webpages |
| CN106168978A (en) * | 2016-07-25 | 2016-11-30 | 腾讯科技（深圳）有限公司 | The treating method and apparatus of pop-up in a kind of webpage |
| US20180113858A1 (en) * | 2016-10-21 | 2018-04-26 | Vmware, Inc. | Interface layout interference detection |
-
2018
- 2018-08-29 CN CN201810996058.4A patent/CN110874251A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| NL1025125C2 (en) * | 2003-11-07 | 2005-05-10 | Backbase B V | Method, design and system for expanding a mark-up language. |
| CN105630902A (en) * | 2015-12-21 | 2016-06-01 | 明博教育科技股份有限公司 | Method for rendering and incrementally updating webpages |
| CN106168978A (en) * | 2016-07-25 | 2016-11-30 | 腾讯科技（深圳）有限公司 | The treating method and apparatus of pop-up in a kind of webpage |
| US20180113858A1 (en) * | 2016-10-21 | 2018-04-26 | Vmware, Inc. | Interface layout interference detection |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111475760A (en) * | 2020-04-07 | 2020-07-31 | 五八有限公司 | Method for serializing DOM (document object model) nodes and rendering method and device of DOM nodes |
| CN111475760B (en) * | 2020-04-07 | 2023-11-14 | 五八有限公司 | Method for serializing DOM nodes, DOM node rendering method and device |
| CN112506509A (en) * | 2020-12-11 | 2021-03-16 | 杭州安恒信息技术股份有限公司 | Method and related device for realizing tree control supporting big data rendering |
| CN112506509B (en) * | 2020-12-11 | 2024-02-09 | 杭州安恒信息技术股份有限公司 | Method and related device for realizing that tree control supports big data rendering |
| CN114339295A (en) * | 2022-01-13 | 2022-04-12 | 山东捷瑞数字科技股份有限公司 | Method and system for updating and optimizing webpage live content data |
| CN114339295B (en) * | 2022-01-13 | 2024-03-22 | 山东捷瑞数字科技股份有限公司 | Method and system for updating and optimizing live webpage content data |
| CN114969236B (en) * | 2022-07-25 | 2022-11-25 | 倍智智能数据运营有限公司 | Method for realizing user-defined map annotation based on React |
| CN117539491A (en) * | 2024-01-09 | 2024-02-09 | 腾讯科技（深圳）有限公司 | Page layout method, page layout device, electronic device, storage medium and program product |
| CN117539491B (en) * | 2024-01-09 | 2024-04-26 | 腾讯科技（深圳）有限公司 | Page layout method, page layout device, electronic device, storage medium and program product |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110874251A (en) | Method and device for realizing picture wooden barrel layout | |
| US20220253588A1 (en) | Page processing method and related apparatus | |
| CN110109659A (en) | A kind of system that realizing front end applications scaffold and server | |
| US20090085921A1 (en) | Populate Web-Based Content Based on Space Availability | |
| CN113138827B (en) | Method, device, electronic equipment and medium for displaying data | |
| CN113778404A (en) | Page generation method and device | |
| CN112486482A (en) | Page display method and device | |
| CN113495730A (en) | Resource package generation and analysis method and device | |
| CN112926008B (en) | Method, device, electronic equipment and storage medium for generating form page | |
| CN112783887A (en) | Data processing method and device based on data warehouse | |
| CN105574114A (en) | On-line plotting method based on telecom resource management standard control library | |
| CN114756228A (en) | Page processing method, device, equipment and storage medium | |
| CN110807162A (en) | Method and device for loading occupation bitmap | |
| CN113282852A (en) | Method and device for editing webpage | |
| CN110457408B (en) | Personalized map downloading method, device, equipment and storage medium | |
| CN113784194A (en) | Embedding method and device of video player | |
| CN113220381A (en) | Click data display method and device | |
| CN112181408A (en) | Method and device for displaying view list on front page of application program | |
| CN111753226A (en) | Page loading method and device | |
| CN113419806B (en) | Image processing method, device, computer equipment and storage medium | |
| CN114371838A (en) | Method, device and equipment for rendering small program canvas and storage medium | |
| CN113626747A (en) | Method and device for generating breadcrumb navigation | |
| CN111124482B (en) | Configuration method and device for document information | |
| CN114528510A (en) | Webpage data processing method and device, electronic equipment and medium | |
| CN110908550B (en) | Operation processing method and device in cursor hovering state |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |