微信小程序實現瀑布流布局

前言

最近在做微信小程序，有一個圖片列表頁面，想通過瀑布流方式來實現，個人比較喜歡這種效果

先看實現效果圖

實現原理及代碼

將布局分為兩列，我們可以使用flex設置 displex:flex 然后每列寬度設置50%

<div class="photos">
      <ul class="list">
        <li class="list-item" v-for="(item,index) in list" :key="item" @click="detail(item)">
          <div class="item-content" v-if="index%2==0">
            <image class="avatar" :src="item.url" mode="widthFix"></image>
            <div v-text="item.name+index"></div>
          </div>
        </li>
      </ul>
      <ul class="list">
        <li class="list-item" v-for="(item,index) in list" :key="item" @click="detail(item)">
          <div class="item-content" v-if="index%2==1">
            <image class="avatar" :src="item.url" mode="widthFix"></image>
            <div v-text="item.name+index"></div>
          </div>
        </li>
      </ul>
    </div>

.photos {
    display: flex;
  }
  .list {
    width: 400rpx;
    .list-item {
      margin: 20rpx;
      .avatar {
        width: 100%;
      }
    }
  }

我們通過在每一列去遍歷list數組使用if去判斷是基數還是偶數來顯示圖片

v-if="index%2==0"

最后

以上就是實現瀑布流的方式，是不是很簡單

參考閱讀

https://www.cnblogs.com/sizhou/p/7219551.html