Wenn wir einen Wasserfall-Layouteffekt erzielen und ihn in der Reihenfolge von links nach rechts anzeigen möchten, kann die CSS-Layoutmethode unsere Anforderungen derzeit nicht erfüllen. Beachten Sie den Wasserfall-Flusseffekt von Xiaohongshu. Xiaohongshu ist in linke und rechte Spalten unterteilt und kann nach ungeraden und geraden Zahlen angezeigt werden.
<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>Aber hier kommt das Problem. Aufgrund der Unsicherheit der Höhe jedes Elements besteht eine hohe Wahrscheinlichkeit, dass zwischen der linken und rechten Spalte ein großer Höhenunterschied besteht.
Lösung:Um dieses Problem zu lösen, müssen wir den Grund herausfinden, warum die Höhe jedes Elements unterschiedlich ist. Im Allgemeinen ist es die Höhe des Bildes, oder es können je nach den Bedingungen einige Bereiche angezeigt werden. Es wird empfohlen, nur die Höhe zu verwenden des Bildes ist unterschiedlich und die Höhe anderer Teile bleibt unverändert, was unsere Berechnungen vereinfacht.
Die allgemeine Idee besteht darin, die Höhe der linken und rechten Spalte zu ermitteln. Um die Höhe der linken und rechten Spalte zu berechnen, geben Sie bitte die Code-Graddifferenz ein und verschieben Sie die Hälfte des threshold zwischen den beiden Spalten, wie in gezeigt die Figur:
Das Obige ist ein idealer Zustand, aber es ist für uns unmöglich, die Elemente zu schneiden. Wir müssen wissen, ob es Elemente auf der höheren Seite gibt, die für die Bewegung geeignet sind. Wenn minH das kleinste Element in der Spalte mit der höchsten Höhe ist. kleiner als der threshold ist, können wir ihn verschieben. Sie können das Element minH auf der langen Seite nehmen, das der halben Höhe der Differenz am nächsten kommt (normalerweise das mit der kleinsten Höhe, Sie können auch das Element mit verschieben die kleinste Höhe geschickt einsetzen). Wenn das Element mit der kleinsten Höhe größer als die Differenz ist, muss es nicht verschoben werden.
Beim Verschieben erhält das Element standardmäßig ein Attribut position. Der Wert lautet „center“. Wenn das Element nach links verschoben werden soll, geben Sie dem Element ein Attribut: position:left Positionsattribut und dann nach ungeraden und geraden Zahlen wie folgt:
<view class=waterfall> <view class=waterfall-left> <view wx:if={{item.position=='left' || (index%2 == 0&&item.position=='center')}} Klasse =item></view> </view> <view class=waterfall-right> <view wx:if={{item.position=='right' || (index%2 == 1&&item.position=='center ')}} class=item></view> </view></view>An dieser Stelle kann das Problem großer Höhenunterschiede gelöst werden.
Wie berechnen wir die Höhe zweier Säulen?Der entscheidende Punkt besteht darin, die Breite und Höhe des Bildes zu ermitteln, damit wir die Höhe der beiden Spalten kennen. Hier gibt es zwei Situationen:
1. Die Schnittstelle gibt die Breite und Höhe des Bildes zurück
Die Schnittstelle gibt die Breite und Höhe des Bildes zurück. Wenn wir also die Höhe des Bildes direkt akkumulieren, können wir die Höhen der beiden Spalten vergleichen und den Höhenunterschied ermitteln.
Wenn minH auf der höheren Seite kleiner ist als der threshold zwischen den Höhen der beiden Spalten, d. h. minH < threshold , muss minH verschoben werden.
Auf diese Weise können wir beim Abrufen der Daten erkennen, ob ein Element verschoben werden muss. Nach der Verarbeitung der Daten werden diese sofort auf der Ansichtsebene gerendert.
Diese Methode ist natürlich die sorgenfreiste, aber die Schnittstelle gibt möglicherweise nicht die Breite und Höhe des Bildes zurück, sodass die zweite Methode verwendet werden muss.
2. Die Schnittstelle gibt die Breite und Höhe des Bildes nicht zurück. Die Breite und Höhe des Bildes werden im Bildladeereignis ermittelt.
Hören Sie sich das Ladeereignis des Bildes an und ermitteln Sie die Breite und Höhe des Bildes. Verwenden Sie nach dem Laden des letzten Bildes BoundingClientRect, um die Höhe der beiden Spalten zu messen und den Höhenunterschied zu ermitteln.
Bei dieser Methode müssen Sie messen, ob ein Element verschoben werden muss, nachdem das Bild geladen wurde. Die Bewegung des Elements wird deutlicher.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.