Если мы хотим добиться эффекта макета каскадного потока и отображать его слева направо, метод макета CSS на данный момент не может удовлетворить наши потребности. Обратитесь к эффекту водопадного потока Сяохуншу. Сяохуншу разделен на левый и правый столбцы и может отображаться в соответствии с нечетными и четными числами.
<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>Но здесь возникает проблема: из-за неопределенности высоты каждого элемента существует большая вероятность того, что между левым и правым столбцами будет большая разница в высоте.
Решение:Чтобы решить эту проблему, нам нужно выяснить причину, по которой высота каждого элемента разная. Как правило, это высота изображения или некоторые области, отображаемые в зависимости от условий. рисунка отличается, а высота остальных частей остается неизменной, что упрощает наши расчеты.
Общая идея состоит в том, чтобы получить высоту левого и правого столбцов. Чтобы вычислить высоту левого и правого столбцов, введите разницу в градусах кода и переместите 1/2 threshold разницы между двумя столбцами, как показано на рисунке. фигура:
Вышеупомянутое состояние является идеальным, но мы не можем вырезать элементы. Нам нужно знать, есть ли на более высокой стороне элементы, подходящие для перемещения. Если minH самый маленький элемент в столбце с наибольшей высотой, меньше threshold разницы, то мы можем его переместить, можно взять элемент minH по длинной стороне, которая ближе всего к половине высоты разницы (обычно тот, у которого наименьшая высота, можно также переместить тот, у которого). наименьшая высота ловко). Если элемент с наименьшей высотой больше разницы, перемещать его не нужно.
Итак, как переместить, элементу по умолчанию присваивается атрибут позиции, значение которого равно центру. Если элемент нужно переместить влево, присвойте элементу атрибут: позиция: слева, он будет отображаться первым в соответствии с положением. атрибут позиции, а затем в соответствии с нечетными и четными числами следующим образом:
<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>На этом этапе можно решить проблему больших перепадов высот.
Как рассчитать высоту двух столбцов?Ключевой момент — получить ширину и высоту изображения, чтобы мы могли знать высоту двух столбцов. Здесь есть две ситуации:
1. Интерфейс возвращает ширину и высоту изображения.
Интерфейс возвращает ширину и высоту изображения, поэтому, если мы напрямую суммируем высоту изображения, мы можем сравнить высоты двух столбцов и получить разницу в высоте.
Если minH на более высокой стороне меньше threshold разницы между высотами двух столбцов, то есть minH < threshold , то minH необходимо переместить.
Таким образом, получая данные, мы можем узнать, нужно ли переместить элемент. После обработки данных они немедленно отображаются на слое представления.
Этот метод, конечно, самый безопасный, но интерфейс может не возвращать ширину и высоту изображения, поэтому необходимо использовать второй метод.
2. Интерфейс не возвращает ширину и высоту изображения. Ширина и высота изображения получаются в событии загрузки изображения.
Прослушайте событие загрузки изображения и получите ширину и высоту изображения. После загрузки последнего изображения используйтеboundingClientRect, чтобы измерить высоту двух столбцов и получить разницу в высоте.
В этом методе вы должны измерить, нужно ли перемещать элемент после загрузки изображения. Движение элемента будет более очевидным.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.