微信小程序开发瀑布流

网上能找到的小程序的瀑布式解决方案，要么代码复杂，要么逻辑混乱，要么无法实现业务功能，所以想把项目中的实现方案分享给大家。

最简单的实现方案不适合分页的场景。

这个方案之所以简单，是因为只使用了css的属性。使用列计数属性指定页面上显示的列数。瀑布一般是2列，可以定义类。列表-砌体{ column-count : 2；//2列-gap : 20 rpx；//列间距}

注意瀑布流的卡片需要css属性display:内嵌块；将卡片设置为内嵌元素。图像组件设置缩放模式模式=宽度固定以保持图片纵横比。

默认情况下，列计数属性用列形式的数据填充。比如我们有20条数据，左边第一列显示1 ~ 10条数据，第二列显示11 ~ 20条数据。如果有分页，在数组中增加20条数据后，左边变成1 ~ 20条数据，右边变成21 ~ 40条数据。用户体验很差。带列-fill:余额；无效的填充属性，无法将填充顺序指定为行。因此，这种实现方案只能一次加载所有数据，不适合分页。组件实现瀑布流，功能强大，滑动流畅。

通过自定义组件，用自己的想法实现瀑布流。然后直接在需要瀑布流的地方调用，方便复用。

没有演示！按照我的步骤一步一步来，就会很容易实现。

1.首先，创建一个瀑布定制组件文件。

建议在项目根目录下创建文件夹组件，然后在该目录下创建文件夹瀑布视图，最后在瀑布视图下创建组件。(鼠标右键-新建-组件)。

2.瀑布流的设计。

瀑布结构简单，左右只有两根柱子。所以在设计UI的时候，布局非常简单。

左侧和右侧，每侧一个视图。显示通过这两个视图的两列瀑布流。每个View对应一个数据源，可见这个思路的重点是这两个数据源的处理。每个视图中的模板都是瀑布流中的一张卡片，因此不再介绍。两排以上的瀑布很少见，本文不考虑，但可以用本文的思路来实现。

Css样式

具体实现逻辑

根据上面的wxml结构，这个组件的核心逻辑是如何把要显示的数据项放入leftList和rightList数组中。如何分配数据项？这很简单。我们可以定义leftHight和rightHight两个变量，分别记录leftList和rightList数组中图片的高度(可以理解为左视图和右视图的高度，但只是图片的高度，但已经满足瀑布的需求)。当leftHight大于righthigh时，将数据放入rightList，让righthigh在数据中叠加图片的高度。当rightHight大于LeftHeight时，将数据放入leftList，让LeftHeight覆盖数据中图片的高度。

if(left high==right high){//将第一项放在左侧的left list . push(tmp)；left high=left high tmp . item height；} else if(left high right high){ left list . push(tmp)；left high=left high tmp . item height；} else { right list . push(tmp)；right high=right high tmp . item height；}

瀑布展示图片时，需要知道图片的宽度和高度，然后根据图片的宽高比设置图像组件的宽度和高度。所以，如果你的数据没有长宽比或者长宽比，很难实现瀑布流。图片的宽度和高度虽然可以通过代码得到，但是会对性能和用户体验有很大的影响，不推荐使用。你可以在后台和学生讨论，看看如何添加宽度和高度数据。

组件有自己的生命周期方法，甚至可以像Page一样用作单独的Page。瀑布流的宽度和图片的最大高度可以在他的生命周期法中得到。

得到瀑布流的宽度后，我们就可以根据图片的宽高比计算出图像成分的宽度和高度。

在模板中，需要声明图像的宽度和高度。px单元

使用瀑布流

A.注册自定义组件

使用自定义组件声明要在页面的json文件中使用的组件。

{ .使用组件： {瀑布视图：/./组件/瀑布视图/瀑布视图} }

B.在wxml中添加组件并添加id。