微信小程序?qū)崿F(xiàn)瀑布流布局（方式一）

1.實(shí)現(xiàn)效果

瀑布流.gif

2.實(shí)現(xiàn)原理

  • 根據(jù)奇數(shù)列和偶數(shù)列區(qū)分左邊和右邊數(shù)據(jù)
  • 設(shè)置width固定，mode="widthFix"
  • 適用于：左右兩列的高度相差不是很大

3.實(shí)現(xiàn)代碼

<view class="content">
  <view class="left">
    <block wx:for="{{list}}" wx:key="index">
      <template is="item" data="{{...item}}" wx:if="{{index%2==0}}"></template>
    </block>
  </view>
  <view class="right">
    <block wx:for="{{list}}" wx:key="index">
      <template is="item" data="{{...item}}" wx:if="{{index%2==1}}"></template>
    </block>
  </view>
</view>
<template name="item">
  <view class="item">
    <image class="item-img" src="{{url}}" mode="widthFix"></image>
    <view class="item-title-box">
      <navigator url="url" class="item-title">{{title}}</navigator>
    </view>
    <view class="name">
      <image class="item-ava" src="{{avatar}}"></image>
      <text class="name-title">{{name}}</text>
      <view class="heart">
        <text>{{num}}</text>
      </view>
    </view>
  </view>
</template>

page {
  padding: 10rpx;
}

.content {
  text-align: justify;
}

.item {
  background-color: #fff;
  margin: 10rpx 3%;
  margin-bottom: 20rpx;
  display: inline-block;
  width: 96%;
  border-radius: 20rpx;
  overflow: hidden;
}

.item-ava {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
}

.heart {
  width: 30rpx;
  height: 26rpx;
  margin-right: 8rpx;
}

.heart {
  display: flex;
  align-items: center;
}

.item-img {
  width: 100%
}

.item-title {
  font-size: 24rpx;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-family: 'PingFang SC-Medium';
  color: #1e1e1e;
  margin: 15rpx;
  line-height: 27rpx;
}

.item .name {
  display: flex;
  padding: 0 15rpx;
  margin-top: 20rpx;
  padding-bottom: 10rpx;
  align-items: center;
  font-size: 22rpx;
  color: #1e1e1e;
  font-family: 'PingFang SC-Medium';
}

.name image {
  flex: 0 0 auto;
}

.item-title-box {
  display: flex;
  position: relative;
}

.name-title {
  flex: 1;
  margin-left: 18rpx;
  margin-right: 20rpx;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.name text:last-child {
  color: #c4c4c4;
  text-decoration: underline;
  line-height: 10rpx;

}

.left,
.right {
  display: inline-block;
  vertical-align: top;
  width: 49%;
}

Page({
  data: {
    list: [{
      name: '蘇蘇',
      num: '1',
      title: '測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)',
      url: 'https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/4.png',
      avatar: 'https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/4.png'
    },
    {
      name: '蘇蘇2',
      num: '1',
      title: '測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)',
      url: 'https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/7.png',
      avatar: 'https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/7.png'
    },
    {
      name: '蘇蘇3',
      num: '1',
      title: '測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)',
      url: 'https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/6.png',
      avatar: 'https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/6.png'
    },
    {
      name: '蘇蘇4',
      num: '1',
      title: '測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)',
      url: 'https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/3.png',
      avatar: 'https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/3.png'
    },
    {
      name: '蘇蘇5',
      num: '1',
      title: '測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)',
      url: 'https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/1.png',
      avatar: 'https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/1.png'
    },
    {
      name: '蘇蘇6',
      num: '1',
      title: '測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)測(cè)試數(shù)據(jù)測(cè)試測(cè)試測(cè)試測(cè)',
      url: 'https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/2.png',
      avatar: 'https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/2.png'
    },
    ]
  }
})

4.完整代碼，盡在公眾號(hào)'蘇蘇的bug',更多小程序demo，關(guān)注蘇蘇的碼云，如果對(duì)你有用，歡迎您的star+訂閱！

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容