前端瀑布流样式

0. 效果图

1. html

<view class="container">
  <view class="category">
    <view class="item" wx:for="{{menuList}}" wx:key="text">
      <image src="{{item.img}}"></image>
       <!--内容-->
      <text>{{item.text}}</text> 
    </view>
  </view>

  <view class="falls">
    <view class="item" wx:for="{{index_data_list}}" wx:key="id">
      <view class="pic">
        <navigator url="/pages/inside/inside?id={{ item.id }}">
             <!--图片-->
          <image class="img" src="https://{{item.cover_msg_url}}" mode="widthFix"></image>
        </navigator>
        <view class="user">
          <view class="author">
             <!--头像-->
            <image class="avatar" src="https://{{item.userinfo.avatar}}"></image>
            <view>{{item.userinfo.nickName}}</view>
          </view>
          
          <view class="favor">
            <!--点赞图片-->
            <image class="icon" src="/static/images/icon/likes_smallicon_nor.png"></image>
             <!--点赞数量-->
            <view>{{item.release_up}}</view>
          </view>

        </view>
      </view>

      <view class="title">
         <!--内容-->
        <text>{{item.content}}</text>
         <!--话题-->
        <text class="tag" wx:if="{{item.topic.name}}"># {{item.topic.name}}</text>
      </view>

    </view>
  </view>
</view>

<tabber selected="{{ 0 }}"></tabber>

2. css

/* pages/index/index.wxss */
.container {
  padding: 20rpx;
}

.category {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 20rpx 0;
  font-size: 28rpx;
}

.category .item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.category .item image {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 10rpx;
}

.falls {
  -moz-column-count: 2;
  /* Firefox */
  -webkit-column-count: 2;
  /* Safari and Chrome */
  column-count: 2;

  -moz-column-gap: 20rpx;
  /* Firefox */
  -webkit-column-gap: 20rpx;
  /* Safari and Chrome */
  column-gap: 20rpx;
}

.falls .item {
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
  /* Safari and Chrome */
}

.falls .item .pic {
  position: relative;
}

.falls .item .pic .img {
  width: 100%;
  display: block;
}

.falls .item .pic .user {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #333;
  opacity: 0.6;
  height: 60rpx;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: #fff;
  font-size: 28rpx;
}

.falls .item .pic .user .author,
.falls .item .pic .user .favor {
  display: flex;
  flex-direction: row;
  align-items: center;

  padding: 0 10rpx;
}

.falls .item .pic .user .author .avatar {
  width: 28rpx;
  height: 28rpx;
  border-radius: 14rpx;
  margin-right: 10rpx;
}

.falls .item .pic .user .favor .icon {
  width: 28rpx;
  height: 28rpx;
  margin-right: 10rpx;
}

.falls .item .title {
  border: 1rpx solid #ddd;
  padding: 15rpx;
  font-size: 28rpx;
}

.falls .item .title .tag {
  font-size: 32rpx;
  color: #00c8b6;
  margin: 0 10rpx;
}

3.js(非必须，只是数据的获取)

data: {
    index_data_list: [],
    MinId: 0,
    MaxId: 0,
   
  },

 initMessage: function () {
    wx.request({
      url: api.IndexAPI,
      dataType: "json",
      header: {
        Authorization: app.globalData.userinfo ? app.globalData.userinfo.token : null
      },
      method: "GET",
      success: (res) => {
        this.setData({
          index_data_list: res.data,
            // 设置maxid 用于上拉时，传递给后端
          MinId: res.data[res.data.length - 1].id,
             // 设置minid
          MaxId: res.data[0].id
        })
      },

    })
  },

  onLoad: function (options) {
    this.initMessage();
  },