左右の高さの差がありすぎる問題を解決するための小型プログラムウォーターフォール

滝のようなレイアウト効果を実現し、左から右へ順番に表示したい場合、cssレイアウトでは当面の間、ニーズを満たせません。Little Red Bookのウォーターフォール効果は、左列と右列に分かれており、奇数、偶数に応じて表示することが可能です。

<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>

しかし、ここで問題が発生します。各要素の高さが不確かなため、左右の列の高さに大きな差が生じる可能性が高くなります。

解決策

この問題を解決するには、各要素の高さが異なる原因を突き止める必要があります。通常は画像の高さ、あるいは条件によって表示される領域が異なる可能性があります。画像の高さだけが異なり、その他の要素の高さは変わらないようにすると、計算が簡単になります。
一般的な考え方は、左右の列の高さを取得し、左右の列の高さを計算し、コードの度数の差を入力し、その差を2つの列の間で移動させることです threshold の1を2にしたもので、図のようになります。

<イグ

上記は理想的ですが、要素を切り取ることができないので、高さの高い側に移動に一致する要素があるかどうかを知る必要があり、高さの高い列の中で最も高さが小さい要素がある場合 minH が差分より小さい場合 threshold 次に、移動して、差の2分の1の高さに最も近い長辺の要素を取ることができます。 minH (通常は高さが一番小さいものですが、トリックで一番小さいものを移動させることもできます）。高さが一番小さい要素が差分より大きければ、移動する必要はない。

そこで、どのように移動するかというと、デフォルトでは、値に center を持つ position 属性を要素に与え、要素を左に移動させる場合は、要素に position:left という属性を与えます。優先順位は position 属性に基づいて表示され、奇偶は二の次で、次のように表示されます。

<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>

この時点で、高低差が大きいという問題は解決しています。

2つの列の高さはどのように計算するのでしょうか？

ポイントは、画像の幅と高さを取得することで、2つのカラムの高さを知ることができます。ここでは、2つのケースについて説明します。

1. インターフェースは、画像の幅と高さを返します。

このインターフェースは画像の幅と高さを返すので、画像の高さを直接足し合わせて2列の高さを比較し、高さの差を求めることができます。

の背が高い方が、より高い。 minH の高さの差よりも、2つの列の高さの差の方が大きい。 threshold が小さくなる、つまり minH < threshold であれば minH を移動させる必要があります。

こうすることで、データを取得する間に、要素を移動する必要があるかどうかを知ることができるのです。データが処理されると同時に、ビューレイヤーにレンダリングされます。

この方法はもちろん最も手間がかかりませんが、インターフェースも画像の幅と高さを返さない場合があるので、2番目の方法を使うことになります。

2. 画像の幅と高さを返さないインターフェースで、画像のロードイベントで画像の幅と高さを取得する。

イメージロードイベントを聞いて、イメージの幅と高さを取得し、最後のイメージがロードされた後、boundingClientRectで2列の高さを測定して高さの差を取得します。

このメソッドは、画像が読み込まれた後に、要素を移動する必要があるかどうかを測定する必要があり、要素の移動がより明確になります。

今回の記事は以上ですが、Scripting Houseの学習とサポートの一助となれば幸いです。