미니 프로그램의 폭포 흐름

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

<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> 위의 예에서는 편의상 색상도 사용되었으며, js에서 10개의 그림의 너비와 높이를 시뮬레이션합니다. 두 개의 열을 사용하여 매번 각 열의 높이를 계산하고 더 짧은 열에 그림을 삽입한 다음 높이 배열을 사용하여 그림의 높이를 누적하는 방법을 구현하는 것도 매우 간단합니다</p><h3>알 수 없는 상자의 높이. </h3><p>상자의 높이를 알 수 없으면 어떻게 해야 하나요? </p><h4>wx.getImageInfo</h4><p>첫 번째 방법은 wx.getImageInfo를 통해 이미지 너비와 높이 정보를 얻는 것입니다. 예: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><view>
  <view>
    <view>
      <image></image>
    </view>
  </view>
</view>