Si nous voulons obtenir un effet de disposition en cascade et l'afficher de gauche à droite, la méthode de disposition CSS ne peut pas répondre à nos besoins pour le moment. Reportez-vous à l'effet de flux de cascade de Xiaohongshu. Xiaohongshu est divisé en colonnes de gauche et de droite, et il peut être affiché selon des nombres pairs et impairs.
<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>Mais voici le problème. Avec l'incertitude sur la hauteur de chaque élément, il y a une forte probabilité qu'il y ait une grande différence de hauteur entre les colonnes de gauche et de droite.
Solution:Pour résoudre ce problème, nous devons découvrir la raison pour laquelle la hauteur de chaque élément est différente. Généralement, il s'agit de la hauteur de l'image, ou il peut s'agir de certaines zones affichées selon les conditions. Il est recommandé de n'utiliser que la hauteur. de l'image est différente et la hauteur des autres parties reste inchangée, ce qui rend nos calculs simples.
L'idée générale est d'obtenir la hauteur des colonnes de gauche et de droite. Pour calculer la hauteur des colonnes de gauche et de droite, veuillez saisir la différence de degré de code et déplacer la moitié du threshold de différence entre les deux colonnes, comme indiqué dans le chiffre :
Ce qui précède est un état idéal, mais il nous est impossible de couper les éléments. Nous devons savoir s'il y a des éléments du côté supérieur qui sont adaptés au mouvement. Si minH le plus petit élément de la colonne ayant la plus grande hauteur, est inférieur au threshold de différence, alors nous pouvons le déplacer, vous pouvez prendre l'élément minH du côté long qui est le plus proche de la moitié de la hauteur de la différence (généralement celui avec la plus petite hauteur, vous pouvez également déplacer celui avec. la plus petite hauteur intelligemment). Si l’élément ayant la plus petite hauteur est plus grand que la différence, il n’est pas nécessaire de le déplacer.
Alors, comment se déplacer, l'élément reçoit un attribut position par défaut, la valeur est center Si l'élément doit être déplacé vers la gauche, donnez-lui un attribut : position:left, il sera affiché en premier selon le. attribut position, puis selon les nombres pairs et impairs, comme suit :
<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>À ce stade, le problème des grandes différences de hauteur peut être résolu.
Comment calcule-t-on la hauteur de deux colonnes ?Le point clé est d'obtenir la largeur et la hauteur de l'image, afin que nous puissions connaître la hauteur des deux colonnes. Il y a ici deux situations :
1. L'interface renvoie la largeur et la hauteur de l'image
L'interface renvoie la largeur et la hauteur de l'image, donc si on accumule directement la hauteur de l'image, on peut comparer les hauteurs des deux colonnes et obtenir la différence de hauteur.
Si minH du côté supérieur est inférieur à la différence threshold entre les hauteurs des deux colonnes, c'est-à-dire minH < threshold , alors minH doit être déplacé.
De cette façon, lors de l’obtention des données, nous pouvons savoir si un élément doit être déplacé. Après avoir traité les données, elles sont immédiatement restituées à la couche de vue.
Cette méthode est bien sûr la plus simple, mais l'interface peut ne pas renvoyer la largeur et la hauteur de l'image, il faut donc utiliser la deuxième méthode.
2. L'interface ne renvoie pas la largeur et la hauteur de l'image. La largeur et la hauteur de l'image sont obtenues lors de l'événement de chargement d'image.
Écoutez l'événement de chargement de l'image et obtenez la largeur et la hauteur de l'image. Une fois la dernière image chargée, utilisezboundingClientRect pour mesurer la hauteur des deux colonnes et obtenir la différence de hauteur.
Dans cette méthode, vous devez mesurer si un élément doit être déplacé après le chargement de l'image. Le mouvement de l'élément sera plus évident.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.