百度、微信小程序使用column-count简单实现瀑布流布局

2020-07-22 分类：前端 / 小程序阅读(1259) 评论(0) 扫描二维码

效果图：

要点：

css3:

column-count: 2;

column-gap:4px;

把元素分成2列

讲解

页页结构：

<viewclass=”view-li”s-for=”{{news}}”s-key=”item.id”>

</view>

widthFix 图片高度根据宽度成比例自动缩放

css部分：

.content{

padding:04px;

column-count:2;

column-gap:4px;

}

—————————

其实这个不是最好的方法，我后来还是用2列来做，分别输出2个列表数据，但表象上看一样是瀑布流，渲染更流畅。