今天做⼩程序的时候，碰到⼀个⽐较常见的需求，就是要瀑布流布局，两列，交错分布，⼤概如下图
最终要实现的结果就是如左图所⽰。
不过在微信⼩程序⾥⾯，不能通过JavaScript来直接操作dome，所以⼀些常⽤的⽅法在这⾥都没有办法⽤了。这让笔者⾮常着急，因为项⽬⽐较赶，不能因为这种低级的布局问题拖慢了进度。
百度了半天，发现了css3的column这个属性，但是最后实现出来的⽅法就如右图所⽰，这不符合需求，需求是两列，从左到右进⾏排列的，⼤概就像⼩红书APP那种瀑布流布局
最后笔者终于找到⼀种⾮常诡异的⽅法，哈哈，废话不多说，直接上代码
CSS样式
.content{
margin: 0 20rpx; text-align: justify; } .item{
background-color: #fff; margin: 1%;
margin-bottom: 20rpx; display: inline-block;}
.item-ava{ width: 40rpx; height: 40rpx;
border-radius: 20rpx;}
.heart{
width: 30rpx; height: 26rpx;
margin-right: 8rpx;}
.heart_{
display: flex;
align-items: center;}
.item-img{ width: 100% }
.item-title{
font-size: 24rpx;
text-overflow: ellipsis; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;
font-family: 'PingFang SC-Medium'; color: #1e1e1e; margin: 15rpx; line-height: 27rpx;}
.item .name{ display: flex;
padding: 0 15rpx; margin-top: 20rpx;
padding-bottom: 10rpx; align-items: center; font-size: 22rpx;
color: #1e1e1e;
font-family: 'PingFang SC-Medium';}
.name image{ flex: 0 0 30rpx;}
.item-title-box{ display: flex; position: relative;}
.name-title{ flex: 1;
margin-left: 18rpx; margin-right: 20rpx; text-overflow: ellipsis; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.name text:last-child{ flex: 0 0 30rpx; color: #c4c4c4;
text-decoration: underline; line-height: 10rpx; }
.left,.right{
display: inline-block; vertical-align: top; width: 49%;}
.right{
float: right;}
js数据
var app = getApp()Page({ data: { note:[ {
name: '⼤脸猫爱吃鱼⼤脸猫爱吃鱼⼤脸猫爱吃鱼⼤脸猫爱吃鱼⼤脸猫爱吃鱼', heart_num: '1',
title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识', url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72',
avatar: 'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg' }, {
name: '⼤脸猫爱吃鱼', heart_num: '2',
title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识', url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg', avatar: 'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg' }, {
name: '⼤脸猫爱吃鱼', heart_num: '3',
title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识', url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg', avatar: 'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg' }, {
name: '⼤脸猫爱吃鱼', heart_num: '4',
title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识', url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72',
avatar: 'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg' }, {
name: '⼤脸猫爱吃鱼', heart_num: '5',
title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识', url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72',
avatar: 'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg' }, {
name: '⼤脸猫爱吃鱼', heart_num: '6',
title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识', url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg', avatar: 'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg' }, {
name: '⼤脸猫爱吃鱼', heart_num: '7',
title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识', url: 'http://img4.imgtn.bdimg.com/it/u=2748975304,2710656664&fm=26&gp=0.jpg', avatar: 'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg' }, {
name: '⼤脸猫爱吃鱼', heart_num: '8',
title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识', url: 'http://img2.imgtn.bdimg.com/it/u=1561660534,130168102&fm=26&gp=0.jpg', avatar: 'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg' } ]}})
最后出来的效果
哈哈，⼤概的思路就是，直接定义两列等宽的view，然后两列都加载相同的数据
敲⿊板！！！记重点啦！！！ wx:if=\"{{index%2==1}}\" 这⾥，⽤if来辨别是奇数还是偶数，两边加载相反的，哈哈，这样就成功实现瀑布流了，是不是很简单？
因篇幅问题不能全部显示，请点此查看更多更全内容