小程序 瀑布流布局（图-视频）

========================wxml======================

  <view class="comShare-all" id='britney' style='pointer-events:{{pointerEvents}}'>  
    <view class="comShare-list-left">
      <block wx:for="{{listData}}" wx:key="index">
        <view class='comShare-list' wx:if="{{index % 2 === 0}}">
          <view class='comShare-img'>
            <view class='comShare-img2' bindtouchstart="mytouchstart" bindtouchend="mytouchend" catchtap='longAndshort' data-id='{{item.id}}' data-object_id='{{item.object_id}}'></view>
            <image class="item-img" wx:if="{{item.type==1 && item.more.suolue}}" src="{{item.more.suolue[0].url}}" mode="widthFix"></image>
            <image class="item-img" wx:elif="{{item.type==1}}" src="{{item.more.photos[0].url}}" mode="widthFix"></image>
            <video class="item-img" wx:if="{{item.type==2}}" src="{{item.video}}" autoplay="{{false}}" mode="widthFix"></video>
            <view class='comShareL-text'>{{item.post_content}}</view>
          </view>
          <view class="comShareL-btm">
            <view class='comShareL-btm-left' catchtap='goUserdetails' data-user_id='{{item.user_id}}'>
              <image class="userimg" src="{{item.avatar}}" mode="aspectFit"></image>
              <text class="username">{{item.user_nickname}}</text>
            </view>
            <view class='comShareL-btm-right' catchtap='upZan' data-user_id='{{item.user_id}}' data-zan_index='{{index}}' data-zan_id='{{item.id}}' data-zan_zt='{{item.zan_article}}'>
              <view class='CBRL' wx:if="{{paramData.recommended===1}}">
                <image class="userimg2" src="../../pages/src/img/hg.png" mode="aspectFit"></image>
                <text class='attention'>{{item.paiming}}</text>
              </view>
              <view class='CBRR'>
                <image class='userimg2' mode="aspectFit" src='../../pages/src/img/xx3.png' wx:if="{{unlisted}}"></image>
                <image class='userimg2' mode="aspectFit" src='../../pages/src/img/xx3.png' wx:if="{{item.zan_article==2}}"></image>
                <image class='userimg2' mode="aspectFit" src='../../pages/src/img/xx2.png' wx:if="{{item.zan_article==1}}"></image>
                <text class='attention'>{{item.post_like}}</text>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
    <view class="comShare-list-right">
      <block wx:for="{{listData}}" wx:key="index">
        <view class='comShare-list' wx:if="{{index % 2 != 0}}">
          <view class='comShare-img'>
            <view class='comShare-img2' bindtouchstart="mytouchstart" bindtouchend="mytouchend" catchtap='longAndshort' data-id='{{item.id}}' data-object_id='{{item.object_id}}'></view>
            <image class="item-img" wx:if="{{item.type==1 && item.more.suolue}}" src="{{item.more.suolue[0].url}}" mode="widthFix"></image>
            <image class="item-img" wx:elif="{{item.type==1}}" src="{{item.more.photos[0].url}}" mode="widthFix"></image>
            <video class="item-img" wx:if="{{item.type==2}}" src="{{item.video}}" autoplay="{{false}}" mode="widthFix"></video>
            <view class='comShareL-text'>{{item.post_content}}</view>
          </view>
          <view class="comShareL-btm">
            <view class='comShareL-btm-left' catchtap='goUserdetails' data-user_id='{{item.user_id}}'>
              <image class="userimg" src="{{item.avatar}}" mode="aspectFit"></image>
              <text class="username">{{item.user_nickname}}</text>
            </view>
            <view class='comShareL-btm-right' catchtap='upZan' data-user_id='{{item.user_id}}' data-zan_index='{{index}}' data-zan_id='{{item.id}}' data-zan_zt='{{item.zan_article}}'>
              <view class='CBRL'>
                <image class="userimg2" src="../../pages/src/img/hg.png" mode="aspectFit" wx:if="{{paramData.recommended===1}}"></image>
                <text class='attention' wx:if="{{paramData.recommended===1}}">{{item.paiming}}</text>
              </view>
              <view class='CBRR'>
                <image class='userimg2' mode="aspectFit" src='../../pages/src/img/xx3.png' wx:if="{{unlisted}}"></image>
                <image class='userimg2' mode="aspectFit" src='../../pages/src/img/xx3.png' wx:if="{{item.zan_article==2}}"></image>
                <image class='userimg2' mode="aspectFit" src='../../pages/src/img/xx2.png' wx:if="{{item.zan_article==1}}"></image>
                <text class='attention'>{{item.post_like}}</text>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>    
  </view>

 

========================wxcs======================

.comShare-all {
  width: 100%;
  column-count: 2;
  column-gap: 0rpx;
  display:flex;
  background: #fff;
}
.comShare-list{
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  margin:10rpx 5rpx;
  border-radius:10rpx;
  box-shadow:4rpx 4rpx 10rpx #aca9a8;
  width:97.5%;
}
.comShare-img {
  width:100%;
  height:100%;
  text-align: center;
  position: relative;
}
.comShare-img2 {
  position: absolute;
  width:100%;
  height:100%;
  z-index: 9999;
}
.ranking{
  font-size: 40rpx;
  width: 120rpx;
  height: 60rpx;
  position: absolute;
  bottom: 12rpx;
  right: 0;
}
  .rankingBK{
    width: 100%;
    height: 100%;
  }
  .rankingTT{
    position: absolute;
    bottom: 12rpx;
    right: 24rpx;
    color: #fff;
    font-size: 30rpx;
  }
.item-img{
  width: 100%;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
}
.comShareL-text{
  text-align: left;
  padding: 0 10rpx;
  box-sizing: border-box;
  width: 100%;
  height: 60rpx;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size:30rpx;
  line-height:32rpx;
}
.comShare-list-left {
  width: 100%;
  overflow: hidden;
 }

.comShare-list-right{
  width: 100%;
  overflow: hidden;
 }
.comShareL-btm {
  height: 50rpx;
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  margin:0 10rpx;
}
.comShareL-btm-left,.comShareL-btm-right{
  max-width:50%;
  display:flex;
  font-size:20rpx;
  align-items:center;
  overflow: hidden;
}
.CBRL,.CBRR{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
}
.userimg {
  height: 40rpx;
  width: 40rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}
.userimg2 {
  height: 100%;
  width: 30rpx;
  margin-right: 10rpx;
}
.username {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowarp;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.attention {
  font-size: 22rpx;
  color: #909090;
}
.comShare-list-imgBox{
  width: 100%;
  height: auto;
}

 

=========================JS=======================

var util = require('../../utils/util.js')
Component({
  properties: {
    pointerEvents: String, //设置样式
    setStyle: Number, //搜索页传值
    setBool: String, //测试
    id: Number,  //需要删除的笔记ID
    listData: Array,
    paramData: Object,
    categoryID:Number, //次级导航
    modalMsg: {
      type: String,
      value: ' ',
    }
  },
  data: {
    // 这里是一些组件内部数据 
    text: "text",
    setBool: ''
  },
  created() {
    this.setData({
      setBool: this.properties.setBool,
      categoryID: this.properties.categoryID
    })
  },
  methods: {
    onhide(){
      this.setData({
        pointerEvents: 'none'
      })
    },
    onshow() {
      this.setData({
        pointerEvents: 'auto'
      })
    },
    //长短按删除
    longAndshort: function (res) {
      let that = this;
      const setBool = this.properties.setBool;
      //触摸时间距离页面打开的毫秒数
      var touchTime = that.data.touch_end - that.data.touch_start;
      //三目判断 如果setbool存在则赋值object_id，否则 id
      const id = setBool ? res.currentTarget.dataset.object_id : res.currentTarget.dataset.id;
      //如果按下时间大于350为长按
      if (touchTime > 350) {
        wx.showModal({
          title: '提示',
          content: '是否删除该内容？',
          success: function (res) {
            if (res.confirm) {
              const token = util.apiUrl.token;
              wx.request({
                url: 'https://haiyaxiaomoshu.com/wxapp/Portal/del_portal?id=' + id +'&token=' + token,
                success: function (res) {
                  const delFour = res.data.status;
                  wx.showToast({
                    title: res.data.msg,
                  })
                  if (delFour === 2){
                  } else {
                    setTimeout(function () {
                      wx.switchTab({
                        url: '../../pages/myCenter/myCenter'
                      })
                    }, 1000)
                  }
                }
              })
            } else if (res.cancel) {
            }
          }          
        })
      } else {
        //点击进入产品信息详情
        let categoryID = that.properties.categoryID;
        wx.navigateTo({
          url: '../../pages/index/particulars?id=' + id + '&token=' + util.apiUrl.token + '&categoryID=' + categoryID
        })
      }
    },
    //按下事件开始
    mytouchstart: function (e) {
      let that = this;
      that.setData({
        touch_start: e.timeStamp
      })
    },
    //按下事件结束
    mytouchend: function (e) {
      let that = this;
      that.setData({
        touch_end: e.timeStamp
      })
    },
    //点赞
    upZan: function (res) {
      const that = this;
      const indexL = res.currentTarget.dataset.zan_index  //点赞的下标
      const zanZt = res.currentTarget.dataset.zan_zt; //点赞的状态
      const token = util.apiUrl.token;
      const object_id = res.currentTarget.dataset.zan_id; //要点赞的文章ID
      const typeID = 1;
      const data = {
        token,
        object_id,
        typeID
      }
      if (!wx.getStorageSync('token')) {          // 如果token 为空跳转到登录
        util.codeLoginFun(406);
        wx.showToast({
          title: '请授权登陆！',
          icon: 'none',
          duration: 2500
        })
        return;
      }
      const url = (zanZt === 1) ? 'https://haiyaxiaomoshu.com/wxapp/Zan/del' : 'https://haiyaxiaomoshu.com/wxapp/Zan/add';
      wx.request({      //调用取消接口
        url,
        data,
        method: 'POST',
        success: function (res) {
          wx.showToast({
            title: res.data.msg,
            icon: 'success',
            duration: 2000
          });
          that.triggerEvent('customevent');
        }
      });
    },
    //点击用户信息查看发布者详情
    goUserdetails:function(res){
      // 如果token 为空跳转到登录
      if (!wx.getStorageSync('token')) {
        util.codeLoginFun(406);
        wx.showToast({
          title: '请授权登陆！',
          icon: 'none',
          duration: 2500
        })
      };
      const id = res.currentTarget.dataset.user_id;
      wx.navigateTo({
        url: '../../pages/index/userDetails?id=' + id
      })
    }
  }
})

 

<view class="comShare-all" id='britney' style='pointer-events:{{pointerEvents}}'>

<view class="comShare-list-left">

<block wx:for="{{listData}}" wx:key="index">

<view class='comShare-list' wx:if="{{index % 2 === 0}}">

<view class='comShare-img'>

<view class='comShare-img2' bindtouchstart="mytouchstart" bindtouchend="mytouchend" catchtap='longAndshort' data-id='{{item.id}}' data-object_id='{{item.object_id}}'></view>

<image class="item-img" wx:if="{{item.type==1 && item.more.suolue}}" src="{{item.more.suolue[0].url}}" mode="widthFix"></image>

<image class="item-img" wx:elif="{{item.type==1}}" src="{{item.more.photos[0].url}}" mode="widthFix"></image>

<video class="item-img" wx:if="{{item.type==2}}" src="{{item.video}}" autoplay="{{false}}" mode="widthFix"></video>

<view class='comShareL-text'>{{item.post_content}}</view>

</view>

<view class="comShareL-btm">

<view class='comShareL-btm-left' catchtap='goUserdetails' data-user_id='{{item.user_id}}'>

<image class="userimg" src="{{item.avatar}}" mode="aspectFit"></image>

<text class="username">{{item.user_nickname}}</text>

</view>

<view class='comShareL-btm-right' catchtap='upZan' data-user_id='{{item.user_id}}' data-zan_index='{{index}}' data-zan_id='{{item.id}}' data-zan_zt='{{item.zan_article}}'>

<view class='CBRL' wx:if="{{paramData.recommended===1}}">

<image class="userimg2" src="../../pages/src/img/hg.png" mode="aspectFit"></image>

<text class='attention'>{{item.paiming}}</text>

</view>

<view class='CBRR'>

<image class='userimg2' mode="aspectFit" src='../../pages/src/img/xx3.png' wx:if="{{unlisted}}"></image>

<image class='userimg2' mode="aspectFit" src='../../pages/src/img/xx3.png' wx:if="{{item.zan_article==2}}"></image>

<image class='userimg2' mode="aspectFit" src='../../pages/src/img/xx2.png' wx:if="{{item.zan_article==1}}"></image>

<text class='attention'>{{item.post_like}}</text>

</view>

</view>

</view>

</view>

</block>

</view>

<view class="comShare-list-right">

<block wx:for="{{listData}}" wx:key="index">

<view class='comShare-list' wx:if="{{index % 2 != 0}}">

<view class='comShare-img'>

<view class='comShare-img2' bindtouchstart="mytouchstart" bindtouchend="mytouchend" catchtap='longAndshort' data-id='{{item.id}}' data-object_id='{{item.object_id}}'></view>

<image class="item-img" wx:if="{{item.type==1 && item.more.suolue}}" src="{{item.more.suolue[0].url}}" mode="widthFix"></image>

<image class="item-img" wx:elif="{{item.type==1}}" src="{{item.more.photos[0].url}}" mode="widthFix"></image>

<video class="item-img" wx:if="{{item.type==2}}" src="{{item.video}}" autoplay="{{false}}" mode="widthFix"></video>

<view class='comShareL-text'>{{item.post_content}}</view>

</view>

<view class="comShareL-btm">

<view class='comShareL-btm-left' catchtap='goUserdetails' data-user_id='{{item.user_id}}'>

<image class="userimg" src="{{item.avatar}}" mode="aspectFit"></image>

<text class="username">{{item.user_nickname}}</text>

</view>

<view class='comShareL-btm-right' catchtap='upZan' data-user_id='{{item.user_id}}' data-zan_index='{{index}}' data-zan_id='{{item.id}}' data-zan_zt='{{item.zan_article}}'>

<view class='CBRL'>

<image class="userimg2" src="../../pages/src/img/hg.png" mode="aspectFit" wx:if="{{paramData.recommended===1}}"></image>

<text class='attention' wx:if="{{paramData.recommended===1}}">{{item.paiming}}</text>

</view>

<view class='CBRR'>

<image class='userimg2' mode="aspectFit" src='../../pages/src/img/xx3.png' wx:if="{{unlisted}}"></image>

<image class='userimg2' mode="aspectFit" src='../../pages/src/img/xx3.png' wx:if="{{item.zan_article==2}}"></image>

<image class='userimg2' mode="aspectFit" src='../../pages/src/img/xx2.png' wx:if="{{item.zan_article==1}}"></image>

<text class='attention'>{{item.post_like}}</text>

</view>

</view>

</view>

</view>

</block>

</view>

</view>