Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to solve the problem of excessive height gap between the left and right sides of Mini Program Falls flow". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how the Mini Program Falls flow solves the problem of excessive height gap between the left and right sides.

If we want to achieve the layout effect of waterfall flow, and display it from left to right, css layout can not meet our needs for the time being. Referring to the waterfall flow effect of Little Red Book, Little Red Book is divided into left and right columns, which can be displayed according to odd and even numbers.

But the problem comes, with the uncertainty of the height of each element, there is a good chance that there will be a big difference in height between the left and right columns.

Solution:

To solve this problem, we need to find out the reasons for the difference in the height of each element, generally the height of the picture, or some areas displayed according to the conditions. it is suggested that only the height of the picture is different, and the height of other parts remains the same. this will make our calculation easier.

About the idea, get the height of the left and right columns, calculate the height of the left and right columns, enter the code degree difference, and move 1 / 2 of the difference threshold between the two columns, as shown in the figure:

The above is the ideal state, but we can not cut the element, we need to know whether the high side of the element is in line with the movement of the element, if the height of the column with the smallest height minH is less than the difference threshold, then we can move, we can take the long side with the difference of 1/2 of the height of the closest element minH (usually the height of the smallest one, you can also skillfully move the smallest height). If the element with the lowest height is larger than the difference, there is no need to move.

By default, the element is given an attribute position with a value of center. If the element is to be moved to the left, an attribute is given to the element: position:left; is displayed first according to the position attribute, followed by odd and even numbers, as shown below:

At this point, the problem of large height difference can be solved.

How do we calculate the height of the two columns?

The point is to get the width and height of the picture, so we can know the height of the two columns. There are two situations here:

1. API returns the width and height of the picture

The API returns the width and height of the image, so we can directly accumulate the height of the image, so we can compare the height of the two columns and get the height difference.

If the minH of the higher side is smaller than the difference threshold of the height of the two columns, that is, minH < threshold, then the minH needs to be moved

In this way, when we get the data, we can know whether an element needs to be moved. Render to the view layer as soon as you finish processing the data.

This method is of course the most worry-free, but the interface may not return the width and height of the image, so you have to use the second method.

two。 The API does not return the width and height of the picture, but gets the width and height of the picture in the picture load event

Listen to the load event of the picture to get the width and height of the picture. After the load of the last picture, measure the height of the two columns with boundingClientRect to get the height difference.

This method must be loaded after the picture, and then measure whether an element needs to move, the element movement will be more obvious.

At this point, I believe you have a deeper understanding of "how to solve the problem of excessive height gap between the left and right sides of Mini Program Falls flow". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.