最近想在小程序中通过第三方BrickLayout晓瀑布流插件实现留言卡片的瀑布流效果（如图1，图2所示），个人感觉这个还可以，可以自定义卡片颜色；头像；昵称等等信息，如果可以接入API接口更好，下面介绍实现卡片瀑布流步骤，如果有问题评论区留言或参考BrickLayout 晓瀑布流github说明

图1

图2

1. 微信小程序后台添加BrickLayout 晓瀑布流插件

这里我使用知晓云官方提供的瀑布流插件，在微信小程序管理后台中，按 APPID（wx3c042630f3cdc175）或者按照名字 BrickLayout 晓瀑布流搜索到该插件，点击添加，即可在代码中使用知晓云的瀑布流插件（图3所示）。

图3

2. 在app.json中声明插件信息

在 app.json 中声明该插件的引入，version 表示目前该插件版本为 0.2.0，provider 为提供该功能插件的 AppID

"plugins": {"brickLayout": {"version": "0.2.0","provider": "wx3c042630f3cdc175"}}

3. 配置引用瀑布流组件的小程序页面的 json文件

在需要引用瀑布流组件的小程序页面的 JSON 配置文件中，作如下配置：

{"usingComponents": {"brickLayout": "plugin://brickLayout/brickLayout"}
}

4. 在wxml中直接使用瀑布流组件

在需要应用瀑布流组件的 WXML 里面直接使用即可，需要在js中绑定一些数据，定义一些功能来实现简单的瀑布流，dataSet是定义卡片上用户头像；昵称；时间；内容等等信息，option是配置瀑布流效果：字体颜色；背景；卡片栏数目等等,代码如下:

<brickLayoutdataSet="{{dataSet}}"option="{{brick_option}}"bind:tapCard="tapCard"bind:tapLike="tapLike"bind:tapUser="tapUser"bind:onCardExpanded="onCardExpanded"
/>

5. 在card.js中初始化简单卡片信息

js中主要是声明了dataSet卡片信息数组和 brick_option瀑布流配置，代码如下:

Page({/*** 页面的初始数据*/data: {dataSet:[{id: '1',content:'若重要，总会想办法；不重要，总会找理由。         ',backgroundColor: '#08ffc8',time: 1625211453,likedCount: 0,liked: false,user: {avatar: 'https://cdn.ifanr.cn/ifanr/default_avatar.png',username: '米勒',userId: '1'},images: ['https://scpic2.chinaz.net/Files/pic/pic9/202102/apic30680_s.jpg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']},{id: '2',content:'最好的学习是对过去的反思，最好的教训是你曾经历过的失败。',backgroundColor: '#B7E3E4',time: 1625211433,likedCount: 0,liked: false,user: {avatar: 'https://img2.baidu.com/it/u=3107083461,4268460867&fm=26&fmt=auto&gp=0.jpg',username: '王胜',userId: '1'},images: ['https://img2.baidu.com/it/u=2537153149,2154125075&fm=26&fmt=auto&gp=0.jpg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']},{id: '3',content:'高度不够，看到的都是问题；格局太小，纠结的都是鸡毛蒜皮。',backgroundColor: '#ffb6b9',time: 1625711229,likedCount: 0,liked: false,user: {avatar: 'https://img0.baidu.com/it/u=1523773682,3211558535&fm=26&fmt=auto&gp=0.jpg',username: '塔雷',userId: '1'},images: ['https://img2.woyaogexing.com/2020/01/13/2923f43769214f69b83e01737c035538!1242x9999.jpeg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']},{id: '4',content:'长大后才知道，“尽量不给别人添麻烦，别人最好也别麻烦我。”这句话不是冷漠，而是成熟。',backgroundColor: '#fae3d9',time: 1625611229,likedCount: 0,liked: false,user: {avatar: 'https://img1.baidu.com/it/u=3869515018,2735128030&fm=26&fmt=auto&gp=0.jpg',username: '清影觅',userId: '1'},images: ['https://img2.baidu.com/it/u=2443313395,2083782056&fm=26&fmt=auto&gp=0.jpg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']},{id: '5',content:'“心眼”这东西：如果你想多了，就是小心眼；想少了，就是缺心眼；一直想呢，就是死心眼；不想呢，那就是没心眼了。',backgroundColor: '#AF7AC5',time: 1625211129,likedCount: 0,liked: false,user: {avatar: 'https://img1.baidu.com/it/u=1766311062,564872455&fm=26&fmt=auto&gp=0.jpg',username: '女霸@',userId: '1'},images: ['https://img1.baidu.com/it/u=2095759051,3678625480&fm=26&fmt=auto&gp=0.jpg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']},{id: '6',content:'管好你的懒惰浮躁，管好你的感情用事，管好你的怯懦自卑，管好你闲言碎语的八卦心。能静下心来做你该做的事，比什么都重要。忙的时候虽然累成狗，但是忙完了的感觉真的特别爽！——苏芩',backgroundColor: '#8ac6d1',time: 1625211453,likedCount: 3,liked: false,user: {avatar: 'https://img1.baidu.com/it/u=2681504758,1624692466&fm=26&fmt=auto&gp=0.jpg',username: 'ぐ懵懂少年恋go',userId: '1'},images: ['https://scpic1.chinaz.net/Files/pic/pic9/201707/zzpic5462_s_w285.jpg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']},{id: '7',content:'人们出于两点才改变：要不就是懂了很多，想改变；要不就是伤得太深，必须改变。',backgroundColor: '#fff1ac',time: 1625211553,likedCount: 0,liked: false,user: {avatar: 'https://img2.baidu.com/it/u=1077360284,2857506492&fm=26&fmt=auto&gp=0.jpg',username: '幸福、已走远',userId: '1'},images: ['https://img0.baidu.com/it/u=3330400531,1178525001&fm=26&fmt=auto&gp=0.jpg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']},{id: '8',content:'小时候一直不理解，父母为什么可以那么早起床，长大后才明白，叫醒他们的不是闹钟，而是生活和责任！哪有什么岁月静好，只不过有人在替你负重前行。',backgroundColor: '#f9bcdd',time: 1625211453,likedCount: 0,liked: false,user: {avatar: 'https://img0.baidu.com/it/u=3849281771,1234052768&fm=26&fmt=auto&gp=0.jpg',username: '接吻会减肥',userId: '1'},images: ['https://scpic.chinaz.net/Files/pic/pic9/202004/zzpic24736_s.jpg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']},{id: '9',content:'心如止水，乱则不明。很多事，你越是想去弄个清楚，反而越是困惑。心中一旦有了执念，就像线团，只会越扯越乱。子欲避之，反促遇之。凡事顺其自然就好。既来之，则安之。这才是生存之道。',backgroundColor: '#614ad3',time: 1625211453,likedCount: 0,liked: false,user: {avatar: 'https://img0.baidu.com/it/u=976875090,3326637112&fm=26&fmt=auto&gp=0.jpg',username: '气不乖的海绵宝宝',userId: '1'},images: ['https://scpic2.chinaz.net/Files/pic/pic9/201407/apic5143_s.jpg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']},{id: '10',content:'年龄永远不是衡量一个人的刻度，只有责任的叠加才会让人逐渐成长。',backgroundColor: '#001871',time: 1625211453,likedCount: 0,liked: false,user: {avatar: 'https://img1.baidu.com/it/u=803878594,2730255294&fm=11&fmt=auto&gp=0.jpg',username: '绅刃',userId: '1'},images: ['https://scpic2.chinaz.net/Files/pic/pic9/202104/apic32405_s.jpg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']},{id: '11',content:'有的人越来越清楚自己想成为的样子，却越来越不清楚自己现在的样子。',backgroundColor: '#ff585d',time: 1625211463,likedCount: 0,liked: false,user: {avatar: 'https://img0.baidu.com/it/u=3171043854,3327700684&fm=26&fmt=auto&gp=0.jpg',username: '小上帝',userId: '1'},images: ['https://scpic2.chinaz.net/Files/pic/pic9/202103/apic31485_s.jpg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']},{id: '12',content:'有些事，过去了，后悔无益；有些人，离开了，惋惜无用。无缘的，终将离去；无情的，都会失去。',backgroundColor: '#41b6e6',time: 1625211473,likedCount: 3,liked: false,user: {avatar: 'https://img1.baidu.com/it/u=2838780513,3053016818&fm=26&fmt=auto&gp=0.jpg',username: '流浪的猫咪',userId: '1'},images: ['https://scpic3.chinaz.net/Files/pic/pic9/202104/apic32084_s.jpg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']},{id: '13',content:'忙的人，没心思议论别人；过得好的人，没心情在意别人的评价。',backgroundColor: '#FF2E63',time: 1625214229,likedCount: 0,liked: false,user: {avatar: 'https://img0.baidu.com/it/u=3744289328,2350073756&fm=26&fmt=auto&gp=0.jpg',username: '正能量的女神@',userId: '1'},images: ['https://scpic2.chinaz.net/Files/pic/pic9/202005/apic25580_s_w285.jpg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']},{id: '14',content:'你怎么对待生活，生活就会怎么对待你。学会对自己负责，生活不能得过且过。',backgroundColor: '#7A57D1',time: 1625212229,likedCount: 0,liked: false,user: {avatar: 'https://img0.baidu.com/it/u=2013609626,3082626527&fm=26&fmt=auto&gp=0.jpg',username: '为爱控',userId: '1'},images: ['https://scpic1.chinaz.net/Files/pic/pic9/201612/zzpic332_s_w285.jpg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']},{id: '15',content:'让人难堪的玩笑不要开，让人反感的事不要做，懂得适可而止才不讨人厌。',backgroundColor: '#f6f6e9',time: 1625211269,likedCount: 3,liked: false,user: {avatar: 'https://img1.baidu.com/it/u=2515883801,2268600549&fm=26&fmt=auto&gp=0.jpg',username: '温存那份仅有的记亿丶',userId: '1'},images: ['https://img2.baidu.com/it/u=3202449959,3440156536&fm=26&fmt=auto&gp=0.jpg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']},{id: '16',content:'真正的缘，不只是初次见面就有相见恨晚的感觉，而是历尽沧桑后发出“认识你真好”的心里话。',backgroundColor: '#6abe83',time: 1625211239,likedCount: 0,liked: false,user: {avatar: 'https://img2.baidu.com/it/u=1153370429,4098031930&fm=11&fmt=auto&gp=0.jpg',username: '唯美似夏草丶 唯美似夏花丶',userId: '1'},images: ['https://img2.woyaogexing.com/2020/01/13/21e50278c02447ddbfbf6657f4bff5f6!1242x9999.jpeg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']},{id: '17',content:'我以为别人尊重我，是因为我很优秀。慢慢的我明白了，别人尊重我，是因为别人很优秀；优秀的人更懂得尊重别人。对人恭敬其实是在庄严你自己。',backgroundColor: '#2b9464',time: 1625211229,likedCount: 0,liked: false,user: {avatar: 'https://img0.baidu.com/it/u=3018968254,2801372361&fm=26&fmt=auto&gp=0.jpg',username: '花巧可言-*',userId: '1'},images: ['https://img1.baidu.com/it/u=3357258967,1502566891&fm=26&fmt=auto&gp=0.jpg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']},{id: '18',content:'叶子的离开，不是风的追求，也不是树的挽留，而是命运的安排，自然的选择；该来的会来，该走的会走，有时候离开并不意味着结束，而是另一种开始',backgroundColor: '#2BDE73',time: 1625211226,likedCount: 3,liked: true,user: {avatar: 'https://img0.baidu.com/it/u=3311900507,1448170316&fm=26&fmt=auto&gp=0.jpg',username: '海绵宝宝爱上派大星、',userId: '1'},images: ['https://img0.baidu.com/it/u=3392853817,4166535360&fm=26&fmt=auto&gp=0.jpg','https://images.ifanr.cn/wp-content/uploads/2018/08/640-90-1024x576.jpeg']}],brick_option:{defaultExpandStatus: true,backgroundColor:  '#ababab',forceRepaint: false,columns: 2,imageFillMode: 'widthFix',icon:{fill:'',default:''},fontColor:'#000'}}
})

6. 实现卡片瀑布流功能

到这里，运行小程序可以得到固定卡片信息的瀑布流，你可以在此基础上接入一些API获取用户的真实信息，实现卡片点击；点赞等事件使得更加完善，可以去参考知晓云瀑布流组件github上说明

微信小程序之卡片瀑布流相关推荐

微信小程序中实现瀑布流
wxml  <view class="discuss-container"> ...
微信小程序css卡片样式（带阴影效果）
微信小程序css卡片样式(带阴影) 效果图 wxml代码 <view class="card"></view> css样式 .card{width: 90% ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
新开发的微信小程序怎样推广引流？
新开发的微信小程序10个实用推广引流方法 1.微信小程序关键词排名微信小程序的排名跟名称.描述.上线时间.用户访问量和微信小程序的综合质量有关,且微信小程序的名称是唯一的. 2. 附近的微信小程序展 ...
微信小程序页面无限滚动流
场景当前的小程序非常火,开发起来也很快,框架很多,今天讲下mpvue这个框架实现页面无限滚动流,滚动到底加载新数据. 问题微信小程序不支持Dom, 那么要实现一个无限的滚动效果那不是蛋疼? mpv ...
小程序实现无限瀑布流
实现瀑布流实现效果有好几种方案 1.用column-count属性把页面元素分为俩列或多列来实现 2.用display flex 分列来展示页面 3.比如说用js实现我今天介绍的就是第三种,因为 ...
微信小程序分享卡片（一秒钟学会）
XML: <view class="container log-list"><view>我是分享页面</view><!-- button与 ...
微信小程序预览二进制流文件
开发时使用调试基准库版本需求在线预览doc/xls/xlsx/ppt/txt/pdf 的文件和图片. 思路将后台返回的二进制流,写入微信的文件管理器. 打开文件. 根据文件类型调用不同预览方法 ...
微信小程序之----------卡片收缩
(1)首先来看下最终的效果图效果图的描述: 点击当前卡片下的箭头,当前卡片展开,别的卡片收缩. 当前卡片展开,点击别的卡片当前卡片先收起,别的卡片在展开. 思路如下: 在data里面设置一个开关,i ...

微信小程序之卡片瀑布流