小程序瀑布流

<!--index.wxml-->
<view class="article-list">
  <scroll-view scroll-y class="con" bindscrolltolower="getMoreArticle">
    <!-- 第一列 -->
    <view class="col-wrap" id="col-1">
      <view class="item" wx:for="{{articleList[0]}}" wx:key="{{item.id}}" wx:for-index="idx">
        <navigator url="/pages/detail/detail?title={{item.title}}&id={{item.id}}" hover-class="none">
           <image style="height:{{345*item.height/item.width}}rpx" src="{{item.imgUrl}}" class="img" lazy-load='true'></image> 
        </navigator>
         <view class="article-info">
          <view class="article-title">{{item.title}}</view>
          <view class="footer-info">
            <view class="left">
              <view class="headimg">
                <image mode="widthFix" src="{{item.avatarUrl}}" lazy-load='true' class="headimg"></image>
              </view>
              <view class="nickname">{{item.nickName}}</view>
            </view>
            <view class="likes {{item.isLike==true ?'liked':''}}" bindtap='doLike' data-item="{{item}}" data-idx="{{idx}}" data-col="0">{{item.likes}}</view>
          </view>
        </view> 
      </view>
    </view>
    <!-- 第二列 -->
    <view class="col-wrap" id="col-2">
      <view class="item" wx:for="{{articleList[1]}}" wx:key="{{articleList.id}}" wx:for-index="idx">
        <navigator url="/pages/detail/detail?title={{item.title}}&id={{item.id}}" hover-class="none">
          <image style="height:{{345*item.height/item.width}}rpx" src="{{item.imgUrl}}" class="img" lazy-load='true'></image>
        </navigator>
         <view class="article-info">
          <view class="article-title">{{item.title}}</view>
          <view class="footer-info">
            <view class="left">
              <view class="headimg">
                <image mode="widthFix" src="{{item.avatarUrl}}" class="headimg" lazy-load='true'></image>
              </view>
              <view class="nickname">{{item.nickName}}</view>
            </view>
            <view class="likes {{item.isLike==true ?'liked':''}}" bindtap='doLike' data-item="{{item}}" data-idx="{{idx}}" data-col="1">{{item.likes}}</view>
          </view>
        </view>  
      </view>
    </view>
    <!-- <view class="isloading" wx:if="{{isLoading}}">加载中</view>  -->
      <view class="nomore" wx:if="{{!hasMore}}"></view>  
  </scroll-view>
  <navigator url="/pages/write/write" hover-class="none" class="goWrite">
    <image src="{{sendImg}}" class="send-icon"></image>我觉得
    <text>...</text>
  </navigator>
</view>

　　

/**index.wxss**/
.article-list {
  padding: 16rpx 0 0 20rpx;
  box-sizing: border-box;
}
.article-list .con {
  height: 100vh;
  /* margin-bottom: 60rpx; */
}
 .article-list .col-wrap{
  display:inline-block;
  width:345rpx;
  margin-right:15rpx;
  vertical-align: top;
} 
.article-list .item {
  background: #fff;
  border:1rpx solid #d4d3d4;
  box-sizing: border-box;
  width:100%;
  margin-bottom: 16rpx; 
  border-radius:10rpx;
  overflow: hidden;
}
.article-list .col-wrap .img{
  width: 345rpx;
  display: block;
}
.article-list .article-info{
  padding:12rpx 20rpx;
}
.article-list .headimg{
  width: 46rpx;
  height:46rpx;
  margin-right: 4rpx;
  border-radius: 50%;
  overflow: hidden;
  will-change: transform;
}
.article-list .nickname{
  font-size: 21rpx;
  color:#595757;
}
.article-list .likes {
  font-size:21rpx;
  position:relative;
  /* z-index: 1; */
  color: #898989;
  padding-left: 30rpx;
}
.article-list .likes::before{
  content: '';
  width: 28rpx;
  height: 20rpx;
  position:absolute;
  left:0;
  top:4rpx;
  background: url(like_icons.png?v=3) no-repeat 0 0;
  background-size: cover;
}
.article-list .likes.liked{
  color:#e4007f;
}
.article-list .likes.liked::before{
  content: '';
  background-position: right 0;
  /* background-size: 100%; */
}
.article-list .footer-info{
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  align-items:center;
  height: 46rpx;
}
.article-list .article-title{
  font-size:23rpx;
  color:#595757;
  margin-bottom:12rpx;
  line-height: 30rpx;
}
.article-list .left {
  display: -webkit-flex;
  display: flex;
  align-items:center;
}
.goWrite{
  width:428rpx;
  height:84rpx;
  line-height: 84rpx;
  background: #e4007f;
  border-radius:14rpx;
  margin-top:20rpx;
  position:fixed;
  bottom: 15rpx;
  left:50%;
  margin-left: -214rpx;
  box-sizing: border-box;
  padding-left: 174rpx;
  color:#fff;
  font-size: 40rpx;
  /* box-shadow: 0 -1rpx  2rpx rgba(159,160,160,0.75); */
}
.goWrite text{
  position:relative;
  top:-10rpx;
  margin-left:8rpx;
}
.send-icon{
  width:110rpx;
  height:118rpx;
  position:absolute;
  left:40rpx;
  bottom:0;
  
}
.nomore{
  height: 120rpx;
  width:100%;
}
.isloading{
  text-align: center;
  font-size: 30rpx;
  height: 160rpx;
  line-height: 160prx;
}

　　

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    page:1,//页码
    col1Height: 0,
    col2Height: 0,
    sendImg: 'send_icon.png',
    articleList: [[], []],
    hasMore: true,
    isLoading : false,
  },
  //点赞
  doLike: function (e) {
    let cur = e.currentTarget.dataset.item;
    let col = e.currentTarget.dataset.col;
    let idx = e.currentTarget.dataset.idx;
    wx.request({
      url: '',
      method: 'POST',
      data: {
        token: wx.getStorageSync('token'),
        id: cur.id
      },
      success: (res) => {
        let {errcode,isLike,likes} = res.data;
        if(errcode==0){
          this.data.articleList[col][idx].isLike = isLike;
          this.data.articleList[col][idx].likes = likes;
          this.setData({
            articleList: this.data.articleList
          });
        }
        
      }
    })
  },
  //获取初始数据
  getInitData: function () {
    this.setDataInit();
    wx.showLoading({
      title: '加载中',
      mask:true
    })
    wx.request({
      url: '',
      method:'POST',
      data:{
        token:wx.getStorageSync('token'),
        page:1
      },
      success:(res)=>{
        wx.hideLoading();
        if (res.data.list.length>0){
          this.addCol(res.data.list);
        }else{
          this.setData({
            hasMore: false
          });
        }
        
      }
    })
  },
  //添加到不同列
  addCol: function (data) {
    let titleH = 112;
    for (let article of data) {
      if (article.title.length > 15) {
        titleH = 144;
      }
      if (this.data.col1Height <= this.data.col2Height) {
        this.setData({
          col1Height: this.data.col1Height + Math.floor(article.height * 345 / article.width) + titleH+16
        });
        let arr1 = this.data.articleList[0];
        arr1.push(article)
        this.setData({
          'articleList[0]': arr1
        });
      } else {
        this.setData({
          col2Height: this.data.col2Height + Math.floor(article.height * 345 / article.width) + titleH+16
        });
        let arr2 = this.data.articleList[1];
        arr2.push(article);
        this.setData({
          'articleList[1]': arr2
        });
      }
    }
  },
  getMoreArticle: function () {
    if (this.data.hasMore && !this.data.isLoading) {
      this.setData({
        page:this.data.page+1,
        isLoading:true
      });
      wx.request({
        url: '',
        method: 'POST',
        data: {
          token: wx.getStorageSync('token'),
          page: this.data.page
        },
        success: (res) => {
          let {list} = res.data;
          this.setData({
            isLoading: false
          });
          if(list.length>0){
            this.addCol(list);
          }else{
            this.setData({
              hasMore: false
            });
          }
        }
      })
    }
  },

  setDataInit: function (){
    this.setData({
      col1Height: 0,
      col2Height: 0,
      articleList: [[], []],
      hasMore: true,
      isLoading: false,
      page: 1
    });
  },
  onReady: function () {

  },
  onLoad: function () {
  },
  onShow:function () {
    if(wx.getStorageSync('token')!=""){
      this.getInitData();
    }else{
      app.tokenReadyCallBack = res =>{
        this.getInitData();
      }
    }
  },
  onHide:function(){
    this.setDataInit();
  }
})

　　

转载于:https://www.cnblogs.com/zhoubingyan/p/8434672.html