CN109697264B - Page element arrangement method and device, computing equipment and storage medium - Google Patents

Page element arrangement method and device, computing equipment and storage medium Download PDF

Info

Publication number
CN109697264B
CN109697264B CN201710990780.2A CN201710990780A CN109697264B CN 109697264 B CN109697264 B CN 109697264B CN 201710990780 A CN201710990780 A CN 201710990780A CN 109697264 B CN109697264 B CN 109697264B
Authority
CN
China
Prior art keywords
elements
row
sequence
height
display
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201710990780.2A
Other languages
Chinese (zh)
Other versions
CN109697264A (en
Inventor
江智双
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201710990780.2A priority Critical patent/CN109697264B/en
Publication of CN109697264A publication Critical patent/CN109697264A/en
Application granted granted Critical
Publication of CN109697264B publication Critical patent/CN109697264B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Landscapes

  • User Interface Of Digital Computer (AREA)

Abstract

The application discloses a page element arrangement method and device, a computing device and a storage medium. The arrangement method of the page elements comprises the following steps: determining the width of a display area of an element to be presented in a page; for one row of elements to be arranged in a display area, acquiring a current element sequence to be arranged, wherein the element sequence comprises one or more elements; determining element groups corresponding to the rows in the element sequence and determining display heights of the element groups according to the widths and the predetermined intervals, so that when all elements in the element groups are scaled to the display heights and uniformly arranged to the rows, any adjacent elements in the element groups keep the predetermined intervals; respectively carrying out scaling processing on each element in the element group so as to enable the height of each element to be a display height; the elements subjected to the scaling processing are arranged uniformly in a row at a predetermined pitch so that any adjacent elements maintain the predetermined pitch.

Description

Page element arrangement method and device, computing equipment and storage medium
Technical Field
The present application relates to the field of web page layout, and in particular, to a method and an apparatus for arranging page elements, a computing device, and a storage medium.
Background
In some applications of a smart terminal (e.g., a desktop computer, a mobile terminal, etc.), it is generally required to arrange a plurality of elements (e.g., a plurality of pictures) to be displayed in a page for a user to browse conveniently. Currently, existing layout schemes typically lay out multiple elements evenly into multiple rows, and all rows are the same height.
Disclosure of Invention
According to one aspect of the application, a method for arranging page elements is provided, which includes: determining the width of a display area of an element to be presented in a page; for one row of elements to be arranged in a display area, acquiring a current element sequence to be arranged, wherein the element sequence comprises one or more elements; determining element groups corresponding to the rows in the element sequence and determining display heights of the element groups according to the widths and the predetermined intervals, so that when all elements in the element groups are scaled to the display heights and uniformly arranged to the rows, any adjacent elements in the element groups keep the predetermined intervals; respectively carrying out scaling processing on each element in the element group so as to enable the height of each element to be a display height; the elements subjected to the scaling processing are arranged uniformly in a row at a predetermined pitch so that any adjacent elements maintain the predetermined pitch.
According to still another aspect of the present application, there is provided an arrangement apparatus of page elements, including a width acquisition unit, an element acquisition unit, a line grouping unit, an element processing unit, and a line arrangement unit. The width obtaining unit may determine a width of a display area of an element to be presented in one page. The element acquiring unit may acquire a sequence of elements to be currently arranged for one row of elements to be arranged in the display area. The sequence of elements includes one or more elements. The line grouping unit may determine an element group corresponding to the line in the element sequence and determine a display height of the element group according to the width and the predetermined interval. The row grouping unit may cause any adjacent element in the element group to maintain a predetermined pitch when each element in the element group is scaled to a display height and uniformly arranged to the row. And the element processing unit is used for respectively carrying out scaling processing on each element in the element group so that the height of each element is the display height. The line arrangement unit may evenly arrange the elements subjected to the scaling processing into a line at a predetermined pitch so that any adjacent elements maintain the predetermined pitch.
According to yet another aspect of the application, a computing device is presented, comprising: one or more processors, memory, and one or more programs. A program is stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for performing the method of arranging page elements of the present application.
According to still another aspect of the present application, there is provided a storage medium storing one or more programs. The one or more programs include instructions. The instructions, when executed by a computing device, cause the computing device to perform the page element arrangement method of the present application.
In summary, according to the solutions of some embodiments of the present application, by obtaining the width of the current display area and arranging the elements in each row within the display area, the elements in each row within the display area are kept at a predetermined interval, and the display height is determined to be within an appropriate range (for example, the display height does not exceed the first height threshold), so as to improve the visual experience of the user in browsing the display area.
Drawings
In order to more clearly illustrate the technical solutions in the examples of the present application, the drawings needed to be used in the description of the examples are briefly introduced below, and it is obvious that the drawings in the following description are only some examples of the present application, and it is obvious for a person skilled in the art to obtain other drawings based on these drawings without inventive exercise.
FIG. 1 illustrates a schematic diagram of an application scenario 100, in accordance with some embodiments of the present application;
FIG. 2 illustrates a schematic diagram of a layout method 200 of page elements according to some embodiments of the present application;
FIG. 3 shows a schematic view of a page 300 according to one embodiment of the present application;
FIG. 4 illustrates a flow diagram of a method 400 of layout of page elements according to some embodiments of the application;
FIG. 5 illustrates a schematic diagram of an arrangement apparatus 500 for page elements, according to some embodiments of the invention;
FIG. 6 illustrates a schematic diagram of an arrangement apparatus 600 for page elements according to some embodiments of the invention; and
FIG. 7 illustrates a block diagram of the components of a computing device.
Detailed Description
The technical solutions in the examples of the present application will be clearly and completely described below with reference to the drawings in the examples of the present application, and it is obvious that the described examples are only a part of the examples of the present application, and not all examples. All other examples, which can be obtained by a person skilled in the art without making any inventive step based on the examples in this application, are within the scope of protection of this application.
Fig. 1 illustrates a schematic diagram of an application scenario 100 according to some embodiments of the present application. The application scenario 100 includes a computing device 110 and a server 120. Here, the computing device 110 may be various devices such as a desktop computer, a notebook computer, a tablet computer, a mobile phone, or a handheld game machine. Server 120 may provide elements (e.g., but not limited to pictures) to be displayed to computing device 110. The server 120 may be implemented as a hardware-independent device, a virtual server, a distributed computing center, or the like, which is not limited in this application. Computing device 110 hosts application 111 that displays elements. Here, the application 111 may be, for example, a browser, an information client, a communication client, or the like, but is not limited thereto. The application 111 may display the element from the server 120 in a page, and may also display the locally stored element in the page, which is not limited in this application. The page displayed by the application 111 is, for example, in a hypertext markup language (HTML) format, but is not limited thereto.
FIG. 2 illustrates a flow diagram of a method 200 of arranging page elements according to some embodiments of the present application. Method 200 may be performed in application 111. For example, when the application 111 is implemented as a browser, the method 200 can be implemented as a JS script executable in the browser, but is not limited thereto.
As shown in fig. 2, the method 200 includes step S201. In step S201, the width of the display area of the element to be presented in one page is determined. Here, one page displayed by the application 111 may be generally zoomed. As the page is scaled, the width of the display area may also change. In addition, the page size of the application 111 is typically different when the application 111 resides in different types of computing devices. For example, the size of a page in a notebook computer is typically larger than the page of a mobile phone. As can be seen from this, through step S201, the method 200 may determine the width of the display area in the current page, so as to adjust the element arrangement manner of the display area according to the width (see below in particular).
In the display area of the page, the elements to be presented may be arranged line by line in the direction of a main axis (main axis) in the page (the line direction is the same as the main axis direction). For one row of elements to be arranged in the display area, the method 200 may perform step S202. In step S202, the element sequence to be currently arranged is acquired. The sequence of elements includes one or more elements. Each element in the element sequence is, for example, a still picture or a moving picture, but is not limited thereto.
In one embodiment, step S202 sends a corresponding search request to the search server in response to the search indication for the element. In this way, the search server performs a search in response to the search request and returns at least a portion of the search results. Here, the search result for an element is generally a larger number of element sets (for example, but not limited to, a picture set). Step S202 may receive at least a portion of the returned search results as a current sequence of elements. A typical application scenario is that a user may perform a picture search operation within a search page of the application 111. In particular, the user may enter search keywords within a search page or upload pictures to be matched within a search page (e.g., read a picture from a local picture library or copy a picture from another web page). Accordingly, the search instruction generated in step S202 may include a search keyword or a picture to be matched. Upon receiving the search instruction, the search server (e.g., server 120) may search for a set of elements (e.g., a set of pictures) related to the search keyword (or the picture to be matched) as a search result.
In yet another embodiment, step S202 may extract some or all of the elements from the elements not divided into any element group as the sequence of elements to be currently arranged. For example, a row of elements to be arranged is not the first row of the display area, and the element sequence corresponding to the row is a part or all of the elements (i.e., the undivided elements) remaining after the elements of the previous row are arranged.
For a row of elements to be arranged, the method 200 may perform step S203 after determining the corresponding sequence of elements by step S202. In step S203, an element group corresponding to a row in the element sequence is determined and a display height of the element group is determined according to the width of the display area and the predetermined pitch. In particular, the determined group of elements may be a subsequence of the sequence of elements. The first element of the sub-sequence is the first element in the sequence of elements. The predetermined spacing may take, for example, the value zero (i.e., no gaps between adjacent elements within a row) or may take on a predetermined positive value. In some embodiments, the predetermined spacing may also be configured to be determined according to a width value of the display area, such that the predetermined spacing maintains an association with the width of the display area to improve the visual experience of the user when browsing the display area.
In some embodiments, the element groups and display heights determined in step S203 need to satisfy, but are not limited to, a first condition. The first condition is: when the elements in the element group are each scaled to the determined display height and evenly arranged in a row, any adjacent elements in the element group maintain a predetermined spacing. It should be noted that there may be a plurality of element groups satisfying the first condition. The number of elements in different element groups is different. The display heights for different element groups are also different. Depending on a predetermined selection rule, step S203 may select one from a plurality of element groups satisfying the first condition, and treat it as an element group to be arranged to the row.
In still other embodiments, step S203 may cause the determined element group and display height to satisfy a second condition. Specifically, in step S203, an element in the element sequence is sequentially selected to be added to a set of elements until the set of elements satisfies the second condition. The second condition may be a further definition on the basis of the first condition (i.e. the predetermined selection rule mentioned above), comprising: when the elements in the element set are scaled to a uniform display height in high-width scale and are uniformly distributed in the row, any adjacent elements keep a preset spacing, and the sum of the widths of the elements in the row is consistent with the difference between the width and the sum of the spacings of the display area, the display height does not exceed a first height threshold. Wherein the sum of the pitches is a product of a total number of elements in the element group and a predetermined pitch. On this basis, step S203 may treat the set of elements satisfying the second condition as one element group.
More specifically, in one embodiment, step S203 may sequentially add elements in the element sequence to the element set and calculate the display height according to the following formula until the calculated display height does not exceed the first height threshold:
h=(W-p*i)/(R 1 +...+R i )
wherein, the first and the second end of the pipe are connected with each other,w represents the width of the display area, p represents a predetermined pitch, i represents the serial number of the ith element in the element set, i is a positive integer greater than 1, R 1 Represents the aspect ratio, R, of the 1 st element in the set of elements i Representing the aspect ratio of the ith element in the set of elements. It should be noted that the manner of determining the element set satisfying the second condition in step S203 is not limited to the above formula, and may be implemented as other manners of determining the element group, and these manners should fall within the scope of the present application.
In determining the element group and the display height in step S203, the method 200 may also perform steps S204 and S205.
In step S204, scaling processing is performed on each element in the element group so that the height of each element becomes the determined display height.
In step S205, the elements subjected to the scaling processing are arranged uniformly in a row at a predetermined pitch so that any adjacent elements maintain the predetermined pitch. FIG. 3 shows a schematic view of a page according to one embodiment of the present application. As shown in FIG. 3, page 300 includes a display area 310. The predetermined spacing between adjacent elements within each row in the display area is d. In addition, the elements in each row are spaced from the edge of the display area by a distance d/2. The display height of the first row in the display area 310 is h 1 The display height of the second row is h 2 。h 1 And h 2 The display heights are different, none exceeding a first height threshold, such as 100.
In summary, according to the method 200 of some embodiments of the present application, by obtaining the width of the current display area and arranging the elements in each row within the display area, the elements in each row within the display area are kept at a predetermined distance, and the display height is determined to be within an appropriate range (for example, the display height does not exceed the first height threshold), so as to improve the visual experience of the user when browsing the display area.
FIG. 4 illustrates a flow diagram of a method 400 of arranging page elements according to some embodiments of the present application. The method 400 may be performed in the application 111.
As shown in fig. 4, the method 400 includes steps S401 to S403. Here, the embodiments of S401 to S403 are respectively consistent with steps S201 to S203, and are not described herein again.
In addition, for one line, the method 400 may further perform step S404 when determining the element group and the display height satisfying the second condition in step S403. In step S404, when the display height is lower than the second height threshold, the last element in the determined element group is deleted, and the display height is adjusted. Specifically, the method is described. By adjusting the display height. Step S404 causes any adjacent elements to maintain a predetermined pitch while the latest element group (i.e., the element group after the last element is deleted) is arranged evenly into the row. In this way, through step S404, the method 400 can avoid the problem that the display size of the element is too small in one row of the arranged elements, thereby improving the user experience. For the element groups and display heights acquired in step S404, the method 400 may perform steps S405 and S406. Here, the implementation of steps S405 and S406 are consistent with steps S204 and S205, respectively, and are not described here again.
Additionally, upon determining in step S403 that the element sequence does not have an element group that satisfies a condition (e.g., the second condition) (which is typically caused by too few elements in the element sequence), the method 400 may perform step S407, retrieve a new element (e.g., retrieve other portions of the search results from the search server) and add to the element sequence. On this basis, the method 400 may continue to step S403 to determine the element group corresponding to the row in the current element sequence and the display height of the element group. Here, displaying the set of elements that do not satisfy the second condition in one row can be avoided by step S407, and after acquiring a new element, an element that has not been previously divided into any one row and the newly acquired element can be merged, and element arrangement can be performed on the merged set of elements. As can be seen from the above description, the method 400 may be applied in an application scenario where elements are loaded in multiple times. In particular, for elements obtained from a load operation (e.g., obtained from a server or locally loaded), the undivided elements cannot be tiled a row at a predetermined pitch when scaled to a suitable display height (e.g., the display height does not exceed a first height threshold). Through step S407, the method 400 may merge the undivided element with the element obtained by the next load operation, and continue to arrange the merged element.
FIG. 5 illustrates a schematic diagram of an arrangement apparatus 500 for page elements according to some embodiments of the invention. The apparatus 500 may reside in an application 111, for example.
As shown in fig. 5, the apparatus 500 includes a width acquisition unit 501, an element acquisition unit 502, a line grouping unit 503, an element processing unit 504, and a line arrangement unit 505. The width obtaining unit 501 may determine the width of the display area of the element to be presented in one page.
For one row of elements to be arranged in the display area, the element acquisition unit 502 may acquire a sequence of elements to be currently arranged. The sequence of elements includes one or more elements. Each element in the sequence of elements is, for example, a still picture or a moving picture. In one embodiment, the element obtaining unit 502 is adapted to extract a part or all of elements from elements not divided into any element group as the sequence of elements to be currently arranged. In yet another embodiment, the element obtaining unit 502 may send a corresponding search request to the search server in response to a search indication for an element. In this way, the search server performs a search in response to the search request and returns at least a portion of the search results. The element obtaining unit 502 may receive at least a portion of the returned search results as a sequence of elements.
The row grouping unit 503 is adapted to determine an element group corresponding to the row in the element sequence and determine a display height of the element group according to the width and the predetermined spacing. The element group and the display height determined by the line grouping unit 503 satisfy the following conditions: when the elements in the element group are each scaled to the display height and arranged evenly in the row, any adjacent elements in the element group maintain a predetermined spacing. In some embodiments, the row grouping unit 503 is adapted to select one element in the sequence of elements in turn to be added to a set of elements until the set of elements satisfies the following condition:
when the elements in the element set are scaled to a uniform display height in high-width proportion and are uniformly distributed in the row, any adjacent elements in the element set keep a preset spacing, and the sum of the widths of the elements in the row is consistent with the difference between the width and the sum of the spacings of the display area, the display height does not exceed a first height threshold. Wherein the sum of the spacings is the product of the total number of elements in the set of elements and the predetermined spacing. More specifically, according to an embodiment of the present application, the row grouping unit 503 sequentially adds the elements in the element sequence to the element set and calculates the display height according to the following formula until the calculated display height does not exceed the first height threshold.
h=(W-p*i)/(R 1 +...+R i )
Wherein W represents a width of the display area, p represents the predetermined pitch, i represents a serial number of an ith element in the element set, i is a positive integer greater than 1, and R 1 Represents the aspect ratio, R, of the 1 st element in the set of elements i Representing the aspect ratio of the ith element in the set of elements.
On the basis of the above, the line grouping unit 503 may set elements satisfying the condition as an element group.
The element processing unit 504 may perform scaling processing on each element in the element group, so that the height of each element is the corresponding display height.
The line arrangement unit 505 evenly arranges the elements subjected to the scaling processing into the line at the predetermined pitch so that any adjacent elements maintain the predetermined pitch. It should be noted that more specific embodiments of the apparatus 500 are consistent with the method 200, and are not described herein again.
FIG. 6 illustrates a schematic diagram of an arrangement apparatus 600 for page elements according to some embodiments of the invention. The apparatus 600 may reside in an application 111, for example. As shown in fig. 6, the apparatus 600 includes a width acquisition unit 601, an element acquisition unit 602, a line grouping unit 603, an element processing unit 604, and a line arrangement unit 605, and can perform the same operations as the width acquisition unit 501, the element acquisition unit 502, the line grouping unit 503, the element processing unit 504, and the line arrangement unit 505, respectively, and are not described again here. In addition, when the row grouping unit 603 determines that no element group exists in the element sequence, the element obtaining unit 602 may continue to obtain a new element (for example, obtain another part of the search result from the search server) and add to the element sequence, so that the row grouping unit 603 continues to determine an element group corresponding to a row in the current element sequence.
In addition, when determining the element group, the line grouping unit 603 may also delete the last element in the element group and adjust the display height when the display height is lower than the second height threshold. By adjusting the display height, the row grouping unit 603 causes any adjacent elements to maintain a predetermined pitch when the element group after the deletion of the last element is uniformly arranged in the row. More specific implementations of the apparatus 600 are consistent with the method 400 and will not be described in detail herein.
FIG. 7 illustrates a block diagram of the components of a computing device. As shown in FIG. 7, the computing device includes one or more processors (CPUs or GPUs) 702, a communication module 704, a memory 706, a user interface 710, and a communication bus 708 that interconnects these components.
The processor 702 may receive and transmit data via the communication module 704 to enable network communications and/or local communications.
User interface 710 includes one or more output devices 712, including one or more speakers and/or one or more visual displays. The user interface 710 also includes one or more input devices 714, including, for example, a keyboard, a mouse, a voice command input unit or microphone, a touch screen display, a touch sensitive tablet, a gesture capture camera or other input buttons or controls, and the like.
The memory 706 may be a high-speed random access memory such as DRAM, SRAM, DDR RAM, or other random access solid state memory devices; or non-volatile memory, such as one or more magnetic disk storage devices, optical disk storage devices, flash memory devices, or other non-volatile solid-state storage devices.
The memory 706 stores a set of instructions executable by the processor 702, including:
an operating system 716, including programs for handling various basic system services and for performing hardware related tasks;
the application 718 includes various programs for implementing the page element arrangement method described above, and such programs can implement the processing flow in the above examples, for example, the application 718 may include a browser. The browser may include the arrangement means 500 of the page elements as shown in fig. 5 or the arrangement means 600 of the page elements as shown in fig. 6. Therefore, when the page is presented in the display, the page element arrangement device can obtain the width of the current display area and arrange the elements in each row in the display area, so that the elements in each row in the display area keep a preset interval, the display height is determined to be in a proper range, and the visual experience of the user in browsing the display area is improved.
In addition, each example of the present application may be realized by a data processing program executed by a data processing apparatus such as a computer. It is clear that a data processing program constitutes the present application. Further, the data processing program, which is generally stored in one storage medium, is executed by directly reading the program out of the storage medium or by installing or copying the program into a storage device (such as a hard disk and/or a memory) of the data processing device. Such a storage medium therefore also constitutes the present invention. The storage medium may use any type of recording means, such as a paper storage medium (e.g., paper tape, etc.), a magnetic storage medium (e.g., a flexible disk, a hard disk, a flash memory, etc.), an optical storage medium (e.g., a CD-ROM, etc.), a magneto-optical storage medium (e.g., an MO, etc.), and the like.
The present application thus also discloses a non-volatile storage medium having stored therein a data processing program for executing any one of the examples of the page element arrangement method 200 and method 400 of the present application.
In addition, the method steps described in this application may be implemented by hardware, for example, logic gates, switches, application Specific Integrated Circuits (ASICs), programmable logic controllers, embedded microcontrollers, and the like, in addition to data processing programs. Such hardware capable of implementing the methods described herein may also constitute the present application.
The above description is only a preferred example of the present application and should not be taken as limiting the present application, and any modifications, equivalents, improvements and the like made within the spirit and principle of the present application should be included in the scope of the present application.

Claims (9)

1. A method for arranging page elements is characterized by comprising the following steps:
in response to a page being zoomed, determining the width of a display area of an element to be presented in the page, and determining a predetermined spacing according to the width of the display area; for one row of the elements to be arranged in the display area, acquiring a part of search results determined by the search server in response to the search request, and taking the part as an element sequence to be arranged currently, wherein the element sequence comprises one or more elements;
and sequentially selecting one element in the element sequence to be added into an element set according to the width and the preset interval until the element set meets the following conditions: when the elements in the element set are scaled to a uniform display height according to the high-width ratio and are uniformly distributed in the row, any adjacent elements in the element set keep a preset spacing, and the sum of the widths of the elements in the row is consistent with the difference between the width of the display area and the sum of the spacings, the display height does not exceed a first height threshold, wherein the sum of the spacings is the product of the total number of the elements in the element set and the preset spacing;
determining the element set as an element group corresponding to the row in the element sequence, and determining a display height of the element group, so that when each element in the element group is scaled to the display height and uniformly arranged to the row, any adjacent element in the element group maintains the predetermined spacing;
when the element sequence is determined not to exist in the element group, continuously acquiring other parts of the search result from the search server and adding the other parts into the element sequence so as to continuously determine the element group corresponding to the row in the current element sequence;
when the display height is lower than a second height threshold, deleting the last element in the element group, and adjusting the display height so that any adjacent element maintains the predetermined spacing when the element group after the last element is deleted is uniformly arranged in the row;
respectively carrying out scaling processing on each element in the element group so as to enable the height of each element to be the display height; and
and uniformly arranging the elements subjected to the scaling processing into the row according to the preset spacing so as to enable any adjacent elements to maintain the preset spacing.
2. The method of claim 1, wherein said sequentially selecting an element of said sequence of elements to be added to a set of elements until the set of elements satisfies said condition comprises:
sequentially adding the elements in the element sequence into the element set and calculating the display height according to the following formula until the calculated display height does not exceed the first height threshold:
h=(W-p*i)/(R 1 +...+R i )
wherein W represents the width of the display area, p represents the predetermined pitch, i represents the serial number of the ith element in the element set, i is a positive integer greater than 1, and R 1 Represents the aspect ratio, R, of the 1 st element of the set of elements i Representing the aspect ratio of the ith element in the set of elements.
3. The method of claim 1, wherein the step of obtaining a portion of the search results determined by the search server in response to the search request as the current sequence of elements to be arranged comprises:
and extracting part or all of the elements from the elements of the part which are not divided into any element group as the element sequence to be arranged currently.
4. The method of claim 1, wherein each element in the sequence of elements is a still picture or a moving picture.
5. An arrangement apparatus of page elements, comprising:
the width acquisition unit is used for determining the width of a display area of an element to be presented in a page in response to the zooming adjustment of the page, and determining a preset interval according to the width of the display area;
an element acquisition unit that acquires, for one row of elements to be arranged in the display area, a part of search results determined by the search server in response to the search request and treats the part as an element sequence to be currently arranged, the element sequence including one or more elements;
and the line grouping unit is used for sequentially selecting one element in the element sequence to be added into an element set according to the width and the preset interval until the element set meets the following conditions: when the elements in the element set are scaled to a uniform display height according to the high-width ratio and are uniformly distributed in the row, any adjacent elements in the element set keep a preset spacing, and the sum of the widths of the elements in the row is consistent with the difference between the width of the display area and the sum of the spacings, the display height does not exceed a first height threshold, wherein the sum of the spacings is the product of the total number of the elements in the element set and the preset spacing; determining the element set as an element group corresponding to the row in the element sequence and determining a display height of the element group, so that when each element in the element group is scaled to the display height and uniformly arranged to the row, any adjacent element in the element group maintains the predetermined spacing;
when the element sequence is determined not to exist in the element group, continuously acquiring other parts of the search result from the search server and adding the other parts into the element sequence so as to continuously determine the element group corresponding to the row in the current element sequence;
when the display height is lower than a second height threshold, deleting a last element in the element group, and adjusting the display height so that any adjacent element maintains the predetermined spacing when the element group after deleting the last element is uniformly arranged in the row;
the element processing unit is used for respectively carrying out scaling processing on each element in the element group so as to enable the height of each element to be the display height; and
and the line arrangement unit is used for uniformly arranging the elements subjected to the scaling processing into the line according to the preset spacing so as to enable any adjacent elements to keep the preset spacing.
6. The apparatus of claim 5, wherein the row grouping unit is adapted to sequentially select an element of the sequence of elements to be added to a set of elements until the set of elements satisfies the condition:
sequentially adding the elements in the element sequence into the element set and calculating the display height according to the following formula until the calculated display height does not exceed the first height threshold:
h=(W-p*i)/(R 1 +...+R i )
wherein W represents the width of the display area, p represents the predetermined pitch, i represents the serial number of the ith element in the element set, i is a positive integer greater than 1, and R 1 Represents the aspect ratio, R, of the 1 st element of the set of elements i Representing the aspect ratio of the ith element in the set of elements.
7. A computing device, comprising:
one or more processors;
a memory; and
one or more programs stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for performing the method of any of claims 1-4.
8. A storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by a computing device, cause the computing device to perform the method of any of claims 1-4.
9. A program product storing instructions that, when executed by a computing device, cause the computing device to perform the method of any of claims 1-4.
CN201710990780.2A 2017-10-23 2017-10-23 Page element arrangement method and device, computing equipment and storage medium Active CN109697264B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710990780.2A CN109697264B (en) 2017-10-23 2017-10-23 Page element arrangement method and device, computing equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710990780.2A CN109697264B (en) 2017-10-23 2017-10-23 Page element arrangement method and device, computing equipment and storage medium

Publications (2)

Publication Number Publication Date
CN109697264A CN109697264A (en) 2019-04-30
CN109697264B true CN109697264B (en) 2023-04-07

Family

ID=66225753

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710990780.2A Active CN109697264B (en) 2017-10-23 2017-10-23 Page element arrangement method and device, computing equipment and storage medium

Country Status (1)

Country Link
CN (1) CN109697264B (en)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114528063B (en) * 2022-04-21 2022-07-12 苏州万店掌网络科技有限公司 Page display method, device, equipment and storage medium
CN114721620B (en) * 2022-05-12 2022-09-20 北京搜狐新动力信息技术有限公司 Data processing method and device

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH08255255A (en) * 1995-03-16 1996-10-01 Sony Corp Document information layout device and document information display device
CN102549544A (en) * 2009-09-30 2012-07-04 微软公司 Dynamic image presentation
CN103699609A (en) * 2013-12-13 2014-04-02 乐视网信息技术(北京)股份有限公司 Method and device for adjusting nonstandard elements of grid system
CN104111777A (en) * 2014-06-26 2014-10-22 小米科技有限责任公司 Method and device for picture display
US9116648B1 (en) * 2014-05-28 2015-08-25 Fundy Software Inc. Method for automatic photo album layout and printing

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9406093B2 (en) * 2013-06-11 2016-08-02 Facebook, Inc. Determining an image layout

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH08255255A (en) * 1995-03-16 1996-10-01 Sony Corp Document information layout device and document information display device
CN102549544A (en) * 2009-09-30 2012-07-04 微软公司 Dynamic image presentation
CN103699609A (en) * 2013-12-13 2014-04-02 乐视网信息技术(北京)股份有限公司 Method and device for adjusting nonstandard elements of grid system
US9116648B1 (en) * 2014-05-28 2015-08-25 Fundy Software Inc. Method for automatic photo album layout and printing
CN104111777A (en) * 2014-06-26 2014-10-22 小米科技有限责任公司 Method and device for picture display

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
张正栋(等)."SuperMap GIS应用与开发教程".《SuperMap GIS应用与开发教程》.2006, *

Also Published As

Publication number Publication date
CN109697264A (en) 2019-04-30

Similar Documents

Publication Publication Date Title
US8314809B1 (en) Selective rendering of off-screen content
CN107223241B (en) Contextual scaling
US10353721B2 (en) Systems and methods for guided live help
US10007711B2 (en) Data rendering optimization
US9817794B2 (en) Responsive rendering of data sets
CN101809573A (en) Updating content display based on cursor position
CN109697264B (en) Page element arrangement method and device, computing equipment and storage medium
CN107430477B (en) Techniques for displaying layouts and transitional layouts of a set of content items in response to user touch input
JP5264813B2 (en) Evaluation apparatus, evaluation method, and evaluation program
US9824151B2 (en) Providing a portion of requested data based upon historical user interaction with the data
KR20180117619A (en) Object management and visualization using computing devices
CA2940661C (en) Animating content display
CN114579912A (en) Page layout method, device, equipment and medium
US11126675B2 (en) Systems and methods for optimizing the selection and display of electronic content
KR20090096698A (en) Method and system for manipulating graphical images
CN110020132B (en) Keyword recommendation method and device, computing equipment and storage medium
JP2016095501A (en) Document layout for electronic display
CN111698548B (en) Video playing method and device
US20130328903A1 (en) Efficient cache preloading
US11410393B2 (en) Auto arranging wall in an augmented reality system
US9578083B1 (en) Dynamically designing shared content
US20190391718A1 (en) System and method for managing a scrolling operation
US9996505B2 (en) Managing the display of electronic documents having embedded graphical elements
CN110222322A (en) Edit methods, computer readable storage medium and terminal
Speicher W3touch: Crowdsourced evaluation and adaptation of web interfaces for touch

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant