Si queremos lograr un efecto de diseño de flujo en cascada y mostrarlo en orden de izquierda a derecha, el método de diseño CSS no puede satisfacer nuestras necesidades por el momento. Consulte el efecto de flujo de cascada de Xiaohongshu. Xiaohongshu está dividido en columnas izquierda y derecha y se puede mostrar según números pares e impares.
<vista clase=cascada> <vista clase=cascada-izquierda> <vista wx:if={{index%2 == 0}} clase=elemento></vista> </vista> <vista clase=cascada-derecha> <view wx:if={{index%2 == 1}} class=item></view> </view></view>Pero aquí viene el problema. Con la incertidumbre de la altura de cada elemento, existe una alta probabilidad de que haya una gran diferencia de altura entre las columnas izquierda y derecha.
Solución:Para resolver este problema, necesitamos averiguar la razón por la cual la altura de cada elemento es diferente. Generalmente es la altura de la imagen, o pueden ser algunas áreas que se muestran según las condiciones. de la imagen es diferente y la altura de otras partes permanece sin cambios, lo que simplifica nuestros cálculos.
La idea general es obtener la altura de las columnas izquierda y derecha. Para calcular la altura de las columnas izquierda y derecha, ingrese la diferencia de grados del código y mueva la mitad del threshold de diferencia entre las dos columnas, como se muestra en. la figura:
Lo anterior es un estado ideal, pero nos es imposible cortar los elementos. Necesitamos saber si hay elementos en el lado superior que sean adecuados para el movimiento. Si es minH el elemento más pequeño de la columna con mayor altura. es menor que el threshold de diferencia, entonces podemos moverlo, puedes tomar el elemento minH en el lado largo que esté más cerca de la mitad de la altura de la diferencia (generalmente el que tiene la altura más pequeña, también puedes mover el que tiene). la altura más pequeña hábilmente). Si el elemento con menor altura es mayor que la diferencia, no es necesario moverlo.
Entonces, cómo moverse, al elemento se le asigna una posición de atributo de forma predeterminada, el valor es centro. Si el elemento se va a mover hacia la izquierda, entonces asigne al elemento un atributo: posición: izquierda, se mostrará primero de acuerdo con la posición. atributo de posición, y luego según los números pares e impares, de la siguiente manera:
<ver clase=cascada> <ver clase=cascada-izquierda> <ver wx:if={{item.position=='izquierda' || (index%2 == 0&&item.position=='center')}} clase =item></view> </view> <view class=cascada-derecha> <view wx:if={{item.position=='right' || (index%2 == 1&&item.position=='center ')}} clase=elemento></vista> </vista></vista>En este punto se puede solucionar el problema de las grandes diferencias de altura.
¿Cómo calculamos la altura de dos columnas?El punto clave es obtener el ancho y el alto de la imagen, para que podamos saber el alto de las dos columnas. Aquí hay dos situaciones:
1. La interfaz devuelve el ancho y alto de la imagen.
La interfaz devuelve el ancho y el alto de la imagen, por lo que si acumulamos directamente el alto de la imagen, podemos comparar las alturas de las dos columnas y obtener la diferencia de altura.
Si minH en el lado superior es menor que la diferencia threshold entre las alturas de las dos columnas, es decir, minH < threshold , entonces minH debe moverse.
De esta forma, mientras obtenemos los datos, podemos saber si es necesario mover un elemento. Después de procesar los datos, se procesan inmediatamente en la capa de vista.
Por supuesto, este método es el más sencillo, pero es posible que la interfaz no devuelva el ancho y el alto de la imagen, por lo que se debe utilizar el segundo método.
2. La interfaz no devuelve el ancho y el alto de la imagen. El ancho y el alto de la imagen se obtienen en el evento de carga de la imagen.
Escuche el evento de carga de la imagen y obtenga el ancho y el alto de la imagen. Después de cargar la última imagen, useboundingClientRect para medir la altura de las dos columnas y obtener la diferencia de altura.
En este método, debes medir si es necesario mover un elemento después de cargar la imagen. El movimiento del elemento será más obvio.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.