uview 瀑布流_微信小程序通过js实现瀑布流布局详解

前言

瀑布流 - 小程序中数据列表或者图片展示难免高度不一，而我们一般固定宽度，让其高度自适应，并无缝对接。如下图：

瀑布流的两种做法：

css:

在父元素上使用column-count: 2也可以做到两列排版。但column-count: 2是左右两列排版，如果碰巧出现左边累计高度过多大于右边累计高度的话，右边会出现大片空白区域。点击前往

js(推荐):

判断左右两边的累计高度，那边的高度小，便往那边添加(需要动态获取节点元素的高度进行计算)。下面用的就是此种方法：

准备工作

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

实现代码

此方法采用左右两列布局，判断两边高度。如果左

(list不建议一次请求过多数据，过多的数据可能会造成加载慢，可用图片懒加载优化)

test.wxml

{ {item.title}}

{ {item.title}}

test.wxss

/* pages/test/test.wxss */

#left, #right{

width: 48%;

margin: 0 1%;

float: left;

}

#left image, #right image{

width: 100%;

}

test.js

//test.js