微信小程序瀑布流

微信小程序实现瀑布流

效果图

.wxml

<!--pages/wxCase/pubuliu/index.wxml-->
<view class="content">
  <view class="content-left">
    <block wx:for="{{list}}" wx:key="list">
      <template is='item-data' data='{{...item}}' wx:if="{{index % 2 ==0}}"></template>
    </block>
  </view>
  <view class="content-right">
    <block wx:for="{{list}}" wx:key="list">
      <template is='item-data' data='{{...item}}' wx:if="{{index % 2 ==1}}"></template>
    </block>
  </view>
</view>
<!-- 定义模板 -->
<template name="item-data">
  <view class="content-item">
    <!-- 重点是mode为widthFix -->
    <image src="{{url}}" class="content-item-img" mode="widthFix" />
    <view class="content-item-box">
      <view class="content-item-title">{{title}}</view>
      <view class="content-item-name">
        <view class="flex-row">
          <image src="{{avatar}}" mode="aspectFill" class="content-item-avatar" />
          <view>{{name}}</view>
        </view>
        <view class="content-item-heart">{{num}}</view>
      </view>
    </view>
  </view>
</template>

.wxss

page {
  padding: 10rpx;
  box-sizing: border-box;
}

.content {
  display: flex;
  justify-content: space-between;
}

.content-left, .content-right {
  width: 49%;
}

.content-item {
  margin: 10rpx auto 20rpx;
  background: #fff;
  width: 98%;
  border-radius: 20rpx;
  overflow: hidden;
}

.content-item-img {
  width: 100%;
}
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  
}
.content-item-box {
  font-size: 24rpx;
  color: #333;
  padding: 20rpx;
  box-sizing: border-box;
}

.content-item-title {
  /* 一行省略 */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.content-item-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;
  font-size: 22rpx;
}

.content-item-avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}

.content-item-heart {
  color: #c4c4c4;
  text-decoration: underline;
  font-size: 26rpx;
}

.js

// pages/pubu/pubu.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      list:[
        {
          "name":"萌系小小妞1",
          "num":"8",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/zy/wallhaven-zyz6xw.png",
          "avatar":"https://w.wallhaven.cc/full/zy/wallhaven-zyz6xw.png"
        },
        {
          "name":"萌系小小妞2",
          "num":"18",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/gp/wallhaven-gpjj9q.jpg",
          "avatar":"https://w.wallhaven.cc/full/gp/wallhaven-gpjj9q.jpg"
        },
        {
          "name":"萌系小小妞3",
          "num":"21",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/1p/wallhaven-1p1qgv.jpg",
          "avatar":"https://w.wallhaven.cc/full/1p/wallhaven-1p1qgv.jpg"
        },
        {
          "name":"萌系小小妞4",
          "num":"33",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/kx/wallhaven-kxz9km.png",
          "avatar":"https://w.wallhaven.cc/full/kx/wallhaven-kxz9km.png"
        },
        {
          "name":"萌系小小妞5",
          "num":"99+",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/m3/wallhaven-m3d119.jpg",
          "avatar":"https://w.wallhaven.cc/full/m3/wallhaven-m3d119.jpg"
        },
        {
          "name":"萌系小小妞6",
          "num":"66",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/zy/wallhaven-zyz6xw.png",
          "avatar":"https://w.wallhaven.cc/full/zy/wallhaven-zyz6xw.png"
        },
        {
          "name":"萌系小小妞7",
          "num":"23",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/7p/wallhaven-7p961o.jpg",
          "avatar":"https://w.wallhaven.cc/full/7p/wallhaven-7p961o.jpg"
        },
        {
          "name":"萌系小小妞8",
          "num":"4",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/9d/wallhaven-9dzd5k.jpg",
          "avatar":"https://w.wallhaven.cc/full/9d/wallhaven-9dzd5k.jpg"
        },
        {
          "name":"萌系小小妞9",
          "num":"89",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/5g/wallhaven-5g7ew7.jpg",
          "avatar":"https://w.wallhaven.cc/full/5g/wallhaven-5g7ew7.jpg"
        },
        {
          "name":"萌系小小妞10",
          "num":"64",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/rr/wallhaven-rrg7j7.png",
          "avatar":"https://w.wallhaven.cc/full/rr/wallhaven-rrg7j7.png"
        },
        {
          "name":"萌系小小妞11",
          "num":"23",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/l8/wallhaven-l8zrqr.png",
          "avatar":"https://w.wallhaven.cc/full/l8/wallhaven-l8zrqr.png"
        },
        {
          "name":"萌系小小妞12",
          "num":"10",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/kx/wallhaven-kxzxo1.jpg",
          "avatar":"https://w.wallhaven.cc/full/kx/wallhaven-kxzxo1.jpg"
        },
        {
          "name":"萌系小小妞13",
          "num":"38",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/m3/wallhaven-m3z1j8.jpg",
          "avatar":"https://w.wallhaven.cc/full/m3/wallhaven-m3z1j8.jpg"
        },
        {
          "name":"萌系小小妞14",
          "num":"35",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/6d/wallhaven-6dm5xx.jpg",
          "avatar":"https://w.wallhaven.cc/full/6d/wallhaven-6dm5xx.jpg"
        },
        {
          "name":"萌系小小妞15",
          "num":"23",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/kx/wallhaven-kxzlgm.jpg",
          "avatar":"https://w.wallhaven.cc/full/kx/wallhaven-kxzlgm.jpg"
        },
        {
          "name":"萌系小小妞16",
          "num":"21",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/d6/wallhaven-d63xgl.jpg",
          "avatar":"https://w.wallhaven.cc/full/d6/wallhaven-d63xgl.jpg"
        },
        {
          "name":"萌系小小妞17",
          "num":"11",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/kx/wallhaven-kxz6dd.jpg",
          "avatar":"https://w.wallhaven.cc/full/kx/wallhaven-kxz6dd.jpg"
        },
        {
          "name":"萌系小小妞18",
          "num":"7",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/we/wallhaven-we1xx7.jpg",
          "avatar":"https://w.wallhaven.cc/full/we/wallhaven-we1xx7.jpg"
        },
        {
          "name":"萌系小小妞19",
          "num":"6",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/7p/wallhaven-7pjy2e.jpg",
          "avatar":"https://w.wallhaven.cc/full/7p/wallhaven-7pjy2e.jpg"
        },
        {
          "name":"萌系小小妞20",
          "num":"5",
          "title":"正是地方撒是地方各级撒谎",
          "url":"https://w.wallhaven.cc/full/3l/wallhaven-3l3ed3.jpg",
          "avatar":"https://w.wallhaven.cc/full/3l/wallhaven-3l3ed3.jpg"
        }
      ]
  }