Waterfall flow in mini program

Waterfall flow is a very common web page layout. The visual performance is an uneven multi-column layout. It is a very popular layout form nowadays. I happened to encounter it recently when I was writing a small program. I thought of several different ways. Next, let’s take a look at the specific implementation method (the examples used in the methods are all two-column layouts).

Constant height waterfall flow

Constant height waterfall flow, as the name suggests, means that the height of a single box in the waterfall flow is the same. This form of waterfall flow is also relatively simple to implement, because It does not involve the calculation of the height of the box. Here is an example:

<view>
  <view></view>
</view>

Page({
  data: {
    list: []
  },
  onLoad () {
    let images = []
    for (let i = 0; i <pre class="brush:php;toolbar:false">.fall {
  display: flex;
  flex-wrap: wrap;
  background-color: #f7f7f7;
}
.fall-item {
  width: 330rpx;
  height: 330rpx;
  margin-top: 30rpx;
  margin-left: 30rpx;
  background-color: aquamarine;
}

For convenience, the box content in the example does not use pictures, but uses color blocks instead. The implementation of the equal-height waterfall flow can be directly done through flex Layout implementation, as shown in the example, directly use flex layout, allow line breaks, and set the width and height of each box in the waterfall flow to achieve a simple two-column waterfall flow layout

unequal height waterfall Flow

Unequal height waterfall flow is the more common form. Unequal height waterfall flow involves the calculation of column height. Since the height of each box is different, the column height of each column needs to be recorded. , compare, insert the next box into a column with a short height, and then let’s take a look at the implementation of unequal-height waterfall flow

Known box height

Generally, what is shown in the waterfall flow is It is a picture. In this case, the server will return the width and height of the picture to be displayed to the front end. In this case, it is relatively simple, because the server will return the width and height of the picture, and the front end only needs to calculate the column height. Just insert the next picture into the shorter column. For example:

<view>
  <view>
    <view></view>
  </view>
</view>

.fall {
  display: flex;
  background-color: #f7f7f7;
}

.fall-column {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
}

.fall-column-item {
  width: 330rpx;
  margin-top: 30rpx;
  background-color: aquamarine;
}

Page({
  data: {
    images: [{
      width: 360,
      height: 540
    }, {
      width: 480,
      height: 540
    }, {
      width: 540,
      height: 720
    }, {
      width: 720,
      height: 960
    }, {
      width: 540,
      height: 960
    }, {
      width: 360,
      height: 720
    }, {
      width: 360,
      height: 960
    }, {
      width: 540,
      height: 540
    }, {
      width: 540,
      height: 1440
    }, {
      width: 960,
      height: 1440
    }],
    heightArr: [],
    list: [],
    col: 2
  },
  onLoad () {
    this.initData(2)
  },
  initData (col) {
    let images = []
    let scale = 2
    // 模拟图片宽高
    for (let i = 0; i <p> In the above example, color blocks are used to simulate the picture for convenience. The width and height of 10 pictures are simulated in js. Each Randomly select 10 pictures from it each time and define two columns. Calculate the height of each column each time, insert the picture into the shorter column, and then use the height array to record and accumulate the height of the picture. It is also very simple to implement </p><h3 id="Unknown-box-height">Unknown box height</h3><p>What should we do if the box height is unknown? </p><h4 id="wx-getImageInfo">wx.getImageInfo</h4><p>The first way is to obtain the image width and height information through wx.getImageInfo. For example: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><view>
  <view>
    <view>
      <image></image>
    </view>
  </view>
</view>

Copy after login

Copy after login