最近寫一個小程序的瀑布流布局浑彰，發(fā)現(xiàn)網(wǎng)上別人寫的都是css加js的方法兜挨，頁面分兩列，加載數(shù)據(jù)通過JS分別載入到兩列中辫呻。比較復(fù)雜躏尉，研究了一下蚯根，弄了一個比較簡單的方法，分享給大家胀糜。
效果如下圖：
小程序瀑布流布局
wxml頁面
<view class='case-page'>
<view class='list-masonry'>
<view class='item-masonry' wx:for="{{note}}">
<image src='{{item.url}}' mode='widthFix'></image>
<text>{{item.title}}</text>
</view>
</view>
</view>
wxss
page{
background-color: #eee;
}
.case-page{
padding:20rpx;
}
.list-masonry{
column-count: 2;
column-gap: 20rpx;
}
.item-masonry{
background-color: #fff;break-inside: avoid; box-sizing: border-box; padding: 20rpx;
}
.item-masonry image {
width: 100%;
}
js頁面給一個初始數(shù)據(jù)
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
imgWidth:0,imgHeight:0,
note: [
{
title: '案例名稱',
url: 'http://zq.jhcms.cn/attachs/photo/201711/20171130_176CFE51B6710715B1BBBEF2F86ACB0C.jpg',
},
{
title: '你所不知道的紅酒知識',
url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
},
{
title: '紅酒知識',
url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72',
},
{
title: '案例名稱',
url: 'http://zq.jhcms.cn/attachs/photo/201711/20171130_9E39DA252E3946BE36218D85876C4AB4.jpg',
},
{
title: '案例名稱',
url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg'
},
{
title: '案例名稱',
url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72'
},
{
title: '案例名稱',
url: 'http://img4.imgtn.bdimg.com/it/u=2748975304,2710656664&fm=26&gp=0.jpg'
},
{
title: '案例名稱',
url: 'http://img2.imgtn.bdimg.com/it/u=1561660534,130168102&fm=26&gp=0.jpg'
},
{
title: '案例名稱',
url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg'
}
]
}
})
基本就是html+css3實現(xiàn)的瀑布流布局颅拦。上拉加載還沒有寫。
