瀑布小度小,瀑布过滤水流变小

　　如果要实现瀑布流的布局效果，从左到右显示，css布局模式暂时满足不了我们的需求。参考小红书的瀑布效果，小红书分为左右两列，可以按照奇数和偶数显示。

　　view class=瀑布 view class=瀑布-左 View wx:if= { { index % 2==0 } } class= item /View/View class=瀑布-右 View wx:if= { { index % 2==1 } } class= item /View/View/View但问题来了。在每个元素高度不确定的情况下，很有可能会出现左右栏高度相差很大的情况。

　　解决方法：

　　要解决这个问题，我们需要找出各个元素高度不同的原因，一般是图片的高度或者根据条件显示的某些区域的高度。建议只有图片高度不同，其他部分高度不变，这样我们的计算就简单了。

　　大意：得到左右两列的高度，计算左右两列的高度。请输入码度差，移动两列差阈值的1/2，如图：

　　以上是理想状态，但不能删减元素。我们需要知道在最高高度的边上是否有符合运动的元素。如果高度最高的列中高度最低的minH小于差值阈值，那么我们可以移动。我们可以在最接近差的一半高度的长边上取一个元素minH(通常是高度最低的那个，或者我们可以用诡计移动高度最低的那个)。如果高度最小的元素大于差值，则不需要移动它。

　　然后，怎么动？默认情况下，元素被赋予一个值为center的属性位置。如果元素要向左移动，则元素被赋予一个属性位置：left；根据位置属性，然后根据奇数和偶数，如下：

　　view class=瀑布 view class=瀑布-左 view wx:if={{item.position==左 (index % 2==0 item . position== center )} class= item /View/View class=瀑布-右 view wx:if={{item。position= right (索引% 2==1项。position== center )} } class= item /view/view/view至此，高差大的问题就可以解决了。

　　我们如何计算两栏的高度呢？

　　重点是得到图片的宽度和高度，这样就可以知道两列的高度。这里有两种情况：

　　1.接口返回图片的宽度和高度。

　　接口返回的是图片的宽度和高度，所以我们可以直接累加图片的高度，比较两列的高度，得到高度差。

　　如果较高一侧的minH小于两列高度之差阈值，即minH阈值，则需要移动minH。

　　这样，当我们得到数据时，我们就可以知道一个元素是否需要移动。处理数据后立即渲染到视图层。

　　这种方法当然是最省心的，但是界面可能不会返回图片的宽度和高度，所以需要第二种方法。

　　2.接口不返回图片的宽度和高度，而是在图片加载事件中获取图片的宽度和高度。

　　监控图片的load事件，获取图片的宽度和高度。加载完最后一张图片后，使用BoundingClient测量两列的高度，得到高度差。

　　这个方法必须衡量图片加载后某个元素是否需要移动，元素移动会很明显。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。