微信小程序实现瀑布流布局效果

一、效果

二、内容

 1、xml代码

  <!-- 列表 -->
  <view class="list_title">推荐</view>
  <view class="waterfall">
    <block wx:for="{
   
   {list}}" wx:key="index" wx:for-index="id" wx:for-item="itemName">
      <view class="item">
        <image class="list_item_pic" mode='scaleToFill' src="{
   
   {itemName.url}}">
        </image>
        <text class="item_conn_des">{
   
   {itemName.name}}</text>
      </view>
    </block>
  </view>

2、css代码

/* 列表标题 */
.list_title{
  background-color: transparent;
  margin-right: 30rpx;
  margin-left: 30rpx;
  margin-bottom: 20rpx;
  color: #000;
  font-weight: 800;
  font-size: 36rpx;
}

/* item */
.waterfall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.5em;
  grid-auto-flow: row dense;
  grid-auto-rows: 15px;
  margin-left: 30rpx;
  margin-right: 30rpx;
}

.waterfall .item {
  width: 100%;
  background: #f0f0f0;
  color: #ddd;
}

.waterfall .item:nth-of-type(2n+1) {
  grid-row: auto / span 7;
  border-radius: 10rpx;
}
.waterfall .item:nth-of-type(2n+2) {
  grid-row: auto / span 5;
  border-radius: 10rpx;
}
/* .waterfall .item:nth-of-type(3n+3) {
  grid-row: auto / span 12;
  border-radius: 10rpx;
} */

/* item图片 */
.list_item_pic{
  height: 100%;
  width: 100%;
  border-radius: 10rpx;
}

/* item文本 */
.item_conn_des{
  color: #666666;
  font-size: 26rpx;
  width: 240rpx;
  font-weight: bolder;
  position: relative;
  bottom: 70rpx;
  margin-left: 10rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  align-items: flex-start;
  display: -webkit-box;
  overflow: hidden;
}
/* 列表部分 */

3、js代码初始化数据

   list: [{
      name: '苏ww',
      num: '1',
      title: 'fuyuykuykuyk',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    {
      name: 'eegrr',
      num: '1',
      title: '67989899',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    },
    {
      name: '是的举动',
      num: '1',
      title: '8oykhkhkh',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    },
    {
      name: '如图那',
      num: '1',
      title: 'jufutyyii65342',
      url: 'http://183.214.193.179:9000/zykj-cloud-prod/undefined/2022/04/14/cb643adf-0653-4e25-82c9-e27c99ef2a4e.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: 'dfh',
      num: '1',
      title: '测kdndvkjdv;;l试测试测',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    },
    {
      name: '4tbbs6',
      num: '1',
      title: '3242423423423',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    },
    {
      name: '233ndsgty',
      num: '1',
      title: '3453576868',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    },
    {
      name: '6u6ks33',
      num: '1',
      title: '3453576868',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    },
    {
      name: 'opr0909u',
      num: '1',
      title: '5475757',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    },
    {
      name: '093rfoih',
      title: '465768799',
      num: '1',
      url: 'http://pic1.win4000.com/wallpaper/c/5799c80f576c4.jpg'
    }
    ]