Uniform Column Height Picture Layout Method
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
The existing waterfall layout method for displaying multiple pictures results in irregular column heights, leading to poor display effects due to non-zero height differences between columns, causing the pictures to be displayed in an irregular and aesthetically unpleasing manner.
Innovation Solution
A method that adjusts the height of each column of containers to a uniform first height, calculates the height increment for each container based on the difference from the first height, adjusts the ordinate and width of each container, and adjusts the abscissa to ensure equal column heights, thereby achieving a more regular and aesthetically pleasing layout.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Productivity
If the waterfall layout method is used to arrange containers in columns with equal width, then the layout process is simple and efficient, but the column heights become unequal resulting in poor display effect
Solution Approach 1:
The patent changes the height parameter of containers from their originally calculated values to a unified target height. By calculating a height adjustment value for each container based on the difference between its original height and the target height, and then applying this adjustment uniformly across all containers, the system transforms unequal column heights into equal column heights, resolving the display regularity issue while maintaining the waterfall layout structure
Solution Approach 2:
The patent applies equipotentiality by making all columns reach the same height level (target height). By calculating the height adjustment needed for each column and applying it uniformly, all columns are brought to an equal height state, eliminating the height differences that cause irregular display effects, similar to how equipotential surfaces equalize potential energy across a system
2Manufacturing precision
If the container heights are adjusted to achieve equal column heights, then the display effect is improved, but the layout calculation complexity increases
Solution Approach 1:
The patent performs preliminary calculation of the target height and height adjustment values before actually rendering the containers. By pre-calculating how much each container's height needs to be adjusted and storing these adjustment values, the system avoids complex real-time calculations during rendering, thus reducing the actual layout complexity while achieving equal column heights
Solution Approach 2:
The patent segments the height adjustment process into independent calculations for each container. Instead of solving a complex system of equations for all containers simultaneously, it calculates the height adjustment for each container independently based on simple formulas involving the target height and original dimensions, thereby simplifying the overall calculation complexity
Data Source
AI summary
A method and apparatus for displaying a picture including obtaining n columns of containers; obtaining a height of each column of containers, and taking a maximum value of the obtained heights as a first height; for each target column of containers, determining a height increment of each container in the target column of containers according to a difference between a height of the target column of containers and the first height, and adjusting an ordinate of each container and a height of each container in the target column of containers according to the height increment of each container in the target column of containers; for each column of containers, adjusting a width of each container in the column of containers according to a second height, a ratio of a height of the column of containers to the second height, a preset container gap, the number n of columns, and a width of a display interface; and displaying a corresponding picture in each container after the height, width, abscissa, and ordinate are adjusted. The method can produce beautiful display effects of pictures.

