Se quisermos obter um efeito de layout de fluxo em cascata e exibi-lo da esquerda para a direita, o método de layout CSS não pode atender às nossas necessidades por enquanto. Consulte o efeito de fluxo em cascata de Xiaohongshu. Xiaohongshu é dividido em colunas esquerda e direita e pode ser exibido de acordo com números pares e ímpares.
<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>Mas aí vem o problema. Com a incerteza da altura de cada elemento, existe uma grande probabilidade de que haja uma grande diferença de altura entre as colunas esquerda e direita.
Solução:Para resolver este problema, precisamos descobrir o motivo pelo qual a altura de cada elemento é diferente. Geralmente é a altura da imagem, ou podem ser algumas áreas exibidas de acordo com as condições. da imagem é diferente e a altura das outras partes permanece inalterada, o que simplifica nossos cálculos.
A ideia geral é obter a altura das colunas esquerda e direita. Para calcular a altura das colunas esquerda e direita, insira a diferença de grau do código e mova 1/2 do threshold diferença entre as duas colunas, conforme mostrado no. figura:
O acima é um estado ideal, mas é impossível cortarmos os elementos. Precisamos saber se existem elementos na lateral com altura elevada que sejam adequados para movimentação se o elemento com menor altura minH na coluna. com uma altura alta é menor que o threshold de diferença, então podemos movê-lo, você pode pegar o elemento minH no lado longo que está mais próximo da metade da altura da diferença (geralmente aquele com a menor altura, você também pode. mova habilmente aquele com a menor altura). Se o elemento de menor altura for maior que a diferença, não há necessidade de movê-lo.
Então, como mover, o elemento recebe um atributo position por padrão, o valor é center. Se o elemento for movido para a esquerda, então o elemento receberá um atributo: position:left ele será exibido primeiro de acordo com; o atributo de posição e, em seguida, de acordo com os números pares e ímpares, como segue:
<view class=waterfall> <view class=waterfall-left> <view wx:if={{item.position=='left' || (index%2 == 0&&item.position=='center')}} classe =item></view> </view> <view class=waterfall-right> <view wx:if={{item.position=='right' || (index%2 == 1&&item.position=='center ')}} class=item></view> </view></view>Neste ponto, o problema das grandes diferenças de altura pode ser resolvido.
Como calculamos a altura de duas colunas?O ponto chave é obter a largura e a altura da imagem, para que possamos saber a altura das duas colunas. Existem duas situações aqui:
1. A interface retorna a largura e a altura da imagem
A interface retorna a largura e a altura da imagem, portanto, se acumularmos diretamente a altura da imagem, podemos comparar as alturas das duas colunas e obter a diferença de altura.
Se minH no lado superior for menor que a diferença threshold entre as alturas das duas colunas, ou seja, minH < threshold , então minH precisa ser movido.
Desta forma, ao obter os dados, podemos saber se um elemento precisa ser movido. Após o processamento dos dados, eles são imediatamente renderizados na camada de visualização.
Este método é obviamente o mais despreocupado, mas a interface pode não retornar a largura e a altura da imagem, então o segundo método deve ser usado.
2. A interface não retorna a largura e a altura da imagem. A largura e a altura da imagem são obtidas no evento de carregamento da imagem.
Ouça o evento de carregamento da imagem e obtenha a largura e a altura da imagem. Após o carregamento da última imagem, useboundingClientRect para medir a altura das duas colunas e obter a diferença de altura.
Neste método, você deve medir se um elemento precisa ser movido após o carregamento da imagem. O movimento do elemento será mais óbvio.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.