Mini program waterfall flow solves the problem of too large height gap between the left and right sides

If we want to achieve a waterfall flow layout effect and display it in order from left to right, the CSS layout method cannot meet our needs for the time being. Refer to the waterfall flow effect of Xiaohongshu. Xiaohongshu is divided into left and right columns, and it can be displayed according to odd and even numbers.

 <view class=waterfall> <view class=waterfall-left> <view wx:if={{index%2 == 0}} class=item></view> </view> <view class=waterfall-right> <view wx:if={{index%2 == 1}} class=item></view> </view></view>

But here comes the problem. With the uncertainty of the height of each element, there is a high probability that there will be a big difference in height between the left and right columns.

To solve this problem, we need to find out the reason why the height of each element is different. Generally, it is the height of the picture, or it may be some areas displayed according to the conditions. It is recommended that only the height of the picture is different, and the height of other parts remains unchanged. , which makes our calculations simple.

The general idea is to get the height of the left and right columns. To calculate the height of the left and right columns, please 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 an ideal state, but it is impossible for us to cut the elements. We need to know whether there are elements on the higher side that are suitable for movement. If minH the smallest element in the column with the highest height, is less than the difference threshold , then we can move it. , you can take the element minH on the long side that is closest to half the height of the difference (usually the one with the smallest height, you can also move the one with the smallest height cleverly). If the element with the smallest height is larger than the difference, there is no need to move it.

So how to move, the element is given an attribute position by default, the value is center. If the element is to be moved to the left, then give the element an attribute: position:left; it will be displayed first according to the position attribute, and then according to odd and even numbers, as follows :

 <view class=waterfall> <view class=waterfall-left> <view wx:if={{item.position=='left' || (index%2 == 0&&item.position=='center')}} class =item></view> </view> <view class=waterfall-right> <view wx:if={{item.position=='right' || (index%2 == 1&&item.position=='center ')}} class=item></view> </view></view>

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

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

1. The interface returns the width and height of the image

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

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

In this way, while getting the data, we can know whether an element needs to be moved. After processing the data, it is immediately rendered to the view layer.

This method is of course the most worry-free, but the interface may not return the width and height of the image, so the second method must be used.

2. The interface does not return the width and height of the image. The width and height of the image are obtained in the image load event.

Listen to the load event of the image and obtain the width and height of the image. After the last image is loaded, use boundingClientRect to measure the height of the two columns and obtain the height difference.

In this method, you must measure whether an element needs to be moved after the image is loaded. The movement of the element will be more obvious.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.