Summary of uniapp project practice (18) Customized multi-column waterfall flow component

Introduction: Sometimes when displaying pictures and other content, you will encounter situations where the height of the pictures is inconsistent. At this time, you cannot use equal-height double-column or multi-column display. At this time, you will use the waterfall flow page layout. Let's discuss the waterfall together. Stream implementation method.

Preparation
Principle analysis
Practical exercises
Case display

Preparation

Create a new component under pages/indexthe folder waterfall.vue;
According to the page structure mentioned in the previous article, write the scheduled waterfall flow case page;
Find some free picture materials online;

Principle analysis

Mainly, it automatically compares the total height of each column according to the height of the picture. According to uni.getImageInfothe height of the picture, which column is lower, the picture is added to that column until the picture list cycle is completed.

Practical exercises

Template usage

Below is the loop column and image.

<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>

Style writing

.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%;
      }
    }
  }
}

Script usage

Define data

// 瀑布流信息
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, // 总列数
});

Initialization data

// 初始化数据
function initData() {
    
    
  for (var i = 0; i < waterfall.columnCount; i++) {
    
    
    waterfall.columnList.push([]);
    waterfall.columnHeight.push(0);
  }
}

Calculation method

// 设置瀑布流布局
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);
    }
  }
}