폭포 흐름 레이아웃 효과를 얻고 이를 왼쪽에서 오른쪽으로 표시하려는 경우 CSS 레이아웃 방법은 당분간 우리의 요구를 충족할 수 없습니다. Xiaohongshu의 폭포 흐름 효과를 참조하십시오. Xiaohongshu는 왼쪽과 오른쪽 열로 나누어져 있으며 홀수와 짝수에 따라 표시될 수 있습니다.
<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>그러나 여기서 문제가 발생합니다. 각 요소의 높이가 불확실하기 때문에 왼쪽 열과 오른쪽 열 사이에 큰 높이 차이가 있을 가능성이 높습니다.
해결책:이 문제를 해결하려면 각 요소의 높이가 다른 이유를 찾아야 합니다. 일반적으로 그림의 높이이거나 조건에 따라 일부 영역이 표시될 수도 있습니다. 그림의 높이가 달라지고 다른 부분의 높이는 변경되지 않으므로 계산이 간단해집니다.
일반적인 아이디어는 왼쪽 및 오른쪽 열의 높이를 구하는 것입니다. 왼쪽 및 오른쪽 열의 높이를 계산하려면 코드 차수를 입력하고 두 열 사이의 차이 threshold 의 1/2을 이동하십시오. 수치:
위의 상태는 이상적인 상태이지만 요소를 절단하는 것은 불가능합니다. 기둥에서 가장 작은 높이 minH 를 갖는 요소가 측면에 이동에 적합한지 여부를 알아야 합니다. 높은 높이가 차이 임계 threshold 보다 작으면 이동할 수 있습니다. 차이 높이의 절반에 가장 가까운 긴 쪽의 요소 minH 사용할 수 있습니다(일반적으로 높이가 가장 작은 항목도 가능). 영리하게 높이가 가장 작은 것을 움직입니다.) 높이가 가장 작은 요소가 차이보다 큰 경우에는 이동할 필요가 없습니다.
따라서 이동하는 방법은 기본적으로 요소에 위치 속성이 부여되고 값은 중앙입니다. 요소가 왼쪽으로 이동되면 요소에 속성이 부여됩니다. 위치:왼쪽에 따라 먼저 표시됩니다. 위치 속성을 지정한 다음 홀수와 짝수에 따라 다음과 같이 합니다.
<view class=waterfall> <view class=waterfall-left> <view wx:if={{item.position=='left' || (index%2 == 0&&item.position=='center')}} 클래스 =item></view> </view> <view class=waterfall-right> <view wx:if={{item.position=='right' || (index%2 == 1&&item.position=='center ')}} class=item></view> </view></view>이 시점에서 큰 높이 차이 문제가 해결될 수 있습니다.
두 기둥의 높이를 어떻게 계산합니까?핵심은 이미지의 너비와 높이를 가져와서 두 열의 높이를 알 수 있다는 것입니다. 여기에는 두 가지 상황이 있습니다.
1. 인터페이스는 이미지의 너비와 높이를 반환합니다.
인터페이스는 이미지의 너비와 높이를 반환하므로 이미지의 높이를 직접 누적하면 두 열의 높이를 비교하여 높이 차이를 얻을 수 있습니다.
위쪽의 minH 두 열 높이의 threshold 값 차이보다 작은 경우, 즉 minH < threshold 인 경우 minH 이동해야 합니다.
이런 방식으로 데이터를 가져오는 동안 요소를 이동해야 하는지 여부를 알 수 있습니다. 데이터를 처리한 후 즉시 뷰 레이어에 렌더링됩니다.
물론 이 방법이 가장 걱정이 없지만 인터페이스에서 이미지의 너비와 높이를 반환하지 않을 수 있으므로 두 번째 방법을 사용해야 합니다.
2. 인터페이스는 이미지의 너비와 높이를 반환하지 않습니다. 이미지의 너비와 높이는 이미지 로드 이벤트에서 가져옵니다.
이미지의 로드 이벤트를 수신하고 이미지의 너비와 높이를 얻습니다. 마지막 이미지가 로드된 후boundingClientRect를 사용하여 두 열의 높이를 측정하고 높이 차이를 얻습니다.
이 방법에서는 이미지가 로드된 후 요소를 이동해야 하는지 여부를 측정해야 합니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.