CN109375972B

CN109375972B - Method, apparatus, computer device and storage medium for multi-element layout

Info

Publication number: CN109375972B
Application number: CN201811080176.7A
Authority: CN
Inventors: 张强
Original assignee: Guangzhou Shiyuan Electronics Thecnology Co Ltd; Guangzhou Shirui Electronics Co Ltd
Current assignee: Guangzhou Shiyuan Electronics Thecnology Co Ltd; Guangzhou Shirui Electronics Co Ltd
Priority date: 2018-09-17
Filing date: 2018-09-17
Publication date: 2022-03-08
Anticipated expiration: 2038-09-17
Also published as: CN109375972A

Abstract

The invention relates to a method and a device for multi-element layout, computer equipment and a storage medium, which are applied to the technical field of page typesetting. The method comprises the following steps: acquiring elements to be laid out of a plurality of categories selected in a page, and acquiring recommended layout options selected by a user; and the elements to be laid out of the multiple categories are laid out according to the recommended layout options, so that the elements to be laid out are displayed in the page at equal intervals according to the categories. The embodiment of the invention solves the problem of low layout efficiency of multi-class elements in the page, simplifies user operation and improves the layout efficiency of the page elements.

Description

Method, apparatus, computer device and storage medium for multi-element layout

Technical Field

The present invention relates to the field of page composition technology, and in particular, to a method, an apparatus, a computer device, and a storage medium for multi-element layout.

Background

With the development of computer technology, people increasingly customize electronic demonstration files such as courseware, meeting PPT and the like which are exclusive to people through computer equipment. In the process of implementing the invention, the inventor finds that elements such as pictures, texts and even audios and videos are often involved in an electronic presentation file, and when a user customizes a file page, in order to have content and page aesthetics, layout adjustment is often required to be performed on various elements in the page, for example, the page element layout is performed in a typesetting mode that the texts are uniformly displayed above the page and the pictures are uniformly displayed below the page; however, to achieve the desired effect, the user needs to adjust the elements one by one, or category by category.

Therefore, the prior art has the problem of low layout efficiency for multi-class elements in a page.

Disclosure of Invention

In view of the foregoing, it is necessary to provide a method, an apparatus, a computer device, and a storage medium for multi-element layout, which are directed to the problem that the layout efficiency of multi-class elements in a page is low in the existing manner.

According to a first aspect of the invention, there is provided a method of multi-element layout, comprising:

receiving a first operation for selecting elements in a page, and taking the elements selected by the first operation as elements to be laid out; the elements to be laid out comprise elements of a plurality of categories;

receiving a second operation for selecting a recommended layout option;

displaying the elements to be laid out according to a target layout style, so that the elements to be laid out are displayed in a page at equal intervals according to categories; the target layout style is a layout style of element samples in a target layout option, and the target layout option is a recommended layout option selected by the second operation.

In one embodiment, the receiving a first operation for selecting elements in a page, and taking the elements selected by the first operation as elements to be laid out includes:

receiving area selection operation acted in the page to obtain a selected area;

and taking the elements in the selected area as elements to be laid out.

In one embodiment, the causing of the elements to be laid out to be displayed in the page at equal intervals according to categories includes:

enabling the elements to be laid out to be displayed in a target area in a page at intervals according to categories;

the target area is a local area in the entire page area.

In one embodiment, the target area is a minimum wrapping rectangular area of elements to be laid out in a page;

alternatively, the target area is the selected area.

In one embodiment, the displaying the elements to be laid out according to the target layout style, so that the elements to be laid out are displayed in the page at equal intervals according to the categories includes:

if the target layout style is left-right layout/right-left layout, the elements to be laid out are laid out transversely according to categories, and the elements to be laid out are displayed in a target area in a page transversely at equal intervals according to the categories after layout;

and if the target layout style is up-down layout/down-up layout, the elements to be laid out are vertically laid out according to the categories, and the elements to be laid out are vertically displayed in the target area of the page at equal intervals according to the categories after layout.

In one embodiment, the transversely laying out the elements to be laid out according to categories includes:

displaying the elements to be laid out in the same category in the elements to be laid out according to columns to obtain element columns corresponding to the same category;

and displaying a plurality of element columns corresponding to the plurality of categories in a target area in the page at equal intervals from left to right/from right to right.

In one embodiment, the displaying the elements to be laid out in the same category in the elements to be laid out in columns to obtain the element columns corresponding to the same category includes:

acquiring the number of elements to be laid out in the same category in the elements to be laid out;

calculating the number of columns occupied by the elements to be laid out in the same category according to the number;

and displaying the elements to be laid out in the same category according to columns to obtain element columns, wherein the element columns comprise columns with corresponding column numbers.

In one embodiment, the receiving a first operation for selecting an element in a page, and taking the element selected by the first operation as an element to be laid out, then further includes:

storing elements to be laid out of different types into different arrays, and storing elements to be laid out of the same type into the same array;

the method for displaying the elements to be laid out in the same category in the elements to be laid out according to the columns to obtain the element columns corresponding to the same category includes: and acquiring the elements to be laid out in the same category from the array, and displaying the elements to be laid out in the same category according to columns to obtain element columns corresponding to the same category.

In one embodiment, the displaying the plurality of element columns corresponding to the plurality of categories in the target area in the page at equal intervals from left to right/from right to right includes:

acquiring the column width occupied by the element column; the column width is obtained by the number of columns contained in the element column and the width of each column;

and displaying a plurality of element columns in the target area in the page at equal intervals from left to right/from right to right according to the column width.

In one embodiment, calculating the number of columns occupied by the elements of the same category according to the number includes:

acquiring the height of a target area as a first height;

acquiring the height of each element to be laid out in the same category as a second height;

and obtaining the number of columns occupied by the elements in the same category according to the first height and the second height.

In one embodiment, the displaying the elements to be laid out in the same category in columns to obtain element columns includes:

displaying the elements to be laid out in the same category according to columns, and acquiring the maximum width of the elements in the current column as the width of the current column when the current column is displayed;

determining the starting position of the next column according to the width of the current column, and displaying the next column according to the starting position;

and so on until an element column is obtained.

In one embodiment, the method further comprises the following steps:

displaying the element columns in a centered manner in a height direction of a target area;

and/or the presence of a gas in the gas,

each column element in the element column is displayed in a centered manner in the width direction of each column.

In one embodiment, the method further comprises the following steps:

and if the number of the columns occupied by the elements to be laid out in the same category is 1, displaying the elements to be laid out in the same category into a column at equal intervals.

In one embodiment, the vertically laying out the elements to be laid out according to categories includes:

displaying the elements to be laid out in the same category in the elements to be laid out according to rows to obtain element rows corresponding to the same category;

and displaying a plurality of element rows corresponding to the plurality of categories in a target area in the page at equal intervals from top to bottom/from bottom to top.

In one embodiment, the displaying the elements of the same category in the elements to be laid out according to rows to obtain the element rows corresponding to the same category includes:

calculating the number of lines occupied by the elements to be laid out in the same category according to the number;

displaying the elements to be laid out in the same category according to rows to obtain element rows; the element row contains a row corresponding to the number of rows.

the method for displaying the elements to be laid out in the same category in the elements to be laid out according to the rows to obtain the element rows corresponding to the same category includes: and obtaining the elements to be laid out in the same category from the array, and displaying the elements in the same category according to rows to obtain the element rows corresponding to the same category.

In one embodiment, the displaying, at equal intervals from top to bottom/bottom to top, a plurality of element rows corresponding to a plurality of categories in a target area in a page includes:

acquiring the row height occupied by the element row; the line height is obtained by the line number contained in the element line and the height of each line;

and displaying a plurality of element rows from top to bottom/bottom to top at equal intervals in a target area in the page according to the row height.

In one embodiment, calculating the number of rows occupied by the elements to be laid out in the same category according to the number includes:

acquiring the width of a target area as a first width;

acquiring the width of each element in the elements to be laid out in the same category as a second width;

and obtaining the line number occupied by the elements to be laid out in the same category according to the first width and the second width.

In one embodiment, the displaying the elements to be laid out in the same category according to rows to obtain element rows includes:

sequentially displaying the elements of the same category according to rows, and acquiring the maximum height of the elements in the current row as the height of the current row when the current row is displayed;

determining the starting position of the next line according to the height of the current line, and displaying the next line according to the starting position;

and so on until an element row is obtained.

In one embodiment, the method further comprises the following steps:

displaying the element row in a centered manner in a width direction of a target area;

and/or the presence of a gas in the gas,

in the height direction of the rows, the row elements in the element row are displayed in a centered manner.

In one embodiment, the method further comprises the following steps:

and if the number of lines occupied by the elements to be laid out in the same category is 1, displaying the elements to be laid out in the same category into a line at equal intervals.

displaying a layout window, wherein the layout window comprises a plurality of selectable recommended layout options.

In one embodiment, the receiving a second operation for selecting a recommended layout option, and taking the recommended layout option selected by the second operation as a target layout option, then further includes:

and closing the layout window.

In one embodiment, the element categories included in the element to be laid out include at least two of text, image, audio, video and flash.

According to a second aspect of the present invention, there is provided an apparatus for multi-element layout, comprising:

the element acquisition module is used for receiving a first operation for selecting elements in a page and taking the elements selected by the first operation as elements to be laid out; the elements to be laid out comprise elements of a plurality of categories;

the layout option acquisition module is used for receiving a second operation for selecting the recommended layout option;

the layout processing module is used for displaying the elements to be laid out according to a target layout style, so that the elements to be laid out are displayed in a page at equal intervals according to categories; the target layout style is a layout style of element samples in a target layout option, and the target layout option is a recommended layout option selected by the second operation.

In one embodiment, the element obtaining module includes:

the area acquisition unit is used for receiving area selection operation acted in the page to obtain a selected area;

and the element acquisition unit is used for taking the elements in the selected area as elements to be laid out.

In one embodiment, the layout processing module is specifically configured to display the elements to be laid out according to a target layout style, so that the elements to be laid out are displayed in a target area of a page at equal intervals according to categories; the target area is a local area in the entire page area.

In one embodiment, the layout processing module includes:

the first layout unit is used for transversely laying out the elements to be laid out according to categories if the target layout style is left-right layout/right-left layout, and displaying the elements to be laid out in a target area in a page at equal intervals in the transverse direction according to the categories after layout;

and the second layout unit is used for vertically laying out the elements to be laid out according to the categories if the target layout style is vertical layout/vertical layout, and displaying the elements to be laid out in the target area in the page at equal intervals in the vertical direction according to the categories after the layout.

In one embodiment, the first layout unit includes:

the first processing subunit is used for displaying the elements to be laid out in the same category in the elements to be laid out according to columns to obtain element columns corresponding to the same category;

and the second processing subunit is used for displaying the plurality of element columns corresponding to the plurality of categories in the target area in the page at equal intervals from left to right/from right to right.

In one embodiment, the second layout unit includes:

the third processing subunit is used for displaying the elements to be laid out in the same category in the elements to be laid out according to rows to obtain element rows corresponding to the same category;

and the fourth processing subunit is used for displaying the plurality of element rows corresponding to the plurality of categories in the target area in the page at equal intervals from top to bottom/from bottom to top.

According to a third aspect of the present invention, there is provided a computer device comprising a memory, a display screen with touch functionality and a processor; the memory for storing a computer program; the computer program, when executed by the processor, causes the processor to carry out the steps of the method of multi-element layout of any of the embodiments described above.

According to a fourth aspect of the present invention, there is provided a computer storage medium having stored thereon a computer program which, when executed by a processor, carries out the steps of the method of multi-element layout as in any of the embodiments described above.

By implementing the embodiment provided by the invention, when the page layout of multiple types of elements is required, the recommended layout options selected by a user are obtained by obtaining the multiple types of elements to be laid out selected in the page; and then the elements to be laid out of the plurality of categories can be laid out according to the layout style represented by the recommended layout option, so that the elements to be laid out are displayed in the page at equal intervals according to the categories. The elements are not required to be adjusted one by the user, and the layout adjustment of each category element is also not required to be carried out by the user, so that the layout efficiency of the multi-category elements is improved.

Drawings

FIG. 1 is a schematic flow chart diagram of a method of multi-element placement of an embodiment;

FIG. 2 is a schematic flow chart diagram of a method of multi-element placement of another embodiment;

FIG. 3A is a diagram illustrating an embodiment of obtaining elements to be laid out;

FIG. 3B is a diagram illustrating obtaining recommended layout options, according to an embodiment;

FIG. 3C is a diagram illustrating a layout result of the elements to be laid out in FIG. 3A;

FIG. 4A is a diagram illustrating obtaining elements to be laid out according to another embodiment;

FIG. 4B is a diagram illustrating a layout result of the elements to be laid out in FIG. 4A;

FIG. 5A is a diagram illustrating obtaining elements to be laid out according to another embodiment;

FIG. 5B is a diagram illustrating layout results of the elements to be laid out in FIG. 5A;

FIG. 6A is a diagram illustrating obtaining elements to be laid out according to yet another embodiment;

FIG. 6B is a diagram illustrating a layout result of the elements to be laid out in FIG. 6A;

FIG. 7A is a diagram illustrating elements to be laid out in another embodiment;

FIG. 7B is a diagram illustrating layout results of elements to be laid out in another embodiment;

FIG. 8 is a schematic flow chart diagram of a method of multi-element placement of yet another embodiment;

FIG. 9 is a diagram illustrating layout results of elements to be laid out according to an embodiment;

FIG. 10 is a diagram illustrating layout results of elements to be laid out according to another embodiment;

FIG. 11 is a schematic block diagram of an apparatus for a multi-element layout of an embodiment;

FIG. 12 is a diagram illustrating an internal structure of a computer device according to an embodiment.

Detailed Description

In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.

Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the application. The appearances of the phrase in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. It is explicitly and implicitly understood by one skilled in the art that the embodiments described herein can be combined with other embodiments.

The method for multi-element layout can be suitable for a computing technology device, and application software for manufacturing electronic presentation files such as courseware and meeting PPT are arranged in a computer; in addition, various other applications that may be desired by the user may be installed in the computing device, such as text editing applications, text presentation applications, instant messaging applications, image editing applications, social networking applications, e-commerce applications, search applications, browser applications, and so forth.

Optionally, the application software for creating the electronic presentation file may be pre-installed in the computer device, or may be downloaded from a third-party device or a server and installed for use after the computer device is started. The third-party device is not limited in the embodiment.

In particular, the computer device may be a laptop computer, a smartphone, a personal digital assistant, a media player, a navigation device, an email messaging device, a game console, an interactive smart tablet, a wearable device, an unmanned automobile, a smart home device, or a combination of any of these devices.

In one embodiment, as shown in FIG. 1, a method of multi-element layout is provided, in which the method is applicable to the computer device described above, comprising the steps of:

s110, receiving a first operation for selecting elements in a page, and taking the elements selected by the first operation as elements to be laid out; the elements to be laid out include elements of a plurality of categories.

In embodiments of the present invention, elements include, but are not limited to, text, images (including shapes and pictures), audio, video, flash, and the like; the elements to be laid out are the elements which are selected by the user in the page and are desired to be laid out. The element to be laid out includes elements of a plurality of categories, and it can be understood that the element to be laid out includes at least two categories of text, image, audio, video, and flash.

In some embodiments, the element to be laid out may be a page element directly selected by the user, for example, by sequentially clicking multiple elements in the page by means of a mouse, a touch, or the like. By the method, the elements to be laid out are obtained, and part of the elements can be flexibly selected from the multiple page elements to be used as the elements to be laid out.

In other embodiments, the elements to be laid out may also be page elements in the selected area, for example, by selecting an area in the page, all elements in the area are selected; for example, as shown in fig. 2, a rectangular area is framed in a page, the area includes 6 elements, specifically 3 texts, 2 graphics and 1 video, and the 6 elements are used as elements to be laid out; in addition, an area can be selected in a circle, and all elements in the selected area are selected as elements to be laid out. By selecting a plurality of page elements in a batch mode, a plurality of elements can be selected quickly, and the element selection efficiency is improved.

And S120, receiving a second operation for selecting the recommended layout option, and taking the recommended layout option selected by the second operation as a target layout option.

In an embodiment, before this step, a recommended layout option needs to be preset, and the recommended layout option is stored in a layout template library corresponding to the current login user. One or more recommended layout options may be provided, each recommended layout option representing a layout style for representing the overall display effect of a plurality of category elements, rather than the partial display effect of a single element, for example: the layout style may be that the text element is displayed above the image element, or the text element is displayed to the left of the image element, or the text element is displayed around the image element, or the text element, the image element, the video element are displayed at equal intervals, and so on.

S130, displaying the elements to be laid out according to a target layout style, so that the elements to be laid out are displayed in a page at equal intervals according to categories; the target layout style is a layout style of a sample of elements in the target layout option.

The layout method includes the steps that elements to be laid out are laid out according to a layout style represented by a recommended layout option, for example, if the layout style represented by the recommended layout option is a left-right layout, a plurality of elements to be laid out are laid out transversely according to categories, and the laid elements to be laid out are displayed in a page transversely at equal intervals according to the categories (for example, as shown in fig. 4B, 5B, 6B and 7); if the layout style represented by the recommended layout option is an up-down layout option, the multiple elements to be laid out are laid out vertically according to the categories, and the elements to be laid out are displayed in the page at equal intervals vertically according to the categories after the layout (for example, as shown in fig. 9).

By the element layout method of the embodiment, when the page layout of the elements of multiple categories is required, the elements to be laid out of the selected multiple categories in the page are obtained, and then the recommended layout options selected by the user are obtained; the elements to be laid out in the multiple categories can be quickly laid out according to the layout style represented by the recommended layout option, so that the elements to be laid out are displayed in the page at equal intervals according to the categories. The elements to be arranged are not required to be adjusted one by the user, and the elements to be arranged in each category are not required to be arranged and adjusted by the user, so that the arrangement efficiency of the elements in the categories is improved.

In some scenarios, after selecting an element to be laid out, a user may wish to re-lay out a plurality of elements to be laid out in the area where the elements were originally located. In order to achieve the corresponding correlation, in some embodiments, the plurality of elements to be laid out are displayed in the page according to the target layout style, and the plurality of elements to be laid out are laid out in a target area of the page according to the target layout style; for example, a minimum bounding rectangle region of an element to be laid out in a page; for example, as shown in fig. 2, a display effect of displaying a plurality of elements to be laid out in a page according to the element layout style represented by the target layout template may be as shown in fig. 3C. In addition, in some scenarios, the target area may also be a selected area corresponding to an element to be laid out in the page, or an entire page area. The selected area corresponding to the element to be laid out can be uniquely determined according to the upper left corner coordinate and the lower right corner coordinate of the selected area.

In some scenes, if the target area includes other elements besides the elements to be laid out, the elements to be laid out may be overlapped after being re-laid according to the target layout style; to address this problem, in an embodiment, the element to be laid out is controlled to be displayed on the topmost layer after being re-laid out according to the target layout style, so as to prevent being blocked by other elements. Or, in order not to affect the normal display of other elements, whether element overlapping exists after layout is detected in advance, and if yes, prompt information is output for the user to select whether to continue element layout.

By the embodiment of the invention, element layout can be performed in the local area of the page, so that the flexibility of page customization is improved, and the user experience is enhanced.

Further, in an embodiment, as shown in fig. 2, taking a text-image left-right layout as an example, a specific implementation process of displaying the elements to be laid out in the page at equal intervals according to categories is described; correspondingly, the method of multi-element layout comprises the steps of:

s210, receiving a first operation for selecting elements in a page, and taking the elements selected by the first operation as elements to be laid out; the elements to be laid out include elements of a plurality of categories.

Regarding the implementation of this step, reference may be made to the corresponding part of step S110 in the above embodiment.

In a specific example, the acquired elements to be laid out include 3 text elements and 3 image elements as shown in fig. 3A.

S220, displaying a layout window, wherein the layout window comprises a plurality of selectable recommended layout options.

After the user selects the element to be laid out, the system may be automatically triggered to display the layout window, or the layout window may be displayed according to an operation instruction of the user, where a display effect of the layout window is shown in fig. 3B, and the layout window is displayed as a small window, where the small window may include 4 recommended layout options. It will be appreciated that in other embodiments, the layout window may be displayed in other locations on the page.

In some scenarios, FIG. 3B shows a recommended layout option in which "T" represents an element of a text category and a gray rectangular box represents an element of an image category. The layout style represented by the recommended layout option 1 is that elements of image categories and text categories are arranged at equal intervals from left to right; the layout style represented by the recommended layout option 2 is that elements of text categories and image categories are laid out at equal intervals from left to right; the layout style represented by the recommended layout option 3 is that elements of image categories and text categories are laid out at equal intervals from top to bottom; the layout style represented by the recommended layout option 4 is that elements of the image category and the text category are laid out at equal intervals from bottom to top.

In some scenarios, the layout style represented by the recommended layout option only represents the relative position relationship of the elements of each category, and does not limit the number of the elements of each category, for example, in the recommended

layout option

4, 3 "T" and 3 gray rectangular squares, "T" is located above, gray rectangular squares are located below, and the represented layout style is: the elements of the text category are displayed above and the layout rule of the elements of the image category is displayed below, but the number of the elements of the text category and the elements of the image category may be one or more, and is not required to be necessarily 3.

And S230, receiving a second operation for selecting the recommended layout option, and taking the recommended layout option selected by the second operation as a target layout option.

In one embodiment, the user may select a desired recommended layout option from the layout window as the target layout option. In some scenarios, the selected recommended layout option may also be highlighted, such as highlighted, a prompt box displayed, and so on.

Further, after the recommended layout option selected by the user is obtained, the layout window can be closed.

In this embodiment, assuming that the user selects the text-image left-right layout option (i.e., layout option 2) through the layout window in fig. 3B, the program automatically performs left-right layout according to the element categories.

S240, displaying the elements to be laid out in the same category in the elements to be laid out according to the columns to obtain the element columns corresponding to the same category.

For example, as shown in fig. 3C, the text elements are displayed in columns on the left side of the target area, forming a text element column; the image class elements are displayed in columns on the right side of the target area, constituting a column of image elements.

And S250, displaying a plurality of element columns corresponding to the plurality of categories in a target area in the page at equal intervals from left to right.

In an embodiment, after selecting the recommended layout option, the target layout style obtained according to the selected recommended layout option may include information: the categories of the elements, and the relative positional relationship between the elements of the categories. Taking the recommended layout option 1 in fig. 4 as an example, the target layout style may be obtained to include information: the method comprises two categories of images and texts, wherein the image category layout is close to the left, and the text category layout is close to the right. The implementation manner of laying out the elements to be laid out according to the layout style represented by the recommended layout option 1 may be: and arranging the elements of the image category and the elements of the text category in the elements to be arranged in a left-to-right mode, so that the elements of the image category are all displayed on the left side of the target area, and the elements of the text category are all displayed on the right side of the target area.

For example, if the user selects layout option 2 in the layout window of fig. 3B, the program will automatically perform left-right layout according to the text and image, and the layout result may be as shown in fig. 3C.

In some scenarios, if the category of the element to be laid out is more than 3, for example, as shown in fig. 4A, including 3 texts, 3 images, and 3 videos, in the case that the user selects the left-right layout option of the text-image-video, the elements may also be laid out at equal intervals in a manner that the categories of the texts, the images, and the videos are from left to right, and the display effect after layout may be as shown in fig. 4B, where L1 and L2 are equal.

In some scenarios, if the number of elements to be laid out of each category is inconsistent, for example, as shown in fig. 5A, including 3 texts, 2 images, and 1 video, in the case that the user selects the left-right layout option of text-image-video, the display effect after layout may be as shown in fig. 5B, where L1 and L2 are equal.

In some scenarios, if some of the elements to be laid out in a certain category are wide, such as shown in fig. 6A, the element "text 2" is wide compared to the elements "text 1" and "text 3"; in the case that the user selects the left-right text-image-video layout option, the elements to be laid out of each category may be displayed in a manner of centering the elements, and the elements to be laid out of each category are still displayed at equal intervals, and the corresponding display effect may be as shown in fig. 6B, where L1 and L2 are equal.

In some scenarios, if the number of elements to be laid out in a certain category of the elements to be laid out is large, for example, as shown in fig. 7A, the elements to be laid out include 3 texts, 8 images, and 1 video, so that the image elements cannot be displayed in a column; under the condition that the user selects the left and right text-image-video layout option, for a large number of elements to be laid out, the elements to be laid out can be displayed in a column-changing manner and are displayed in multiple columns, but the elements to be laid out in various categories are still displayed at equal intervals, and the display effect after layout can be as shown in fig. 7B, wherein L1 and L2 are equal.

In an embodiment, in step S240, an implementation manner of displaying the elements to be laid out in the same category in columns includes: the number of elements to be laid out in the same category in the elements to be laid out is obtained, the number of columns occupied by the elements to be laid out in the same category is calculated according to the number, the elements to be laid out in the same category are displayed according to the columns, and element columns (for example, an element column 1, an element column 2, and an element column 3 shown in fig. 7B) containing the corresponding number of columns are obtained. In order to display the elements to be laid out in the same category as the element columns, after the elements to be laid out are obtained, the elements to be laid out in different categories can be stored into different arrays, and the elements to be laid out in the same category are stored into the same array; and then obtaining the elements to be laid out in the same category from an array and displaying the elements according to the columns to obtain the element columns corresponding to the same category. In some scenarios, when there are multiple elements to be laid out in the array, the multiple elements to be laid out in the array may be numbered, and an array subscript may be used as the number of the corresponding element to be laid out in the array; and acquiring a plurality of elements to be laid out in the same category from the array according to the numbering sequence, and displaying the elements in the same category according to the numbering sequence in rows to obtain the element rows corresponding to the same category.

In an embodiment, in step S250, an implementation manner of displaying the plurality of element columns corresponding to the plurality of categories at equal intervals from left to right may include: acquiring column widths occupied by element columns of the respective categories (column width 1, column width 2, column width 3 as shown in fig. 7B); the column width can be obtained by the number of columns contained in the element columns to be laid out of each category and the width of each column; according to the column width, a plurality of element columns are displayed in the target area in the page at equal intervals from left to right, and the display effect is shown with reference to fig. 7B, wherein L1 and L2 are equal.

The calculation method of the number of columns occupied by the elements of the same category may include: acquiring a height of the target region (e.g., H shown in fig. 7) as a first height; acquiring the height (for example, h shown in fig. 7) of each element to be laid out in the same category as a second height; and obtaining the number of columns occupied by the elements to be laid out in the same category according to the first height and the second height. For example, in the case shown in fig. 7B, it can be calculated that the number of columns occupied by the image-class elements to be laid out is 2 columns, and the number of columns occupied by the text-class elements is 1 column.

In an embodiment, an implementation manner of displaying elements to be laid out in the same category as element columns may include: displaying the elements to be laid out in the same category according to columns, and acquiring the maximum width of the elements in the current column as the width of the current column when the current column is displayed; determining the starting position of the next column according to the width of the current column, and displaying the next column according to the starting position; and so on until an element column is obtained. For example, in fig. 7B, when the element row corresponding to the image-like element is displayed, the first row is displayed at the end when the element row is displayed to "image 4", and the maximum width of the element in the first row is obtained (the widths of the elements in fig. 7B are equal), so that the width of the first row can be obtained, and the start position of the element in the second row, that is, the display position of "image 5", can be determined.

In some scenarios, if the number of columns occupied by the elements to be laid out in the same category is 1 column, the column elements may be displayed in an equally spaced manner, for example, three text elements of the element column 1 in fig. 7B are displayed in an equally spaced manner.

Furthermore, in some scenarios, when the elements to be laid out are displayed at equal intervals from left to right, the element columns may also be displayed in a centered manner in the height direction of the target area, such as element column 2 and element column 3 in fig. 7B, and displayed in a centered manner in the height direction (i.e., H direction) of the target area, i.e., where L3, L4 are equal, and L5, L6 are equal.

Further, in some scenarios, when the elements to be laid out are displayed at equal intervals from left to right, the elements in each column of the element column may also be displayed in a centered manner in the width direction of each column, as shown in fig. 6B, and the three text category elements are aligned in the element column 1.

In the following, taking whiteboard file page customization as an example, the implementation process of multi-class element layout is described from the perspective of program processing, and a container carrying elements in the whiteboard may be called a canvas. For example, as shown in fig. 7A, when a user frames a selected area on a canvas, so as to select multiple elements to be laid out, coordinates and size of the selected area with respect to the canvas may be obtained as a rectangle R (Px, Py, width, height), and then all the elements to be laid out that are currently selected may be obtained and stored in different arrays according to categories of the elements to be laid out, such as Array1(text1, text2, text 3.), Array2(shape1, shape2, shape 3.), and Array3(video1, video 2, video 3.); next, for each category of elements to be laid out, it is calculated that each category of elements to be laid out needs to occupy several columns in a text-image-video top-down layout manner, the elements to be laid out in each column are stored, then the element to be laid out with the largest width is taken as the width of the column according to the elements to be laid out in the column, and then the widths of all the columns of the current category are added, so that the width occupied by the element column of the element to be laid out in the current category (i.e., the column width of the element column) is obtained, as shown in fig. 7B, thereby obtaining the column widths of the element column 1, the element column 2, and the element column 3. In this way, the element column and column width of the elements to be laid out of each category are calculated, and then the elements are laid out at equal intervals from left to right in sequence according to the text-image-video (for example, as shown in fig. 7B).

It can be understood that, in the case of the right-left layout option, the specific implementation process of the elements to be laid out that are displayed in the page at equal intervals according to the category is similar to the implementation principle of the case of the left-right layout option, and reference may be made to the implementation process of the case of the left-right layout, which is not described in detail.

In an embodiment, as shown in fig. 8, taking the top and bottom layouts as an example, a specific implementation process of displaying the elements to be laid out in the page at equal intervals according to the categories is described, and correspondingly, the method for multi-element layout includes the following steps:

s310, receiving a first operation for selecting elements in a page, and taking the elements selected by the first operation as elements to be laid out; the elements to be laid out include elements of a plurality of categories.

S320, displaying a layout window, wherein the layout window comprises a plurality of selectable recommended layout options.

Regarding the implementation of this step, reference may be made to the corresponding part of step S220 in the above embodiment.

S330, receiving a second operation for selecting the recommended layout option, and taking the recommended layout option selected by the second operation as a target layout option.

In this embodiment, it is assumed that the user selects the text-image-video top-bottom layout option as the target layout option.

Regarding the implementation of this step, reference may be made to the corresponding part of step S230 in the above embodiment.

And S340, displaying the elements to be laid out in the same category in the elements to be laid out according to rows to obtain element rows corresponding to the same category.

For example, as shown in fig. 9 and 10, the text element is shown as element line 1, the image element is shown as element line 2, and the video element is shown as element line 3.

And S350, displaying a plurality of element lines corresponding to the plurality of categories in a target area in the page at equal intervals from top to bottom.

In some scenarios, as shown in fig. 5A, if the selected elements to be laid out are 3 texts, 2 images, and 1 video, in the case that the user selects the text-image-video top-bottom layout option, the corresponding display effect may be as shown in fig. 9, where L1 and L2 are equal.

In some scenarios, if the number of elements to be laid out in a certain category is large, for example, 3 texts, 8 images, 1 video, and thus cannot be displayed by one line, as shown in fig. 10, in the case that the user selects the text-image-video top-bottom layout option, for the image elements with a large number, the image elements may be displayed in multiple lines in a line-changing manner, but the elements to be laid out in each category are still displayed at equal intervals, where L1 and L2 are equal.

The implementation manner of displaying the elements to be laid out of the same class as the element rows in step S340 may include: acquiring the number of elements to be laid out in the same category in the elements to be laid out; calculating the number of lines occupied by the elements to be laid out in the same category according to the number; the elements to be laid out in the same category are displayed in rows, and element rows (for example, element row 1, element row 2, and element row 3 shown in fig. 10) including the corresponding row number are obtained. For example: after the elements to be laid out are obtained, the elements to be laid out in different types are stored into different arrays, and the elements to be laid out in the same type are stored into the same array; and then obtaining the elements to be laid out in the same category from the array, and displaying the elements to be laid out in the same category according to rows to obtain the element rows corresponding to the same category. In some scenarios, when there are multiple elements to be laid out in the array, the multiple elements to be laid out in the array may be numbered, and an array subscript may be used as the number of the corresponding element to be laid out in the array; and acquiring a plurality of elements to be laid out in the same category from the array according to the numbering sequence, and displaying the elements in rows in sequence according to the numbers to obtain the element rows corresponding to the same category.

In an embodiment, in step S350, the implementation manner of displaying the elements to be laid out in different categories at equal intervals may be: acquiring a line height occupied by the element line (for example, as shown in fig. 10, a line height of the element line 1 is a line height 1, a line height of the element line 2 is a line height 2, and a line height of the element line 3 is a line height 3); the row height can be obtained by the number of rows contained in the element row and the height of each row; and displaying the element rows to be laid out of different categories in a target area in the page at equal intervals from top to bottom according to the line height.

The calculation manner of the number of lines occupied by the elements to be laid out in the same category is, for example: acquiring the width (for example, W shown in fig. 10) of the target region as a first width; acquiring the width (for example, w shown in fig. 10) of each element in the elements to be laid out in the same category as a second width; and obtaining the line number occupied by the elements to be laid out in the same category according to the first width and the second width.

The method for displaying the elements to be laid out in the same category according to rows includes the following specific implementation modes: displaying the elements to be laid out in the same category according to rows, and acquiring the maximum height of the elements in the current row as the height of the current row when the display of the current row is finished; determining the starting position of the next line according to the height of the current line, and displaying the next line according to the starting position; and so on until an element row is obtained. For example, in fig. 10, the images 1 to 4 are taken as the first line, and at the end of the display of the first line, the height of the first line can be acquired, thereby determining the start position of the second line, i.e., the display position of the "image 5".

In some scenarios, if the number of rows occupied by the elements to be laid out in the same category is 1, the elements to be laid out in the same category are displayed in a row at equal intervals, for example, the element row 1, "text 1," "text 2," and "text 3" shown in fig. 10 are displayed in a row at equal intervals.

Further, in some scenarios, the element row is displayed in a centered manner in the width direction of the target region, for example, as shown in fig. 10, element row 2 and element row 3 are aligned in the center, so L3, L4 are equal, and L5, L6 are equal.

In some scenarios, in the height direction of each line, each line element in the element line may also be displayed in a centered manner, for example, as shown in fig. 10, horizontal center lines of "text 1", "text 2", and "text 3" in element line 1 are aligned.

It can be understood that, in the case of the top-bottom layout, the specific implementation process of the elements to be laid out displayed in the page at equal intervals according to the categories is similar to the implementation mode of the top-bottom layout, and reference may be made to the implementation process of the top-bottom layout, which is not described in detail.

It should be understood that for the foregoing method embodiments, although the steps in the flowcharts are shown in order indicated by the arrows, the steps are not necessarily performed in order indicated by the arrows. The steps are not performed in the exact order shown and described, and may be performed in other orders, unless explicitly stated otherwise. Moreover, at least a portion of the steps in the flow charts of the method embodiments may include multiple sub-steps or multiple stages that are not necessarily performed at the same time, but may be performed at different times, and the order of performance of the sub-steps or stages is not necessarily sequential, but may be performed in turn or alternating with other steps or at least a portion of the sub-steps or stages of other steps.

An apparatus for multi-element placement is also provided herein, based on the same idea as the method for multi-element placement in the above-described embodiments.

In one embodiment, as shown in fig. 11, the apparatus of the multi-element layout of the present embodiment includes: an element obtaining module 501, a layout option obtaining module 502 and a layout processing module 503, which are detailed as follows:

an element obtaining module 501, configured to receive a first operation for selecting an element in a page, and use the element selected by the first operation as an element to be laid out; the elements to be laid out comprise elements of a plurality of categories;

a layout option obtaining module 502, configured to receive a second operation for selecting a recommended layout option, and use the recommended layout option selected by the second operation as a target layout option;

the layout processing module 503 is configured to display the elements to be laid out according to a target layout style, so that the elements to be laid out are displayed in a page at equal intervals according to categories; the target layout style is a layout style of a sample of elements in the target layout option.

In some embodiments, the element obtaining module 501 specifically includes:

In some embodiments, the layout processing module 503 is specifically configured to display the elements to be laid out according to a target layout style, so that the elements to be laid out are displayed in a target area of a page at equal intervals according to categories; the target area is a local area in the entire page area.

Further, in some embodiments, the layout processing module 503 includes:

Wherein, in some embodiments, the first layout unit comprises:

Wherein, in some embodiments, the second layout unit comprises:

For a specific definition of the device for a multi-element layout, reference may be made to the above definition of the method for a multi-element layout, which is not described in detail here. The various modules in the multi-element arrangement described above may be implemented in whole or in part by software, hardware, and combinations thereof. The modules can be embedded in a hardware form or independent from a processor in the computer device, and can also be stored in a memory in the computer device in a software form, so that the processor can call and execute operations corresponding to the modules.

In addition, in the above-mentioned exemplary embodiment of the multi-element layout apparatus, the logical division of the program modules is only an example, and in practical applications, the above-mentioned function distribution may be performed by different program modules according to needs, for example, due to configuration requirements of corresponding hardware or due to convenience of implementation of software, that is, the internal structure of the multi-element layout apparatus is divided into different program modules to perform all or part of the above-described functions.

In one embodiment, a computer device is provided, the internal structure of which may be as shown in FIG. 12. The computer device includes a processor, a memory, a network interface, a display screen, and an input device connected by a system bus. Wherein the processor is configured to provide computing and control capabilities; the memory comprises a nonvolatile storage medium and an internal memory, wherein the nonvolatile storage medium stores an operating system and a computer program, and the internal memory provides an environment for the operation of the operating system and the computer program in the nonvolatile storage medium; the network interface is used for connecting and communicating with an external terminal through a network; the computer program is executed by a processor to implement a method of multi-element placement; the display screen can be a liquid crystal display screen or an electronic ink display screen; the input device may be a touch layer covered on a display screen, or may be a key, a track ball or a touch pad arranged on a casing of the computer device, or may be an external keyboard, a touch pad or a mouse, etc.

Those skilled in the art will appreciate that the architecture shown in fig. 12 is merely a block diagram of some of the structures associated with the disclosed aspects and is not intended to limit the computing devices to which the disclosed aspects apply, as particular computing devices may include more or less components than those shown, or may combine certain components, or have a different arrangement of components.

In one embodiment, a computer device is provided, comprising a memory, a display screen, and a processor; the memory for storing a computer program; the computer program, when executed by the processor, causes the processor to carry out the steps of:

receiving a first operation for selecting elements in a page, and taking the elements selected by the first operation as elements to be laid out; the elements to be laid out comprise elements of a plurality of categories; receiving a second operation for selecting a recommended layout option, and taking the recommended layout option selected by the second operation as a target layout option; displaying the elements to be laid out according to a target layout style, so that the elements to be laid out are displayed in a page at equal intervals according to categories; the target layout style is a layout style of a sample of elements in the target layout option.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: receiving area selection operation acted in the page to obtain a selected area; and taking the elements in the selected area as elements to be laid out.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: enabling the elements to be laid out to be displayed in a target area in the page at equal intervals according to categories; the target area is a local area in the entire page area.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: if the target layout style is left-right layout/right-left layout, the elements to be laid out are laid out transversely according to categories, and the elements to be laid out are displayed in a target area in a page transversely at equal intervals according to the categories after layout; and if the target layout style is up-down layout/down-up layout, the elements to be laid out are vertically laid out according to the categories, and the elements to be laid out are vertically displayed in the target area of the page at equal intervals according to the categories after layout.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: displaying the elements to be laid out in the same category in the elements to be laid out according to columns to obtain element columns corresponding to the same category; and displaying a plurality of element columns corresponding to the plurality of categories in a target area in the page at equal intervals from left to right/from right to right.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: acquiring the number of elements to be laid out in the same category in the elements to be laid out; calculating the number of columns occupied by the elements to be laid out in the same category according to the number; and displaying the elements to be laid out in the same category according to columns to obtain element columns, wherein the element columns comprise columns with corresponding column numbers.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: storing elements to be laid out of different types into different arrays, and storing elements to be laid out of the same type into the same array; and obtaining the elements to be laid out in the same category from the array, and displaying the elements to be laid out in the same category according to the columns to obtain the element columns corresponding to the same category.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: acquiring the column width occupied by the element column; the column width is obtained by the number of columns contained in the element column and the width of each column; and displaying a plurality of element columns in the target area in the page at equal intervals from left to right/from right to right according to the column width.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: acquiring the height of a target area as a first height; acquiring the height of each element in the same category as a second height; and obtaining the number of columns occupied by the elements in the same category according to the first height and the second height.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: displaying the elements to be laid out in the same category according to columns, and acquiring the maximum width of the elements in the current column as the width of the current column when the current column is displayed; determining the starting position of the next column according to the width of the current column, and displaying the next column according to the starting position; and so on until an element column is obtained.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: displaying the element columns in a centered manner in a height direction of a target area; and/or displaying each column element in the element column in a centered manner in the width direction of each column.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: and if the number of the columns occupied by the elements to be laid out in the same category is 1, displaying the elements in the same category into a column in an equidistant interval mode.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: displaying the elements to be laid out in the same category in the elements to be laid out according to rows to obtain element rows corresponding to the same category; and displaying a plurality of element rows corresponding to the plurality of categories in a target area in the page at equal intervals from top to bottom/from bottom to top.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: acquiring the number of elements to be laid out in the same category in the elements to be laid out; calculating the number of lines occupied by the elements to be laid out in the same category according to the number; displaying the elements to be laid out in the same category according to rows to obtain element rows; the element row contains a row corresponding to the number of rows.

In one embodiment, the computer program, when executed by the processor, further causes the processor to:

storing elements of different types into different arrays, and storing elements to be laid out of the same type into the same array; and obtaining the elements to be laid out in the same category from the array, and displaying the elements to be laid out in the same category according to rows to obtain the element rows corresponding to the same category.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: acquiring the row height occupied by the element row; the line height is obtained by the line number contained in the element line and the height of each line; and displaying a plurality of element rows from top to bottom/bottom to top at equal intervals in a target area in the page according to the row height.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: acquiring the width of a target area as a first width; acquiring the width of each element in the same category of elements as a second width; and obtaining the line number occupied by the elements in the same category according to the first width and the second width.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: sequentially displaying the elements to be laid out in the same category according to rows, and acquiring the maximum height of the elements in the current row as the height of the current row when the display of the current row is finished; determining the starting position of the next line according to the height of the current line, and displaying the next line according to the starting position; and so on until an element row is obtained.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: displaying the element row in a centered manner in a width direction of a target area; and/or displaying each row element in the element row in a centered manner in the height direction of each row

In one embodiment, the computer program, when executed by the processor, further causes the processor to: and if the number of lines occupied by the elements to be laid out in the same category is 1, displaying the elements in the same category into a line in an equidistant interval mode.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: the method comprises the steps of receiving a first operation for selecting elements in a page, taking the elements selected by the first operation as elements to be laid out, and displaying a layout window, wherein the layout window comprises a plurality of selectable recommended layout options.

In one embodiment, the computer program, when executed by the processor, further causes the processor to: and receiving a second operation for selecting a recommended layout option, and closing the layout window after the recommended layout option selected by the second operation is taken as a target layout option.

In one embodiment, a computer-readable storage medium is provided, having a computer program stored thereon, which when executed by a processor, performs the steps of:

In one embodiment, the computer program when executed by the processor further performs the steps of: receiving area selection operation acted in the page to obtain a selected area; and taking the elements in the selected area as elements to be laid out.

In one embodiment, the computer program when executed by the processor further performs the steps of: enabling the elements to be laid out to be displayed in a target area in the page at equal intervals according to categories; the target area is a local area in the entire page area.

In one embodiment, the computer program when executed by the processor further performs the steps of: if the target layout style is left-right layout/right-left layout, the elements to be laid out are laid out transversely according to categories, and the elements to be laid out are displayed in a target area in a page transversely at equal intervals according to the categories after layout;

In one embodiment, the computer program when executed by the processor further performs the steps of: displaying the elements to be laid out in the same category in the elements to be laid out according to columns to obtain element columns corresponding to the same category; and displaying a plurality of element columns corresponding to the plurality of categories in a target area in the page at equal intervals from left to right/from right to right.

In one embodiment, the computer program when executed by the processor further performs the steps of: acquiring the number of elements to be laid out in the same category in the elements to be laid out; calculating the number of columns occupied by the elements to be laid out in the same category according to the number; and displaying the elements to be laid out in the same category according to columns to obtain element columns, wherein the element columns comprise columns with corresponding column numbers.

In one embodiment, the computer program when executed by the processor further performs the steps of: storing elements to be laid out of different types into different arrays, and storing elements to be laid out of the same type into the same array; the method for displaying the elements to be laid out in the same category in the elements to be laid out according to the columns to obtain the element columns corresponding to the same category includes: and obtaining the elements to be laid out in the same category from the array, and displaying the elements to be laid out in the same category according to the columns to obtain the element columns corresponding to the same category.

In one embodiment, the computer program when executed by the processor further performs the steps of: acquiring the column width occupied by the element column; the column width is obtained by the number of columns contained in the element column and the width of each column;

In one embodiment, the computer program when executed by the processor further performs the steps of: acquiring the height of a target area as a first height; acquiring the height of each element in the same category as a second height; and obtaining the number of columns occupied by the elements in the same category according to the first height and the second height.

In one embodiment, the computer program when executed by the processor further performs the steps of: displaying the elements to be laid out in the same category according to columns, and acquiring the maximum width of the elements in the current column as the width of the current column when the current column is displayed; determining the starting position of the next column according to the width of the current column, and displaying the next column according to the starting position; and so on until an element column is obtained.

In one embodiment, the computer program when executed by the processor further performs the steps of: displaying the element columns in a centered manner in a height direction of a target area; and/or displaying each column element in the element column in a centered manner in the width direction of each column.

In one embodiment, the computer program when executed by the processor further performs the steps of: and if the number of the columns occupied by the elements to be laid out in the same category is 1, displaying the elements to be laid out in the same category into a column at equal intervals.

In one embodiment, the computer program when executed by the processor further performs the steps of: displaying the elements to be laid out in the same category in the elements to be laid out according to rows to obtain element rows corresponding to the same category; and displaying a plurality of element rows corresponding to the plurality of categories in a target area in the page at equal intervals from top to bottom/from bottom to top.

In one embodiment, the computer program when executed by the processor further performs the steps of: acquiring the number of elements to be laid out in the same category in the elements to be laid out; calculating the number of lines occupied by the elements to be laid out in the same category according to the number; displaying the elements to be laid out in the same category according to rows to obtain element rows; the element row contains a row corresponding to the number of rows.

In one embodiment, the computer program when executed by the processor further performs the steps of: storing elements to be laid out of different types into different arrays, and storing elements to be laid out of the same type into the same array; and obtaining the elements to be laid out in the same category from the array, and displaying the elements to be laid out in the same category according to rows to obtain the element rows corresponding to the same category.

In one embodiment, the computer program when executed by the processor further performs the steps of: acquiring the row height occupied by the element row; the line height is obtained by the line number contained in the element line and the height of each line; and displaying a plurality of element rows from top to bottom/bottom to top at equal intervals in a target area in the page according to the row height.

In one embodiment, the computer program when executed by the processor further performs the steps of: acquiring the width of a target area as a first width; acquiring the width of each element in the same category of elements as a second width; and obtaining the line number occupied by the elements in the same category according to the first width and the second width.

In one embodiment, the computer program when executed by the processor further performs the steps of: sequentially displaying the elements to be laid out in the same category according to rows, and acquiring the maximum height of the elements in the current row as the height of the current row when the display of the current row is finished; determining the starting position of the next line according to the height of the current line, and displaying the next line according to the starting position; and so on until an element row is obtained.

In one embodiment, the computer program when executed by the processor further performs the steps of: displaying the element row in a centered manner in a width direction of a target area; and/or displaying each row of elements in the element row in a centered manner in the height direction of each row.

In one embodiment, the computer program when executed by the processor further performs the steps of: and if the number of lines occupied by the elements to be laid out in the same category is 1, displaying the elements in the same category into a line in an equidistant interval mode.

In one embodiment, the computer program when executed by the processor further performs the steps of: the method comprises the steps of receiving a first operation for selecting elements in a page, taking the elements selected by the first operation as elements to be laid out, and displaying a layout window, wherein the layout window comprises a plurality of selectable recommended layout options.

In one embodiment, the computer program when executed by the processor further performs the steps of: and receiving a second operation for selecting a recommended layout option, and closing the layout window after the recommended layout option selected by the second operation is taken as a target layout option.

It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by hardware instructions of a computer program, which can be stored in a non-volatile computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. Any reference to memory, storage, database, or other medium used in the embodiments provided herein may include non-volatile and/or volatile memory, among others. Non-volatile memory can include read-only memory (ROM), Programmable ROM (PROM), Electrically Programmable ROM (EPROM), Electrically Erasable Programmable ROM (EEPROM), or flash memory. Volatile memory can include Random Access Memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms such as Static RAM (SRAM), Dynamic RAM (DRAM), Synchronous DRAM (SDRAM), Double Data Rate SDRAM (DDRSDRAM), Enhanced SDRAM (ESDRAM), Synchronous Link DRAM (SLDRAM), Rambus Direct RAM (RDRAM), direct bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

The technical features of the above embodiments can be arbitrarily combined, and for the sake of brevity, all possible combinations of the technical features in the above embodiments are not described, but should be considered as the scope of the present specification as long as there is no contradiction between the combinations of the technical features. The above description of each embodiment has different emphasis, and reference may be made to related descriptions of other embodiments for parts that are not described in detail in a certain embodiment.

The terms "comprising" and "having" and any variations thereof in the embodiments are intended to cover non-exclusive inclusions. For example, a process, method, system, article, or apparatus that comprises a list of steps or (module) elements is not limited to only those steps or elements but may alternatively include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.

The "plurality" mentioned in the embodiments means two or more. "and/or" describes the association relationship of the associated objects, meaning that there may be three relationships, e.g., a and/or B, which may mean: a exists alone, A and B exist simultaneously, and B exists alone. The character "/" generally indicates that the former and latter associated objects are in an "or" relationship.

In the embodiments, the references to "first \ second" are merely to distinguish similar objects and do not represent a specific ordering for the objects, and it is to be understood that "first \ second" may be interchanged with a specific order or sequence, where permitted. It should be understood that "first \ second" distinct objects may be interchanged under appropriate circumstances such that the embodiments described herein may be practiced in sequences other than those illustrated or described herein.

The above examples only express several embodiments of the present invention, but are not to be construed as limiting the scope of the invention. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present patent shall be subject to the appended claims.

Claims

1. A method of multi-element placement, comprising:

receiving a first operation for selecting elements in a page, taking the elements selected by the first operation as elements to be laid out, and then displaying a layout window comprising a plurality of selectable recommended layout options; the elements to be laid out comprise elements of a plurality of categories; the first operation is an area selection operation acting in a page; each recommended layout option comprises layout styles of at least two category elements;

receiving a second operation for selecting a recommended layout option;

displaying the elements to be laid out according to a target layout style, so that the elements to be laid out are displayed in a target area in a page at equal intervals according to categories; the target layout style is a layout style of element samples in a target layout option, and the target layout option is a recommended layout option selected by the second operation; the layout style is used for representing the relative position relation of the elements of each category, and the number of the elements of each category is not limited; the target area is a minimum outsourcing rectangular area of elements to be laid out in a page or a selected area corresponding to the area selection operation;

the displaying the elements to be laid out according to a target layout style, so that the elements to be laid out are displayed in a target area of a page at equal intervals according to categories, comprises:

if the target layout style is left-right layout/right-left layout, calculating the column width occupied by the elements to be laid out of each category aiming at the elements to be laid out of each category, wherein the column width is obtained through the column number occupied by the elements to be laid out of each category and the width of each column; thereby determining the column width of the elements to be laid out of each category; finally, the elements to be laid out are laid out transversely according to categories, the elements to be laid out are displayed in the target area transversely at equal intervals according to the categories after the elements are laid out, and the elements of different categories are laid out transversely at equal intervals;

if the target layout style is an up-down layout/down-up layout, calculating the height occupied by the elements to be laid out of each category aiming at the elements to be laid out of each category, wherein the height is obtained by the number of rows occupied by the elements to be laid out of the category and the height of each row; thereby determining a line height of the elements to be laid out for each category; and finally, vertically arranging the elements to be arranged according to categories, displaying the elements to be arranged in the target area at intervals according to the categories vertically, and arranging the elements of different categories at intervals.

2. The method according to claim 1, wherein the receiving a first operation for selecting elements in a page, and taking the elements selected by the first operation as elements to be laid out comprises:

receiving area selection operation acted in the page to obtain a selected area;

and taking the elements in the selected area as elements to be laid out.

3. The method of claim 2,

the target area is a minimum outsourcing rectangular area of elements to be laid out in the page;

alternatively, the target area is the selected area.

4. The method according to claim 1, wherein the transversely arranging the elements to be arranged according to categories comprises:

and displaying a plurality of element columns corresponding to a plurality of categories in the target area at equal intervals from left to right/from right to right.

5. The method according to claim 4, wherein the displaying the elements to be laid out in the same category in the elements to be laid out in columns to obtain the element columns corresponding to the same category comprises:

6. The method according to claim 4, wherein the receiving a first operation for selecting elements in a page, and taking the elements selected by the first operation as elements to be laid out, further comprises:

the displaying the elements to be laid out in the same category in the elements to be laid out according to the columns to obtain the element columns corresponding to the same category, includes:

and acquiring elements to be laid out in the same category from the array, and displaying the elements to be laid out in the same category according to columns to obtain element columns corresponding to the same category.

7. The method according to claim 4, wherein said displaying a plurality of said element columns corresponding to a plurality of categories at equal intervals from left to right/from right to right in said target area comprises:

and displaying a plurality of element columns in a target area in a page at equal intervals from left to right/from right to right according to the column width.

8. The method according to claim 5, wherein calculating the number of columns occupied by the elements to be laid out of the same category according to the number comprises:

acquiring the height of the target area as a first height;

acquiring the height of each element in the elements to be laid out in the same category as a second height;

and obtaining the number of columns occupied by the elements to be laid out in the same category according to the first height and the second height.

9. The method according to claim 5, wherein the displaying the elements to be laid out in the same category in columns to obtain element columns comprises:

and so on until an element column is obtained.

10. The method of claim 8, further comprising:

displaying the element column in a centered manner in a height direction of the target area;

and/or the presence of a gas in the gas,

displaying each column element in the element column in a centered manner in a width direction of each column.

11. The method of claim 9, further comprising:

12. The method according to claim 1, wherein the vertically laying out the elements to be laid out according to categories comprises:

and displaying a plurality of element rows corresponding to a plurality of categories in a target area in a page at equal intervals from top to bottom/from bottom to top.

13. The method according to claim 12, wherein the displaying the elements to be laid out in the same category in the elements to be laid out in rows to obtain the element rows corresponding to the same category comprises:

calculating the number of rows occupied by the elements to be laid out in the same category according to the number;

14. The method of claim 12, wherein receiving a first operation for selecting an element in a page, and taking the element selected by the first operation as an element to be laid out, further comprises:

the displaying the elements to be laid out in the same category in the elements to be laid out according to rows to obtain the element rows corresponding to the same category includes:

and acquiring the elements to be laid out in the same category from the array, and displaying the elements to be laid out in the same category according to rows to obtain the element rows corresponding to the same category.

15. The method according to claim 12, wherein displaying a plurality of element rows corresponding to a plurality of categories on the target area at equal intervals from top to bottom/bottom to top comprises:

and displaying a plurality of element rows on the target area at equal intervals from top to bottom/bottom to top according to the row height.

16. The method according to claim 13, wherein said calculating the number of rows occupied by the elements to be laid out of the same category according to the number comprises:

acquiring the width of the target area as a first width;

17. The method according to claim 13, wherein the displaying the elements to be laid out in the same category in rows, resulting in element rows, comprises:

sequentially displaying the elements to be laid out in the same category according to rows, and acquiring the maximum height of the elements in the current row as the height of the current row when the display of the current row is finished;

and so on until an element row is obtained.

18. The method of claim 16, further comprising:

displaying the element row in a centered manner in a width direction of the target area;

and/or the presence of a gas in the gas,

and displaying each row of elements in the element row in a centered mode in the height direction of each row.

19. The method of claim 18, further comprising:

and if the number of rows occupied by the elements to be laid out in the same category is 1, displaying the elements to be laid out in the same category into a row at equal intervals.

20. The method of claim 1, wherein receiving a second operation for selecting a recommended layout option, taking the recommended layout option selected by the second operation as a target layout option, further comprises: and closing the layout window.

21. The method according to any one of claims 1 to 20, wherein the element categories included in the elements to be laid out include at least two of text, image, audio, video, and flash.

22. An apparatus for a multi-element layout, comprising:

the system comprises an element acquisition module, a layout module and a layout module, wherein the element acquisition module is used for receiving a first operation for selecting elements in a page, taking the elements selected by the first operation as elements to be laid out, and then displaying a layout window comprising a plurality of selectable recommended layout options; the elements to be laid out comprise elements of a plurality of categories; the first operation is an area selection operation acting in a page; each recommended layout option comprises layout styles of at least two category elements;

the layout processing module is used for displaying the elements to be laid out according to a target layout style, so that the elements to be laid out are displayed in a target area in a page at equal intervals according to categories; the target layout style is a layout style of element samples in a target layout option, and the target layout option is a recommended layout option selected by the second operation; the layout style is used for representing the relative position relation of the elements of each category, and the number of the elements of each category is not limited; the target area is a minimum outsourcing rectangular area of elements to be laid out in a page or a selected area corresponding to the area selection operation;

if the target layout style is left-right layout/right-left layout, calculating the column width required to be occupied by the elements to be laid out of each category aiming at the elements to be laid out of each category, wherein the column width is obtained through the column number occupied by the elements to be laid out of each category and the width of each column; thereby determining the column width of the elements to be laid out of each category; finally, the elements to be laid out are laid out transversely according to categories, and the elements to be laid out are displayed in the target area transversely at equal intervals according to the categories after the layout;

if the target layout style is an up-down layout/down-up layout, calculating the line height occupied by the elements to be laid out of each category aiming at the elements to be laid out of each category, wherein the line height is obtained through the line number occupied by the elements to be laid out of the category and the height of each line; thereby determining a line height of the elements to be laid out for each category; and finally, the elements to be distributed are vertically distributed according to categories, and the elements to be distributed are vertically displayed in the target area at equal intervals according to categories after being distributed.

23. The apparatus of claim 22, wherein the element obtaining module comprises:

24. The apparatus of claim 22, wherein the layout of the elements to be laid out according to category landscape comprises:

and the second processing subunit is used for displaying a plurality of element columns corresponding to a plurality of categories in the target area at equal intervals from left to right/from right to right.

25. The apparatus of claim 22, wherein the layout of the elements to be laid out vertically according to categories comprises:

and displaying a plurality of element rows corresponding to a plurality of categories on the target area at equal intervals from top to bottom/from bottom to top.

26. A computer device comprising a memory, a display screen, and a processor; the memory is used for storing a computer program; it is characterized in that the preparation method is characterized in that,

the computer program, when executed by the processor, causes the processor to carry out the steps of the method of any one of claims 1 to 21.

27. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, causes the processor to carry out the steps of the method according to any one of claims 1 to 21.