小程序实现瀑布流和上拉加载

瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高。这里只是实现了简单的效果，话不多说上效果图。

代码
wxml基本布局

<view class="content">
    <view class="item-view item-left">
        <block wx:for="{{imglist}}" wx:key="*this">
            <template is="item" data="{{...item}}" wx:if="{{index%2==0}}"></template>
        </block>
    </view>
    <view class="item-view">
        <block wx:for="{{imglist}}" wx:key="*this">
            <template is="item" data="{{...item}}" wx:if="{{index%2==1}}"></template>
        </block>
    </view>
</view>
<template name="item">
    <view class='item'>
        <image class="image" src="{{src}}" mode="widthFix"></image>
        <view class="box-shadow">
            <view class="title">{{desc}}</view>
            <view class="count">{{count}} 人做过</view>
        </view>
    </view>
</template>

wxss样式代码

.content {
    position:  relative;
    border-radius:  10rpx  10rpx  0  0;
    padding-top:  20rpx;
}
.content::after {
    content:  '';
    clear:  both;
    display:  block;
}
.item {
    width:  100%;
    margin:  0  auto;
    background: #fff;
    box-sizing:  border-box;
    position:  relative;
    padding:  24rpx;
    padding-top:  10rpx;

}
.item-view {
    float:  left;
    width:50%;
}
.item .image {
    width:  100%;
    border-radius:  10rpx  10rpx  0  0;
}
.box-shadow {
    padding:  6rpx  10rpx  18rpx  10rpx;
    box-sizing:  border-box;
    box-shadow:  0  2rpx  2rpx  rgba(88,  88,  88,  0.233);
    border-radius:  0  0  10rpx  10rpx;
}
.item-left .item {
    padding-right:  10rpx;
}

onReachBottom:function (){
    this.setData({imglist:this.data.imglist.concat(list)
  })
}

基本思路就是利用wx:if和数组的下标对2取余来判断是排在左列还是排在右列，这里面很重要的一个属性就是mode='widthFix'，即表示图片宽度固定，高度自适应，由此即可实现效果。
最后在函数onReachBottom中修改数据即可实现上拉加载。当然实现瀑布流的方法有很多，查了一下通过css3中属性column-count也可以实现同样的效果。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_7599