前言

瀑布流——小程序中的数据列表或图片显示不可避免地会有不同的高度，但我们一般会固定宽度，使其具有高度适应性，无缝连接。下图：

瀑布流的两种方法：

css:

在父元素上使用column-count: 2也可以进行两列排版。但是，column-count: 2是一种左右列布局。如果碰巧左边的累计高度比右边高太多，右边就会出现一个很大的空白区域。单击以前往

Js(建议):

确定左侧和右侧的累积高度。如果另一侧的高度较小，则将其添加到另一侧(需要动态获取节点元素的高度进行计算)。这是下面使用的方法：

准备工作/即将工作

我们需要使用await，而使用await需要在本地配置中启用增强的编译。下图：

实现代码

这个方法用左右两列来判断两边的高度。如果是左边或者右边，就往左边填充，否则就往右边填充(列表不建议一次请求太多数据，数据太多可能会导致加载慢，可以通过图片的懒加载来优化)

test.wxml

！-pages/test/test . wxml-view class=' container ' view id=' left ' view wx : for=' { { left list } } ' wx : key image src=' http: { { item . URL } } ' mode=' width fix '/image text { { item . title } }/text/view/view id=' right ' view wx : for=' { { right list } } ' wx : key image src=' http3

/* page/test/test . wxss */# left，# right { width : 48%；保证金： 0 1%；向左浮动：} #左图像，#右图像{ width : 100%；}test.js

//test.jslet leftHeight=0，right height=0；//分别定义左右两边的高度让查询；页面({ data : { list :[{ title : ' 1 '，URL : ' http://zq。JH内容管理系统。cn/attachs/photo/20171130 _ 176 cfe 51 b 6710715 B1 BBB ef 2 f 86 cb0c。jpg '，}，{ title: ' 2 '，URL : ' 3http://img 3。img TN}，async ISelft(){ const { list，leftList，rightList }=this.dataquery=wx。createselectorquery()；对于（列表的常量项){ leftHeight=rightHeight？leftList.push(项目): rightList.push(项目);//判断两边高度，来觉得添加到那边等待这个。getBoxHeight(左列表，右列表)；} }，getBoxHeight(leftList，rightList) { //获取左右两边高度返回新的承诺(解析，拒绝)={ this.setData({ leftList，rightList })，()={ query.select('#left ').boundingClientRect()；query.select('#right ').boundingClientRect()；查询。exec((RES)={左侧高度=RES[0]).身高；//获取左边列表的高度rightHeight=res[1]。身高；//获取右边列表的高度resolve()；});});}) }})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。