关于微信小程序简单瀑布流的制作

        应业务需要，制作了简单的瀑布流，应用于购物平台。

        首先是单个内容组件。考虑到后台计算的消耗，因而将内容里的图片高度采用直接输入。到时传入数据时需注意。

<!--components/showitems/showitems.wxml-->
<!--展示商品通用框架-->
<view class="showitems-outerbox">
  <navigator class="showitems-nav" hover-class="none" url="{
  {goods.url}}">
    <image class="showitems-img" style="height:{
  {goods.picheight}}px;" lazy-load="{
  {true}}"></image>
    <view class="showitems-text-box">
      <view class="showitems-goods-detail">{
  {goods.detail}}</view>
      <view class="showitems-text-bottom">
        <view class="showitems-goods-price">￥{
  {goods.price}}</view>
        <view class="showitems-pay-number">{
  {convertpayers}}人付款</view>
      </view>
    </view>
  </navigator>
</view>

/* components/showitems/showitems.wxss */
/*外框架*/
.showitems-outerbox{
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background-color: white;
  position: relative;
}
/*视图链接*/
.showitems-nav{
  width: 100%;
  display: block;
}
/*图片*/
.showitems-img{
  width: 100%;
  display: block;
}
/*文本域*/
.showitems-text-box{
  width: 100%;
  height: 70px;        /*文本域默认高度为70px,可调整*/
}
/*商品描述*/
.showitems-goods-detail{
  height: 35px;
  width: calc(100% - 20px);
  font-size: 12px;
  overflow: hidden;
  padding: 5px 10px;
}
/*文本域底部*/
.showitems-text-bottom{
  height: 20px;
  width: calc(100% - 10px);
  padding: 0 5px;
  display: flex;
  align-items: flex-end;
}
/*商品价格*/
.showitems-goods-price{
  font-size: 13px;
  color: orangered;
  padding: 0 5px 0 0;
}
/*付款人数*/
.showitems-pay-number{
  font-size: 10px;
  color: gray;
}

// components/showitems/showitems.js
Component({
  //属性
  properties: {
    goods:{    //商品信息
      type:Object,
      value:{
        itemsurl:String,   //商品链接
        picheight:{     //图像高度,默认140px
          type:Number,
          value:140
        },
        detail:String,    //商品描述
        price:Number,     //价格
        payers:Number,    //付款人数
        id:Number        //商品id
      }
    },

  },

  //私有数据
  data: {
    convertpayers:0,  //转化后的购买人数
  },

  //组件生命周期
  lifetimes:{
    attached:function(){
      var mypayers=this.properties.goods.payers
      this.setData({
        convertpayers:mypayers>9999?(Math.floor(mypayers/10000)+'万+'):mypayers
      })
    }
  },
  
  //方法
  methods: {

  }
})

       接下来是瀑布流组件，注意与外部页面联动。加载的数据需在外部页面JSON化后传入。初始加载20个项目，且每次触底都加载20个项目，但总数尽量不要超过200个，否则可能会卡顿。可简单实现删除一个项目后从外部传入新数据并重新排布序列。组件宽度默认屏幕宽度，可按需嵌套在容器中。最后，在该组件的JSON文件中需引用上述的项目组件，这两个组件有关联。

<!--components/waterfall/waterfall.wxml-->
<!--瀑布流布局-->
<view class="waterfall-outer">
  <view c