导语:有时候展示图片等内容,会遇到图片高度不一致的情况,这时候就不能使用等高双列或多列展示了,这时候会用到瀑布流的页面布局,下面就一起探讨一下瀑布流的实现方法。
目录
- 准备工作
- 原理分析
- 实战演练
- 案例展示
准备工作
- 在
pages/index
文件夹下面新建一个waterfall.vue
的组件; - 按照前面文章所说的页面结构,编写好预定的瀑布流案例页面;
- 在网上找几张免费的图片素材;
原理分析
主要是根据图片的高度自动比较每列的总高度,根据uni.getImageInfo
获取到图片高度,然后哪列低,就给哪列补充图片,直至图片列表循环完毕。
实战演练
模板使用
下面就是循环列和图片。
<view class="waterfall-page">
<view
class="waterfall-page-column"
v-for="(item, index) in waterfall.columnList"
:key="index"
ref="column"
>
<view
class="waterfall-page-item"
v-for="(pItem, pIndex) in item"
:key="pIndex"
>
<image class="waterfall-page-img" :src="pItem" mode="widthFix"></image>
</view>
</view>
</view>
样式编写
.waterfall-page {
display: flex;
align-items: flex-start;
.waterfall-page-column {
box-sizing: border-box;
flex: 1;
padding: 0 10rpx;
width: 0;
.waterfall-page-item {
margin-bottom: 10rpx;
.waterfall-page-img {
display: inline-block;
width: 100%;
}
}
}
}
脚本使用
- 定义数据
// 瀑布流信息
const waterfall = reactive({
// 图片列表
imgList: [
"/static/image/waterfall/pic-01.jpg",
"/static/image/waterfall/pic-07.jpg",
"/static/image/waterfall/pic-03.jpg",
"/static/image/waterfall/pic-07.jpg",
"/static/image/waterfall/pic-05.jpg",
"/static/image/waterfall/pic-07.jpg",
"/static/image/waterfall/pic-01.jpg",
"/static/image/waterfall/pic-03.jpg",
"/static/image/waterfall/pic-07.jpg",
],
columnList: [], // 每列图片
columnHeight: [], // 每列图片高度
columnCount: 2, // 总列数
});
- 初始化数据
// 初始化数据
function initData() {
for (var i = 0; i < waterfall.columnCount; i++) {
waterfall.columnList.push([]);
waterfall.columnHeight.push(0);
}
}
- 计算方法
// 设置瀑布流布局
async function setWaterfallLayout() {
for (var i = 0; i < waterfall.imgList.length; i++) {
let item = waterfall.imgList[i];
try {
let imgInfo = await uni.getImageInfo({
src: item,
}),
h = imgInfo.height;
for (let j = 0; j < waterfall.columnCount - 1; j++) {
let prevIndex = j,
nextIndex = j + 1;
if (
waterfall.columnHeight[prevIndex] <= waterfall.columnHeight[nextIndex]
) {
waterfall.columnList[prevIndex].push(item);
waterfall.columnHeight[prevIndex] += h;
} else {
waterfall.columnList[nextIndex].push(item);
waterfall.columnHeight[nextIndex] += h;
}
}
} catch (error) {
console.log(error);
}
}
}
案例展示
-
h5 端效果
-
小程序端效果
-
APP 端效果
最后
以上就是自定义多列瀑布流组件的主要内容,有不足之处,请多多指正。
标签:uniapp,自定义,image,pic,jpg,waterfall,static,多列,图片 From: https://www.cnblogs.com/guanqiweb/p/17715727.html