最近在写的一个小程序 (****)要用到瀑布流,效果如下:
事先对市面上几款app还有小程序进行了一些调研
- 小红书
- 熊猫TVapp
- 淘宝app
- ...
移动端的瀑布流页面主要是两类:
- 无序的,瀑布流的内容相对随机,看不出明显的先后关系(指的是逻辑上的),比如小红书的瀑布流
- 有序的,分数高的在前面,分数低的在后面。
瀑布流布局的两个明显的特征(名词)
- 瀑布流由列构成(column)
- 列内的每一项高度不固定;
由此 小程序端可以这么写
wxml
<view style="display:none">
<image wx:for="{{images}}" wx:key="{{item.id}}" data-item="{{item}}" bindload="onImageLoad"></image>
<view>
<scrollview style="height:{{scrollHeight}}px" bindscrolltolower="loadImages">
<view class="container">
<view class="column">
<image wx:for="{{col1}}" wx:key="{{item.id}}" mode="widthFix"><image>
</view>
<view class="column">
<image wx:for="{{col2}}" wx:key="{{item.id}}" mode="widthFix"><image>
</view>
</view>
</scrollview>
复制代码
js
let col1H = 0;
let col2H = 0;
Page({
data: {
scrollH: 0,
images: [],
col1: [],
col2: [],
},
onLoad: function () {
wx.getSystemInfo({
success: (res) => {
let ww = res.windowWidth;
let wh = res.windowHeight;
let scrollH = wh;
this.setData({
scrollH: scrollH
});
this.loadImages();
}
})
},
onImageLoad: function (e) {
let oImgW = e.detail.width; //图片原始宽度
let oImgH = e.detail.height; //图片原始高度
let images = this.data.images;
let item = e.currentTarget.dataset.item;
let col1 = this.data.col1;
let col2 = this.data.col2;
if (col1H <= col2H) {
col1H += oImgH ;
col1.push(item);
} else {
col2H += oImgH;
col2.push(item);
}
let data = {
col1: col1,
col2: col2
};
this.setData(data);
},
loadImages: function () {
//这里加载图片
},
})
复制代码
wxss
.container {
display:flex;
}
.container .column {
width:48%;
margin:1%;
}
复制代码
想法
瀑布流的实现有很多方式,还有一种很常用的方式就是定位布局,动态计算需要可展示的列以及内容的位置,大家可以去看看花瓣网的布局,这里就不展开了。小程序的话,采用以上方法应该是相对比较简便的。拓展起来也很方便