uniapp项目实践总结(十八)自定义多列瀑布流组件

导语:有时候展示图片等内容,会遇到图片高度不一致的情况,这时候就不能使用等高双列或多列展示了,这时候会用到瀑布流的页面布局,下面就一起探讨一下瀑布流的实现方法。

目录

  • 准备工作
  • 原理分析
  • 实战演练
  • 案例展示

准备工作

  • pages/index文件夹下面新建一个waterfall.vue的组件;
  • 按照前面文章所说的页面结构,编写好预定的瀑布流案例页面;
  • 在网上找几张免费的图片素材;

原理分析

主要是根据图片的高度自动比较每列的总高度,根据uni.getImageInfo获取到图片高度,然后哪列低,就给哪列补充图片,直至图片列表循环完毕。

实战演练

模板使用

下面就是循环列和图片。


  
    
      
    
  

样式编写

.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 端效果
    uniapp项目实践总结(十八)自定义多列瀑布流组件_第1张图片
    uniapp项目实践总结(十八)自定义多列瀑布流组件_第2张图片
  • 小程序端效果
    uniapp项目实践总结(十八)自定义多列瀑布流组件_第3张图片
    uniapp项目实践总结(十八)自定义多列瀑布流组件_第4张图片
  • APP 端效果
    uniapp项目实践总结(十八)自定义多列瀑布流组件_第5张图片
    uniapp项目实践总结(十八)自定义多列瀑布流组件_第6张图片

最后

以上就是自定义多列瀑布流组件的主要内容,有不足之处,请多多指正。

你可能感兴趣的:(uniappvuejs3瀑布流)