CN114996618A

CN114996618A - Image display method, image display device, computer equipment and storage medium

Info

Publication number: CN114996618A
Application number: CN202210734074.2A
Authority: CN
Inventors: 曾干
Original assignee: Pingan Payment Technology Service Co Ltd
Current assignee: Pingan Payment Technology Service Co Ltd
Priority date: 2022-06-27
Filing date: 2022-06-27
Publication date: 2022-09-02

Abstract

The application relates to the technical field of image processing, and discloses an image display method, an image display device, computer equipment and a storage medium, wherein the image display method comprises the following steps: in response to a display instruction of the plurality of images, analyzing the display instruction, and determining a display width threshold, image size information and layout information of each image in the plurality of images; according to the layout information, the display width threshold and the image size information, carrying out layout processing on a plurality of images, and determining the position information of a target grid item occupied by each image in a screen window of the computer equipment, wherein the screen window comprises a plurality of grid items, and the grid items comprise the target grid item; and loading the plurality of images according to the layout information and the position information to display the plurality of images on the screen window. The method realizes the flexible layout of the images with unequal widths, unequal heights and the like, and improves the display effect of the images.

Description

Image display method, image display device, computer equipment and storage medium

Technical Field

The present application relates to the field of image processing technologies, and in particular, to an image display method and apparatus, a computer device, and a storage medium.

Background

At present, when displaying pictures, H5 web pages all set that several pictures are fixed in each row, and different pictures are compressed by different compression ratios, so that different pictures have the same width or height, and the pictures in each row are displayed dynamically. However, for the pictures uploaded by the users independently, due to different sizes, if the pictures are displayed in a forced uniform size, the pictures are intercepted or stretched, so that the picture proportion is influenced, the picture definition is reduced, and the visual effect is poor; if the picture is displayed according to the original size of the picture, the width of the picture may be larger than that of the screen, so that a user cannot visually check the complete picture, and the use experience of the user is reduced.

Disclosure of Invention

In view of this, the present application provides an image display method, an image display apparatus, a computer device, and a storage medium, so as to solve the problem of poor visual effect when displaying images with equal width or equal height.

In a first aspect, an image display method based on a grid layout is provided, which includes:

in response to a display instruction of the plurality of images, analyzing the display instruction, and determining a display width threshold, image size information and layout information of each image in the plurality of images;

according to the layout information, the display width threshold and the image size information, carrying out layout processing on a plurality of images, and determining the position information of a target grid item occupied by each image in a screen window of the computer equipment, wherein the screen window comprises a plurality of grid items, and the grid items comprise the target grid item;

according to the layout information and the position information, a plurality of images are loaded to display the plurality of images on the screen window.

In a second aspect, there is provided an image display device based on a grid layout, comprising:

the determining module is used for responding to the display instruction of the plurality of images, analyzing the display instruction, and determining the display width threshold, the image size information and the layout information of each image in the plurality of images;

the layout module is used for carrying out layout processing on the plurality of images according to the layout information, the display width threshold and the image size information and determining the position information of a target grid item occupied by each image in a screen window of the computer equipment, wherein the screen window comprises a plurality of grid items, and the plurality of grid items comprise the target grid item;

and the display module is used for loading a plurality of images according to the layout information and the position information so as to display the plurality of images on the screen window.

In a third aspect, a computer device is provided, comprising a memory, a processor and a computer program stored in the memory and executable on the processor, the processor implementing the steps of the grid layout based image display method described above when executing the computer program.

In a fourth aspect, a computer-readable storage medium is provided, in which a computer program is stored, which, when being executed by a processor, realizes the steps of the above-mentioned grid layout-based image display method.

In the scheme implemented by the image display method, the image display device, the computer equipment and the storage medium based on the grid layout, when a user needs to perform layout display on a plurality of images, a display width threshold of each image can be preset, the display width threshold of the image is taken as an initial display width according to the layout requirements of the plurality of images required by the user, and the image is scaled according to the actual image size information of the image in equal proportion to obtain the display height of the image. And then, referring to the display size (display width and display height) of each image, carrying out gridding layout on the plurality of images so as to determine the position information of the target grid item occupied by each image in the screen window of the computer equipment. Then, a plurality of images are loaded according to the layout information and the position information of the images in the screen window, so that the plurality of images are displayed on the screen window. On one hand, the scaling of a plurality of images is limited through a preset display width threshold of each image, so that the minimum width of image display is ensured, the definition of each image in display is ensured, and the display effect of the images is restored to the maximum extent; on the other hand, the display width threshold is only used as the scaling reference of the image display height, so that the image scaling is realized, each image presents different display sizes and layouts, a plurality of images can realize flexible layouts with unequal widths, unequal heights and the like, the display space of a screen is reasonably planned, the image layouts are more compact and reasonable, the user flow is saved, and the vivid visual effect is brought to the user; on the other hand, after the layout is generated according to the relevant size of the image, the image is loaded, so that the page loading speed is promoted, the page blank time is reduced, and the image display efficiency is improved.

The above description is only an overview of the technical solutions of the present application, and the present application may be implemented in accordance with the content of the description so as to make the technical means of the present application more clearly understood, and the detailed description of the present application will be given below in order to make the above and other objects, features, and advantages of the present application more clearly understood.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required to be used in the description of the embodiments of the present application will be briefly described below, and it is obvious that the drawings in the description below are only some embodiments of the present application, and it is obvious for those skilled in the art that other drawings may be obtained according to these drawings without inventive labor.

FIG. 1 is a schematic flow chart of an image display method based on grid layout according to the present application;

FIG. 2 is a flowchart illustrating one embodiment of step S20 of FIG. 1;

FIG. 3 is a flowchart illustrating one embodiment of step S22 of FIG. 2;

FIG. 4 is a flowchart illustrating one embodiment of step S30 of FIG. 1;

FIG. 5 is a second flowchart of the grid layout-based image display method of the present application;

FIG. 6 is one of the schematic diagrams of an image display based on a grid layout in the present application;

FIG. 7 is a second schematic diagram of the image display based on the grid layout in the present application;

FIG. 8 is a schematic diagram of an application environment of the grid layout-based image display method of the present application;

FIG. 9 is a schematic diagram of a grid layout-based image display device according to the present application;

fig. 10 is a schematic structural diagram of a computer device in the present application.

Detailed Description

The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are some, but not all, embodiments of the present application. All other embodiments obtained by a person of ordinary skill in the art based on the embodiments in the present application without making any creative effort belong to the protection scope of the present application.

Referring to fig. 1, fig. 1 is a schematic flow chart of an image display method based on a grid layout according to an embodiment of the present application, including the following steps:

s10: in response to a display instruction of the plurality of images, analyzing the display instruction, and determining a display width threshold, image size information and layout information of each image in the plurality of images;

the image may be a static plane image or a dynamic video image. The layout information includes a plurality of arrangement order of images, image layout direction, description information, component type, and rendering manner. The display width threshold of the image refers to the minimum display width which can meet the definition requirement after the image is zoomed. The image size information is used to describe the original size before image scaling, and includes the image width and the image height.

In this embodiment, when a user needs to perform layout display on a plurality of images, a display width threshold of each image may be preset, and layout information of the plurality of images may be configured according to a display requirement of the user on the plurality of images. The layout processing of the plurality of images can be triggered by the display instruction carrying the display width threshold, the layout information and the image size information of the plurality of images, so that each image can still ensure certain definition after the layout processing by using the display width threshold and the image size information, and the displayed images can show the visual effect required by a user through the layout information.

The image display method based on the grid layout can be applied to interface display schemes under various application scenes, for example, a plurality of images are displayed on the front end of an html (such as html5) page through an html page, and the html page is a web page or an application program interface of a mobile terminal displays a plurality of images.

In an actual application scenario, the step of setting the display width threshold value of each image comprises the following modes:

in the first mode, the user manually inputs the required display width threshold value while uploading the image.

The method II comprises the steps of taking image size information of an image as an initial value of the width and the height of the image, and carrying out scaling processing on the image according to different scaling ratios to obtain a plurality of scaling images corresponding to the image; determining the definition of the zoomed image through the low-frequency noise of the zoomed image and the edge definition of the image; and taking the minimum image width in the zoomed image with the definition larger than the preset definition as the display width threshold value of the image.

And inputting the image into a deep learning model, and determining a display width threshold of the image, wherein the deep learning model can be obtained by training a sample image and a corresponding width threshold label.

S20: according to the layout information, the display width threshold and the image size information, carrying out layout processing on the plurality of images, and determining the position information of a target grid item occupied by each image in a screen window of the computer equipment;

the screen window is used for displaying the image, and comprises a plurality of grid items, and the grid items comprise target grid items occupied by the image.

In this embodiment, a plurality of images are subjected to gridding layout with reference to the display size (display width and display height) of each image to determine position information of a target grid item occupied by each image in a screen window of a computer device. Therefore, the scaling of a plurality of images is limited through a preset display width threshold value of each image, the minimum width of image display is ensured, the definition of each image in display is ensured, and the display effect of the images is restored to the maximum extent; moreover, only the display width threshold is used as the scaling reference of the image display height, so that the image scaling is realized, each image presents different display sizes and layouts, a plurality of images can realize flexible layouts with unequal widths, unequal heights and unequal heights, the display space of a screen is reasonably planned, the image layouts are more compact and reasonable, the user flow is saved, and the agile visual effect is brought to the user;

specifically, before step S20, the method further includes the following steps: acquiring a grid unit; dividing the screen window into a plurality of grid items according to grid units so as to grid the screen window. The size of the grid unit may be related to the image size, for example, the image size information (unit: pixel) of the image a is 48 × 96, the image size information of the image B is 96 × 96, and the image size information of the image C is 96 × 48, the greatest common divisor of the height and the width of all the images is taken as the size of the grid unit, that is, the size of the grid unit is 48px, and if the screen size is 1920 × 1200, the screen is divided into 40 × 25 grid units, that is, 40 grid units in the height direction, and 25 grid units in the width direction. Alternatively, the size for configuring the designated grid unit, for example, leaving a spacing distance between images, the width of a screen window for display is 750px, the width is divided into 100, the width of each grid unit occupies 7.5px, and the width of each grid unit is set to 10 px.

In some embodiments of the present application, as shown in fig. 3, a specific entity alignment scheme is provided, and the layout information includes an arrangement order of the plurality of images and an image pitch; in S20, that is, according to the layout information, the display width threshold, and the image size information, performing layout processing on the plurality of images, and determining the position information of the target grid item occupied by each image in the screen window of the computer device, specifically includes the following steps:

s21: determining the display size information of each image according to the display width threshold and the image size information;

the display size information includes a display width and a display height, and the image size information includes an image width and an image height.

In step S21, the display width threshold is set as the display width of the image, and the quotient of the display width threshold and the image width is multiplied by the image height to obtain the display height of the image. Therefore, the image display definition is ensured, the equal scaling of the width and the height of the image is realized, and the display effect of the image is restored to the maximum extent.

For example, the display width threshold of one image is 150px, the image width is 200px, and the image height is 400 px. The default image has a display width of 150px, i.e., the target grid item occupies a width of 150px in the screen window. The display height of the image (display width/image width) × the image height is 300 px.

S22: according to the arrangement sequence and the image interval, according to the display size information and the window information of the screen window, determining the abscissa information and the ordinate information of the target grid item occupied by each image.

The arrangement order is a layout processing order for the plurality of images, the image pitch includes a first pitch and a second pitch, and the first pitch is a distance between boundaries of 2 adjacent images in the width direction. The second distance is the distance between the boundaries of 2 adjacent images in the height direction, and the first distance and the second distance can be the same or different and can be reasonably set according to the requirements of users. The window information includes window width, window height, number of grid cells, size of grid cells, and the like. The abscissa information includes a first abscissa and a second abscissa of the target grid item, the first abscissa and the second abscissa are used for representing two end point coordinates in the width direction of the target grid item, and similarly, the ordinate information includes a first ordinate and a second ordinate of the target grid item, and the first ordinate and the second ordinate are used for representing two end point coordinates in the height direction of the target grid item. The abscissa information and the ordinate information may be grid coordinates, and the abscissa and ordinate information of the grid items may be designed according to grid CSS attributes rowStart, rowEnd, columnStart and columnEnd, such as { first abscissa x: ', second abscissa end x: ', first ordinate y: ', second ordinate end y: ', width: ', height: } ".

For step S22, after the display size information is determined, the layout of each image in the screen window is reasonably planned by comparing the size between the display size information and the window information of the screen window according to the layout requirements (arrangement order and image spacing) of the multiple images required by the user and the image layout algorithm, and the abscissa information and the ordinate information of the target grid item occupied by each image are determined, so as to position the display position of the image in the screen window by the abscissa information and the ordinate information of the target grid item. Therefore, each image presents different display sizes and layouts, the plurality of images can realize flexible layout of unequal width, unequal height and unequal height, the display space of a screen is reasonably planned, the user flow is saved, and the vivid visual effect is provided for the user.

In a practical application scenario, a greedy algorithm (greedy algorithm) and a collision algorithm may be used to calculate the position occupied by each image, for example, from row 1 to row 10 and column 1 to column 5 of the grid, thereby completing a CSS style for pre-layout of all images in the grid.

In some embodiments of the present application, as shown in fig. 3, a specific entity alignment scheme is provided, the display size information comprising a display width and a display height; in S22, that is, according to the arrangement order and the image spacing, the abscissa information and the ordinate information of the target grid item occupied by each image are determined according to the display size information and the window information of the screen window, which specifically includes the following steps:

s221: determining the residual width of the window according to the abscissa of the screen window, the abscissa of a target grid item occupied by the (i-1) th image and a first interval;

for step S221, before the ith image is laid out, the remaining width of the window is obtained according to the difference between the abscissa of the screen window and the sum of the abscissa of the target grid item occupied by the ith-1 image and the image space, so that it can be determined whether the ith image and the ith-1 image can occupy the target grid item located in the same row, that is, whether the ith image can be laid out in the width direction of the screen window, according to the remaining width of the window and the display width of the ith image.

It will be appreciated that the abscissa of the screen window and the abscissa of the target grid item occupied by the i-1 th image used in calculating the remaining width of the window are adapted in view of the orientation of the different layouts of the images, e.g. from right to left layout, or from left to right layout. For example, in a left-to-right layout, the first picture is located at the leftmost side of the screen window, and the window remaining width is the abscissa of the rightmost side of the screen window- (the abscissa on the right side of the first picture + the coordinate corresponding to the image pitch). In the case of right-to-left layout, the first picture is located at the rightmost side of the screen window, and the window remaining width is the leftmost abscissa of the screen window (the left abscissa of the first picture + the coordinate corresponding to the image pitch).

S222: if the display width of the ith image is smaller than the residual width of the window, determining a first abscissa of a target grid item occupied by the ith image according to a second abscissa and a first interval of the target grid item occupied by the (i-1) th image;

s223: if the display width of the ith image is larger than the residual width of the window, respectively calculating the width difference between the display width of the ith image and the display width of the jth to (i-1) images, and determining a first abscissa of a target grid item occupied by the ith image according to the first abscissa of the image corresponding to the minimum value in the width difference;

the j image is an image which is close to the i image in the arrangement sequence, and the difference value between the abscissa of the j image and the abscissa of the screen window is smaller than a preset value, namely the image which is close to the boundary of the screen window, is the image which is closest to the i image and is not the i-1 image in the arrangement sequence. For example, as shown in FIG. 6, if i is 3, picture 1 is the jth image and picture 2 is the (n-1) th image. If i is 9, then picture 6 is the jth image and picture 8 is the (n-1) th image.

S224: determining a second abscissa of the target grid item occupied by the ith image according to the first abscissa of the target grid item occupied by the ith image and the display width of the ith image;

for steps S222 to S224, if the display width of the ith image is less than or equal to the remaining width of the window, it is indicated that there is enough accommodation space between the ith-1 th image and the boundary of the screen window in the width direction to arrange the ith image. Therefore, the second abscissa of the target grid item occupied by the (i-1) th image is shifted to the image layout direction according to the first interval to obtain the first abscissa of the unoccupied grid item, the abscissa of the boundary of the screen window far away from the (i-1) th image is taken as the second abscissa of the unoccupied grid item, and one of the first abscissa of the unoccupied grid item and the second abscissa of the unoccupied grid item is selected as the first abscissa of the target grid item occupied by the ith image according to the image layout direction.

On the contrary, if the display width of the ith image is larger than the remaining width of the window, it means that there is not enough accommodation space between the ith-1 image and the boundary of the screen window in the width direction to arrange the ith image, that is, the ith-1 image and the ith image cannot be adjacently arranged in the width direction. At this time, it is necessary to newly find an accommodation space in the height direction in which the ith image can be arranged, and then a width difference between the display width of the ith image and the display width of each of the jth to (i-1) th images is calculated. And determining the minimum width difference by comparing the width differences corresponding to the j to (i-1) th images, and further determining that the display width of the image corresponding to the minimum width difference is closest to the display width of the i-th image. And then, taking a first abscissa of the image corresponding to the minimum value in the width difference value as a first abscissa of the unoccupied grid item, taking an abscissa close to the boundary of the screen window of the (i-1) th image as a second abscissa of the unoccupied grid item, and selecting one of the first abscissa of the unoccupied grid item and the second abscissa of the unoccupied grid item according to the image layout direction as a first abscissa of the target grid item occupied by the ith image.

Further, after the first abscissa of the target grid item occupied by the ith image is determined, the first abscissa is taken as a starting point, and the deviation is performed along the width layout direction according to the display width of the ith image, so that the second abscissa of the target grid item occupied by the ith image is obtained.

S225: determining the maximum value of the ordinate in the occupied grid item according with the first abscissa and the second abscissa of the target grid item occupied by the ith image;

s226: determining a first vertical coordinate of a target grid item occupied by the ith image according to the maximum value of the vertical coordinate and the second interval;

s227: and determining a second vertical coordinate of the target grid item occupied by the ith image according to the first vertical coordinate of the target grid item occupied by the ith image and the display height of the ith image.

With respect to the vertical coordinate information of the ith image, with respect to the steps S225 to S227, the maximum value thereof is determined from the vertical coordinates of occupied grid items located within the first and second horizontal coordinate ranges of the target grid item occupied by the ith image, that is, the vertical coordinate of the already-arranged image adjacent to the ith image in the height direction. At this time, based on the principle of compact layout, the maximum value of the vertical coordinate is shifted by a second distance along the height layout direction, and the first vertical coordinate of the target grid item occupied by the ith image can be obtained. And after the first vertical coordinate is determined, shifting along the height layout direction according to the display height of the ith image by taking the first vertical coordinate as a starting point to obtain a second horizontal coordinate of the target grid item occupied by the ith image.

Through the scheme of this embodiment, can carry out compact arranging with different display size's image in order through parameter adjustment in horizontal/fore-and-aft direction for the image overall arrangement is nimble but not in disorder, has not only promoted the visual effect of image, can adapt the unequal width unequal height image stream overall arrangement of various different scenes moreover, and the range of application is wider, satisfies user's many-sided demand.

Specific examples thereof are given. And as shown in fig. 6, a CSS style of pre-layout of all pictures of grid is completed by an algorithm. Specifically, the back-end server returns picture list information through the acquired browser information, and the picture list includes 10 pictures (picture 1 to picture 10). The minimum width (display width threshold) of the picture display is set for each picture, and the display width threshold and the picture actual size of 10 pictures are shown in table 1. The screen has 768px as a width, a spacing distance of pictures is set aside, a screen window may have a width of 750px, the width is divided into 100 parts, each part occupies 7.5px, the height is set to 10px per unit, and picture container attributes (layout information) in which layout directions are from left to right and from top to bottom are set in CSS. The horizontal and vertical coordinates based on the CSS style can be determined by the number of grid cells, for the vertical coordinate (height): grid-row indicates from which row to start/how many rows to occupy, for example, grid-row:1/span17 indicates from row 1 to occupy 17 rows, and the vertical coordinates of the two end points of the picture are 1 and 17. For the abscissa (width): the grid-column-start indicates the starting of the several columns, and the grid-column-end indicates which column ends, for example, starting from the 1 st column to the 22 nd column, where the abscissa of the two end points of the picture is 1 and 22.

Watch 1

Number i	Display width threshold, px	Actual width of picture, px	Actual height of picture, px
				1	150	200	200
2	300	600	400
				3	200	500	300
4	200	400	600
				5	400	600	400
6	180	500	400
				7	100	300	200
8	100	300	200
				9	350	600	400
10	200	300	700

The layout processing includes: the picture 1, i.e. the first picture to perform the layout processing, has a display width threshold of 150px for the picture 1, an actual width of 200px for the picture, and a default display width of 150 px. At this time, since no other picture is arranged, the window width 750px of the screen window is the window remaining width. The picture 1 has a width and a height (width: 150 px; height: 150px), a width grid unit of 7.5px and a height grid unit of 10px, and the picture 1 occupies 20 units in terms of width/7.5 and 15 units in terms of height 150/10. And comparing to find that the display width of the picture 1 is smaller than the residual width of the window, determining that the abscissa of the left end point grid of the picture 1 is 1 according to the abscissa of the left side boundary of the screen window and the transverse picture interval, and determining that the abscissa of the right end point grid of the picture 1 is 21 according to the abscissa of the left end point grid of the picture 1 and the display width of the picture 1. After the abscissa is determined, the ordinate of the endpoint grid on the picture 1 is 1, and then the ordinate of the endpoint grid on the picture 1 is determined to be 16 according to the ordinate of the endpoint grid on the picture 1 and the display height of the picture 1, so that the layout of the picture 1 is completed.

Next, the picture 2 is processed, and the display width threshold of the picture 2 is 300px, the picture actual width is 600px, and the default display width is 300 px. When the picture 1 is arranged, the window remaining width is equal to the window width 750px of the screen window-the picture 1 display width 150 px-the horizontal picture interval 7.5px is equal to 592.5 px. The picture 2 shows a width and a height of (width: 300 px; height: 200px), a width grid cell of 7.5px and a height grid cell of 10px, and thus the picture 2 occupies 40 cells in terms of width 300/7.5 and 20 cells in terms of height 200/10. And comparing to find that the display width of the picture 2 is smaller than the residual width of the window, determining that the abscissa of the left end point grid of the picture 2 is 22 according to the abscissa and the transverse picture interval of the right end point grid of the picture 1, and determining that the abscissa of the right end point grid of the picture 2 is 62 according to the abscissa of the left end point grid of the picture 2 and the display width of the picture 2. After the abscissa is determined, since the picture 2 can be arranged horizontally adjacent to the picture 1, the ordinate of the endpoint grid on the picture 2 is 1, and then the ordinate of the endpoint grid under the picture 2 is determined to be 21 according to the ordinate of the endpoint grid on the picture 2 and the display height of the picture 2, thereby completing the layout of the picture 2. Similarly, the display width threshold of the picture 3 is 200px, the actual picture width is 500px, and the default display width is 200 px. When the pictures 1 and 2 are arranged, the window residual width is 750px of the screen window-picture 1 display width 150 px-picture 2 display width 300 px-horizontal picture pitch 7.5px × 2 is 285 px. Picture 3 shows width and height (width: 200 px; height: 120px), width grid cell is 7.5px, height grid cell is 10px, and picture 2 occupies 27 cells in width/7.5 and 12 cells in height 120/10. The comparison shows that the display width of the picture 3 is smaller than the residual width of the window, and the algorithm of the reference picture 2 lays out the picture 3, and the abscissa of the picture 3 is determined to be 63 and 90, and the ordinate is determined to be 1 and 13.

For picture 4, the display width threshold for picture 4 is 200px, the picture actual width is 400px, and the default display width is 200 px. When the pictures 1 to 3 are arranged, the window remaining width is equal to the window width 750px of the screen window-picture 1 display width 150 px-picture 2 display width 300 px-picture 3 display width 200 px-horizontal picture interval 7.5px × 3 is equal to 77.5 px. Picture 4 shows a width and a height of (width: 200 px; height: 300px), a width grid cell of 7.5px and a height grid cell of 10px, and thus picture 2 occupies 27 cells, 200/7.5, and 300/10 cells, respectively. The display width of the picture 4 is larger than the residual width of the window through comparison, the heights of the three previous pictures are different, the most matched width is considered preferentially, and the gap between the heights of the pictures is shortened as much as possible. Panel 1 shows width 150px <200px, unsatisfied; panel 2 shows width 300px >200px, satisfied; picture 3 shows that the width 200px is 200px, which is satisfied. The algorithm preferentially considers the approximate width, so that the picture 4 is selected to follow the picture 3 and closely attach to the lower part of the picture 3, at this time, the columns of the picture 4 can only start from 63 columns, namely the abscissa of the endpoint grid at the left side of the picture 4 is 63, and then the abscissa of the endpoint grid at the right side of the picture 4 is determined to be 90 according to the abscissa of the endpoint grid at the left side of the picture 4 and the display width of the picture 4. After the abscissa is determined, since the picture 4 and the picture 3 are arranged vertically adjacent to each other, the ordinate of the endpoint grid on the picture 4 is 14, and then the ordinate of the endpoint grid under the picture 4 is determined to be 44 according to the ordinate of the endpoint grid on the picture 4 and the display height of the picture 4, thereby completing the layout of the picture 4.

For picture 5, the display width threshold for picture 5 is 400px, and the true width is 600 px. There are currently two widths, under panel 1: 150px <400px, not satisfied; 300px <400px under picture 2 is also not satisfied; 200px <400px under FIG. 4, also not satisfied; and the line number is continuously moved downwards, and the width 450px which is shared by the picture 1 and the picture 2 is larger than 400px, so that the requirement is met. Again, if the display width threshold of picture 6 is 180px, and 450px-400px is 50px <180px, then this area can only be used for the layout of picture 5. The layout of the picture 5 is performed with reference to the algorithm of the picture 2, which is not described in detail herein.

For picture 6, the display width threshold for picture 6 is 180px, and the true width is 500 px. The picture 6 cannot be arranged transversely adjacent to the picture 5, the heights of the two previous pictures are different, the most matched width is considered preferentially, and the gap between the heights of the pictures is shortened as much as possible. Panel 4 shows width 200px >180px, satisfied; panel 5 shows widths 400px >200px, also satisfied. The algorithm gives priority to the approximate width, so that the picture 6 is selected to follow the picture 4 and closely attach to the lower part of the picture 4, and the picture 6 is laid out with reference to the algorithm of the picture 4, which is not described herein again.

Similarly, the algorithm referring to the picture 2 lays out the pictures 7, 8 and 10, and the algorithm referring to the picture 4 lays out the picture 9, which is not described herein again.

In some embodiments, before the step of S223, that is, before calculating the width difference between the display width of the ith image and the display widths of the jth to (i-1) images, respectively, the image display method based on the grid layout further includes the steps of: and updating the abscissa information and the ordinate information of the target grid item occupied by the j to (i-1) th images according to at least one of the display width of the j to (i-1) th images, the window width of the screen window and the first distance.

In this embodiment, after confirming that the display width of the ith image is larger than the remaining width of the window, it is described that the (i-1) th image and the ith image cannot be adjacently arranged in the width direction, and at this time, with respect to the window width, there may be a partially blank area in a person when arranging the (j) th to (i-1) th images, in order to avoid layout margins. The horizontal coordinate information and the vertical coordinate information of the target grid item occupied by the jth to (i-1) th images can be updated through the total display width of the jth to (i-1) th images and the window width of the screen window, so that the screen window can display more images, the layout of the multiple images is compact and reasonable, and the overall display effect of the multiple images is improved.

Specifically, the display width of each image in the j to (i-1) th images is accumulated to obtain the total display width of the j to (i-1) th images. The difference between the display width and the window width, which is the width of the margin portion, is calculated as the product of the first pitch and the number of the j (th) to (i-1) th images. The width of the margin portion is allocated to each of the j to (i-1) th images in a ratio such that the j to (i-1) th images can be partially extended in the width direction, thereby enlarging the display width of the j to (i-1) th images. It is worth mentioning that after the display width of the j to (i-1) th images is expanded, the display height of the j to (i-1) th images is recalculated according to the updated display width to ensure the equal scaling of the images.

It should be noted that, in order not to change the definition of the image, when updating the abscissa information and the ordinate information of the target grid item occupied by the j-th to (i-1) -th images, the display width of the updated image is ensured to be as small as possible and not larger than the actual image width.

Specifically, as shown in fig. 7, by comparing and finding that the display width of the picture 4 is greater than the window residual width, the window residual width is 77.5px, and the window residual width is allocated to the picture 1, the picture 2 and the picture 3, and the updated display width of the picture 1 is equal to the threshold of the display width of the picture 1 +77.5 × the real width of the picture 1/(the real width of the picture 1 + the real width of the picture 2 + the real width of the picture 3), so that the updated display width of the picture 1 is 165.4/7.5 equal to 22 units, and the height of the updated display width is 165/10 equal to 17 units; similarly, the updated picture 2 display width is the picture 2 display width threshold +77.5 × picture 2 real width/(picture 1 real width + picture 2 real width + picture 3 real width), and the updated picture 3 display width is the picture 1 display width threshold +77.5 × picture 3 real width/(picture 1 real width + picture 2 real width + picture 3 real width). It is worth mentioning that since the already arranged pictures are different in height, with respect to the picture 4 and the picture 10, only the margin width that can be used to stretch the image can be calculated with reference to the difference between the display width of the adjacent picture in the longitudinal direction and the display width of the picture and the first distance. For example, the display width of both the picture 7 and the picture 8 is 100px, and the real width is 300 px. The recently fillable line is below picture 5, and the display width of picture 5 after update is 511>100+100, so that picture 7 and picture 8 are equally allocated with a width 255px <300px (true width).

S30: and loading a plurality of images according to the layout information and the position information.

According to the scheme, when a user needs to perform layout display on a plurality of images, the display width threshold of each image can be preset, the display width threshold of each image is used as the initial display width according to the layout requirements of the plurality of images required by the user, and the images are scaled according to the actual image size information of the images in an equal proportion mode to obtain the display height of the images. And then, referring to the display size (display width and display height) of each image, carrying out gridding layout on the plurality of images so as to determine the position information of the target grid item occupied by each image in the screen window of the computer device. Then, a plurality of images are loaded according to the layout information and the position information of the images in the screen window, so that the plurality of images are displayed on the screen window.

According to the scheme, firstly, the scaling of a plurality of images is limited through the preset display width threshold of each image, the minimum width of image display is ensured, the definition of each image in display is ensured, and the display effect of the images is restored to the maximum extent; secondly, only the display width threshold is used as the scaling reference of the image display height, so that the image scaling is realized, each image presents different display sizes and layouts, a plurality of images can realize flexible layouts with unequal widths, unequal heights and unequal heights, the display space of a screen is reasonably planned, the image layouts are more compact and reasonable, the user flow is saved, and the vivid visual effect is brought to the user; thirdly, after the layout is generated according to the relative size of the image, the image is loaded, so that the page loading speed is promoted, the page blank time is reduced, and the image display efficiency is improved.

In some embodiments of the present application, as shown in fig. 4, a specific entity alignment scheme is provided, in S30, that is, according to the layout information and the position information, a plurality of images are loaded, which specifically includes the following steps:

s31: acquiring address information of a plurality of images with different definitions;

s32: screening target address information of a plurality of images from address information with different definitions according to the definitions corresponding to the computer equipment;

s33: acquiring a plurality of images according to the target address information;

s34: and filling the plurality of images into the corresponding target grid items respectively according to the layout information and the position information.

For steps S31-S34, the destination address information of the image corresponding to the definition is returned as needed according to the screen resolution, after the image layout is completed, a plurality of images are obtained according to the destination address information, and then the plurality of images are respectively filled into the destination grid items corresponding to the position information determined during the layout according to the layout information, so as to display the plurality of images. Therefore, the method can adapt to the resolution requirements of different computer equipment screens, saves user flow, generates the layout in advance, and loads images after the layout is completed, so that the interface loading speed is increased, the time for interface blank leaving is avoided, and the use experience of users is improved.

Specifically, the address information may be represented in the form of a resource locator (URL).

In some embodiments of the present application, as shown in fig. 5, a specific entity alignment scheme is provided, and the following steps are further included after S30:

s40: and responding to the editing operation input of the screen window, and processing the plurality of images displayed in the screen window according to the editing mode corresponding to the editing operation input.

In this embodiment, after the screen window displays the plurality of images, if the user is not satisfied with the layout of the system image, the layout of the plurality of images can be edited through editing operation input, so as to implement the custom editing function of the plurality of images.

The editing manner includes moving, adding, deleting, expanding, shrinking, and the like, and the embodiment of the present application is not particularly limited.

Specifically, the editing operation input includes, but is not limited to, a click input, a key input, a fingerprint input, a slide input, a press input. The key input operation includes, but is not limited to, a power key, a volume key, a single-click input of a home menu key, a double-click input, a long-press input, a combination key input, etc. to the computer device.

It should be understood that, the sequence numbers of the steps in the foregoing embodiments do not imply an execution sequence, and the execution sequence of each process should be determined by functions and internal logic of the process, and should not constitute any limitation to the implementation process of the embodiments of the present application.

The image display method based on the grid layout provided by the embodiment of the application can be applied to the application environment as shown in fig. 8, wherein the client communicates with the server through the network. The client may be, but is not limited to, various personal computers, laptops, smartphones, tablets, and portable wearable devices. The server can be implemented by an independent server or a server cluster composed of a plurality of servers.

In one embodiment, an image display apparatus based on a grid layout is provided, and the image display apparatus based on a grid layout corresponds to the image display method based on a grid layout in the above embodiments one to one. As shown in fig. 9, the image display device based on the grid layout includes a determination module 901, a layout module 902, and a display module 903. The detailed description of each functional module is as follows:

a determining module 901, configured to, in response to a display instruction of a plurality of images, parse the display instruction, and determine a display width threshold, image size information, and layout information of each image in the plurality of images; a layout module 902, configured to perform layout processing on multiple images according to the layout information, the display width threshold, and the image size information, and determine position information of a target grid item occupied by each image in a screen window of the computer device, where the screen window includes multiple grid items, and the multiple grid items include the target grid item; and a display module 903, configured to load the plurality of images according to the layout information and the position information, so as to display the plurality of images on the screen window.

In one embodiment, the layout information includes an arrangement order and an image pitch of the plurality of images; the layout module 902 is specifically configured to: determining the display size information of each image according to the display width threshold and the image size information; according to the arrangement sequence and the image interval, according to the display size information and the window information of the screen window, determining the abscissa information and the ordinate information of the target grid item occupied by each image.

In one embodiment, the display size information includes a display width and a display height; the layout module 902 is specifically configured to: determining the residual width of the window according to the abscissa of the screen window, the abscissa of a target grid item occupied by the (i-1) th image and the first interval; if the display width of the ith image is smaller than or equal to the residual width of the window, determining a first abscissa of a target grid item occupied by the ith image according to a second abscissa and a first interval of the target grid item occupied by the (i-1) th image; if the display width of the ith image is larger than the residual width of the window, respectively calculating the width difference between the display width of the ith image and the display width of the jth to (i-1) images, and determining a first abscissa of a target grid item occupied by the ith image according to the first abscissa of the image corresponding to the minimum value in the width difference; determining a second abscissa of the target grid item occupied by the ith image according to the first abscissa of the target grid item occupied by the ith image and the display width of the ith image; the jth image is an image which is close to the ith image in the arrangement sequence, and the difference between the abscissa of the jth image and the abscissa of the screen window is smaller than a preset value.

In an embodiment, the layout module 902 is specifically configured to: determining the maximum value of the ordinate in the occupied grid item according with the first abscissa and the second abscissa of the target grid item occupied by the ith image; determining a first vertical coordinate of a target grid item occupied by the ith image according to the maximum value of the vertical coordinate and the second interval; and determining a second vertical coordinate of the target grid item occupied by the ith image according to the first vertical coordinate of the target grid item occupied by the ith image and the display height of the ith image.

In one embodiment, the image display device based on the grid layout further includes: and the updating module (not shown in the figure) is used for updating the abscissa information and the ordinate information of the target grid item occupied by the j (th) to (i-1) th images according to at least one of the display width of the j (th) to (i-1) th images, the window width of the screen window and the first distance.

In one embodiment, the image display device based on the grid layout further includes: an obtaining module (not shown in the figure) for obtaining address information of different definitions of the plurality of images; the determining module 901 is further configured to screen target address information of multiple images from address information with different definitions according to the definitions corresponding to the computer device; the acquisition module is also used for acquiring a plurality of images according to the target address information; the display module 903 is specifically configured to fill the multiple images into the corresponding target grid items according to the layout information and the position information.

In one embodiment, the image display device based on the grid layout further includes: and an editing module (not shown in the figure) which is used for responding to the editing operation input of the screen window and processing the plurality of images displayed in the screen window according to the editing mode corresponding to the editing operation input.

The application provides an image display device based on grid layout, when a user needs to perform layout display on a plurality of images, a display width threshold value of each image can be preset, the display width threshold value of each image is used as an initial display width according to the layout requirements of the plurality of images required by the user, and the images are scaled according to the actual image size information of the images in an equal proportion mode to obtain the display height of the images. And then, referring to the display size (display width and display height) of each image, carrying out gridding layout on the plurality of images so as to determine the position information of the target grid item occupied by each image in the screen window of the computer device. Then, a plurality of images are loaded according to the layout information and the position information of the images in the screen window, so that the plurality of images are displayed on the screen window. On one hand, the scaling of a plurality of images is limited through a preset display width threshold of each image, the minimum width of image display is ensured, the definition of each image in display is ensured, and the display effect of the images is restored to the maximum extent; on the other hand, the display width threshold is only used as the scaling reference of the image display height, so that the image scaling is realized, each image presents different display sizes and layouts, a plurality of images can realize flexible layouts with unequal widths, unequal heights and unequal heights, the display space of a screen is reasonably planned, the image layouts are more compact and reasonable, the user flow is saved, and the vivid visual effect is brought to the user; on the other hand, after the layout is generated according to the relevant size of the image, the image is loaded, so that the page loading speed is promoted, the page blank time is reduced, and the image display efficiency is improved.

For specific definition of the image display device based on the grid layout, reference may be made to the above definition of the image display method based on the grid layout, and details thereof are not repeated here. The respective modules in the above-described image display apparatus based on the grid layout may be entirely or partially implemented by software, hardware, and a combination 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 one embodiment, there is provided a computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the following steps when executing the computer program:

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 response to a display instruction of the plurality of images, analyzing the display instruction, and determining a display width threshold, image size information and layout information of each image in the plurality of images; according to the layout information, the display width threshold and the image size information, carrying out layout processing on a plurality of images, and determining the position information of a target grid item occupied by each image in a screen window of the computer equipment, wherein the screen window comprises a plurality of grid items, and the grid items comprise the target grid item; and loading the plurality of images according to the layout information and the position information to display the plurality of images on the screen window.

In one embodiment, a computer device, which may be a client, is provided, and its internal structure is shown in fig. 10. 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 of the computer device is configured to provide computing and control capabilities. The memory of the computer device comprises a nonvolatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of an operating system and computer programs in the non-volatile storage medium. The network interface of the computer device is used for communicating with an external server through a network connection. The computer program is executed by a processor to implement the functions or steps of a grid layout based image display method.

It should be noted that, the functions or steps that can be implemented by the computer-readable storage medium or the computer device can be correspondingly described in the foregoing method embodiments, and for avoiding repetition, the description is not repeated here.

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 (Synchlink) DRAM (SLDRAM), Rambus (Rambus) direct RAM (RDRAM), direct bused dynamic RAM (DRDRAM), and bused dynamic RAM (RDRAM).

It will be apparent to those skilled in the art that, for convenience and brevity of description, only the above-mentioned division of the functional units and modules is illustrated, and in practical applications, the above-mentioned function distribution may be performed by different functional units and modules according to needs, that is, the internal structure of the apparatus is divided into different functional units or modules to perform all or part of the above-mentioned functions.

Although the present invention has been described in detail with reference to the foregoing embodiments, it should be understood by those skilled in the art that various changes and modifications may be made, and equivalents may be substituted for elements thereof; such modifications and substitutions do not substantially depart from the spirit and scope of the embodiments of the present invention, and are intended to be included within the scope of the present invention.

Claims

1. An image display method based on a grid layout, comprising:

in response to a display instruction of a plurality of images, resolving the display instruction, and determining a display width threshold, image size information and layout information of each image in the plurality of images;

performing layout processing on the plurality of images according to the layout information, the display width threshold and the image size information, and determining position information of a target grid item occupied by each image in a screen window of a computer device, wherein the screen window comprises a plurality of grid items, and the grid items comprise the target grid item;

and loading the plurality of images according to the layout information and the position information so as to display the plurality of images on the screen window.

2. The grid layout-based image display method according to claim 1, wherein the layout information includes an arrangement order of the plurality of images and an image pitch; the performing layout processing on the plurality of images according to the layout information, the display width threshold and the image size information to determine the position information of the target grid item occupied by each image in the screen window of the computer device includes:

determining the display size information of each image according to the display width threshold and the image size information;

and according to the arrangement sequence and the image intervals, determining the abscissa information and the ordinate information of the target grid item occupied by each image according to the display size information and the window information of the screen window.

3. The grid layout-based image display method according to claim 2, wherein the display size information includes a display width and a display height; determining abscissa information of a target grid item occupied by each image according to the arrangement sequence and the image interval and according to the display size information and the window information of the screen window, wherein the abscissa information comprises:

determining the residual width of the window according to the abscissa of the screen window, the abscissa of a target grid item occupied by the (i-1) th image and the first interval;

if the display width of the ith image is smaller than or equal to the residual width of the window, determining a first abscissa of a target grid item occupied by the ith image according to a second abscissa of the target grid item occupied by the (i-1) th image and the first interval;

if the display width of the ith image is larger than the residual width of the window, respectively calculating the width difference between the display width of the ith image and the display width of the jth to (i-1) images, and determining a first abscissa of a target grid item occupied by the ith image according to the first abscissa of the image corresponding to the minimum value in the width difference;

determining a second abscissa of the target grid item occupied by the ith image according to the first abscissa of the target grid item occupied by the ith image and the display width of the ith image;

and the j image is an image which is close to the i image in the arrangement sequence and has a difference value smaller than a preset value between the abscissa of the j image and the abscissa of the screen window.

4. The method for displaying an image based on a grid layout according to claim 3, wherein the determining, according to the arrangement order and the image spacing, the ordinate information of the target grid item occupied by each image according to the display size information and the window information of the screen window comprises:

determining the maximum value of the ordinate in the occupied grid item according with the first abscissa and the second abscissa of the target grid item occupied by the ith image;

determining a first vertical coordinate of a target grid item occupied by the ith image according to the maximum value of the vertical coordinate and the second interval;

and determining a second vertical coordinate of the target grid item occupied by the ith image according to the first vertical coordinate of the target grid item occupied by the ith image and the display height of the ith image.

5. The grid layout-based image display method according to claim 3, wherein before the width difference between the display width of the ith image and the display widths of the jth to (i-1) th images is calculated, respectively, the method further comprises:

and updating the abscissa information and the ordinate information of the target grid item occupied by the j to (i-1) th images according to at least one of the display width of the j to (i-1) th images, the window width of the screen window and the first distance.

6. The method for displaying an image based on a grid layout according to any one of claims 1 to 5, wherein the loading the plurality of images in accordance with the layout information and the position information comprises:

acquiring address information of a plurality of images with different definitions;

screening target address information of a plurality of images from the address information with different definitions according to the definitions corresponding to the computer equipment;

acquiring the plurality of images according to the target address information;

and filling the plurality of images into corresponding target grid items respectively according to the layout information and the position information.

7. The method for displaying an image based on a grid layout according to any one of claims 1 to 5, further comprising:

and responding to the editing operation input of the screen window, and processing the plurality of images displayed in the screen window according to the editing mode corresponding to the editing operation input.

8. An image display apparatus based on a grid layout, comprising:

the device comprises a determining module, a display module and a display module, wherein the determining module is used for responding to a display instruction of a plurality of images, analyzing the display instruction and determining a display width threshold value, image size information and layout information of each image in the plurality of images;

a layout module, configured to perform layout processing on the multiple images according to the layout information, the display width threshold, and the image size information, and determine position information of a target grid item occupied by each image in a screen window of a computer device, where the screen window includes multiple grid items, and the multiple grid items include the target grid item;

and the display module is used for loading the plurality of images according to the layout information and the position information so as to display the plurality of images on the screen window.

9. A computer device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, characterized in that the processor implements the steps of the grid layout based image display method according to any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium, in which a computer program is stored, which, when being executed by a processor, carries out the steps of the grid layout based image display method according to any one of claims 1 to 7.