小程序使用css3实现瀑布流布局

@[TOC]小程序使用css3实现瀑布流布局

小程序+css3实现简单瀑布流布局

图片：从百度图片保存，上传到小程序云开发存储，并添加到云数据库字段，过程简单但复制粘贴稍微麻烦
实现：CSS3的column属性

1.在小程序中新建component
wxml

<view class="water-flow">
  <view class="myflow-item  {{index%2==0 ? 'flow-item-even' : 'flow-item-odd'}}" wx:for="{{flowlist}}" wx:key="index"> 
  <view class="myflow-item-box">
    <view class="imgbox">
      <image src="{{item.url}}" mode="widthFix" class="foodimg" ></image>
    </view>
    <view class="dec">{{item.des}}</view>   <!--每个卡片的描述文字-->
      </view>
    <view class="del-blank"></view>       <!--为了解决每个卡片设置margin-top/bottom后两列顶部不对齐的情况添加个跟底色相同的div假装间隔-->
  </view>
</view>

数据库字段

JS
我的是组件，不是Page哦

const db = wx.cloud.database();         //获取默认环境的云数据库
// const todos = db.collection('images');         //获取数据库某个集合的引用
const imageData = db.collection('images').doc('flowlist');    //获取该集合上的指定ID的记录
Component({
  data: {
  flowlist:[],
  },
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      let that=this;
      获取数据库中的图片
      imageData.get({
        success: function(res) {
          // res.data 包含该记录的数据
          var list=res.data.imglist;
          that.setData({
            flowlist:list
          })
        }
      })
    }
  }
})

CSS样式

.water-flow{
  width: 100%;
  height: auto;
  padding: 10rpx 30rpx;
  column-count: 2;    /*将这个div分成两列*/
  column-gap:20rpx;        /*列间距为10px=20rpx*/
  box-sizing: border-box;        /*设置padding时包含边框*/
  background: #eee;
  margin-top: 10rpx;
}
.myflow-item{
  break-inside:avoid;             /* 设置该属性会防止第一列的最后一个div会跨列，并且断裂*/
  height: auto;
  border-radius: 15rpx;
  overflow: hidden;
}
.imgbox{
  width: 100%;
}
.imgbox .foodimg{
  width: 100%;
}
.myflow-item-box{
  border-radius: 15rpx;
  background: #fff;
  border: 1px solid #ccc;
}
.dec{
  padding: 5rpx;
  font-size: 14px;
  color: #191970;
  padding-left: 30rpx;
  overflow: hidden;
  display: inner-block;
  margin-bottom: 20rpx;
}
.del-blank{
  height: 5rpx;		  /* 设置一个假装的间隔，因为margin-top/bottom之间的间隔并不能被防止断裂，*/
  margin-top: 10rpx; /* 可以给他设置margin，或者直接设置它的高度为15rpx，不要margin也可以*/
  background-color: #eee; /* 页面的背景色为#eee，所以设置它的颜色也为eee，成为一条优秀的变色龙*/
}

小程序效果图


手机截屏


解决问题的方式不止有一种，我也是第一次尝试，希望各位大佬如果有发现哪里不足或者有问题，欢迎提出并指正，谢谢各位看官~~❤