玩法说明：阅读学习、外语培训、课程作业、运动健身、早起社群，习惯养成、学习培训等多场景均可应用。 [图片] 用户可自主创建活动圈，并在圈内发布各类型打卡任务； 任务类型多样化，支持单次任务、日常任务及周长任务； 活动支持多种方式分享模式； 多维度统计圈内成员的打卡参与情况，并提供表格数据发送至邮箱服务，为管理者管理圈内成员提供数据支持； 接入图片智能鉴黄及敏感信息识别功能方便进行敏感信息过滤及舆情监控，降低平台运营风险； 提供意见反馈功能，方便收集用户使用意见；

BrickLayout 晓瀑布流是知晓云为小程序开发者提供的第 3 款插件 BrickLayout 晓瀑布流为使用者提供开箱即用的瀑布流布局的一种可行性的方案，使用者仅需要按照对应所需的字段传入瀑布流组件，即可快速实现瀑布流布局。未来的瀑布流组件将会提供更多样式、适用更多场景的瀑布流模板，敬请期待！希望有更多场景推荐，希望有更多内容定制，欢迎留言或者告诉我们 g-emoji class="g-emoji" alias="clap" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f44f.png" style="box-sizing: border-box; font-family: "Apple Color Emoji", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1.4em; line-height: 20px; vertical-align: middle;">👏/g-emoji> How BrickLayout g-emoji class="g-emoji" alias="sparkles" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png" style="box-sizing: border-box; font-family: "Apple Color Emoji", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1.4em; font-weight: 400; line-height: 20px; vertical-align: middle;">✨/g-emoji>由于小程序的诸多限制，导致在 web 上很多常规实现瀑布流的方式大多受到不同程度的影响，小程序中，实现瀑布流组件大抵有两种思路：采用纯粹的 css 来实现，或者通过数据处理配合 css 来实现瀑布流。 采用纯粹的 css 采用纯粹的 css 可以用 multi-column 利用 css3 属性实现多列布局、flex 布局、grid 布局等等。但是结合每个布局的特性，我们率先排除了 grid 布局，因为 grid 布局是实现相对有规则的网格布局，瀑布流布局中，grid 布局不适用。其次，我们排除了 multi-column 这个 css3 属性。在呈现效果上看，multi-column 的确很好地满足了我们对于瀑布流布局的样式布局要求，但是，multi-column 本质上是将文档流分为多列，也就是我们在杂志、报刊常见的多列布局，最后呈现效果（如下图）实际上不满足我们对有序数据的展现要求，因此而排除。 最后我们的考虑范围只剩下 flex 布局，flex 布局在初始状态下的确很好地满足了我们对于数据的呈现效果，但是如果不加以数据干预，在默认非展开的情况下展开单个卡片，极端情况下会导致两列高度差过大，破坏了我们对于瀑布流的要求。 css 配合数据处理 综上所述，我们采用了 flex 布局加之对于使用者所传入的数据进行处理，达成了我们想要的效果。前端展现方面，我们还是通过 flex 布局，达成实际的瀑布流呈现效果，对于数据变化亦或是卡片展开时，我们再对数据进行进一步的处理，只有在初始化的时候，或者卡片状态发生改变的时候，对两列高度进行计算，保证两列保持较为稳定的高度差，进而实现瀑布流布局。 why BrickLayout g-emoji class="g-emoji" alias="sparkles" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png" style="box-sizing: border-box; font-family: "Apple Color Emoji", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1.4em; font-weight: 400; line-height: 20px; vertical-align: middle;">✨/g-emoji>通过 BrickLayout 晓瀑布流使用者无须在关心实际的瀑布流布局实现，也无需关心前端的实际样式布局，更加专注于业务逻辑开发。未来的 BrickLayout 晓瀑布流将为使用者提供更加多样的模板，适用于不同场景之下的瀑布流布局。 [代码][代码] 插件使用案例 [图片]

使用方法1、 在微信小程序管理后台——设置——第三方服务，按 AppID（wxbf07f0f22c6c200d）搜索到该插件并申请授权（ps：一般不会出现拒绝的情况。如果申请被拒绝了，请重新申请，有时候管理员手抽点错了，请见谅）。 2、在要使用该插件的小程序 app.json 文件中引入插件声明。 [代码]"plugins": {    "calendar": {        "version": "1.0.0",        "provider": "wxbf07f0f22c6c200d"    } }[代码]3、在需要使用到该插件的小程序页面的 JSON 配置文件中，做以下配置： [代码]{  "usingComponents": {    "calendar": "plugin://poster/poster"  } }[代码]4、在相应的 HTML 页面中添加以下语句即可完成插件的嵌入。 [代码]<poster />[代码]属性[代码]属性名[代码][代码]类型[代码][代码]默认值[代码][代码]说明[代码][代码]drawing[代码][代码]Array[代码][代码][][代码][代码]画图的数据[代码][代码]savebtnText[代码][代码]String[代码][代码]"点击按钮进行图片保存"[代码][代码]按钮文字信息[代码][代码]drawing参数说明[代码][代码]drawing[代码]数据目前有两种数据信息，一种是图片信息，另一种是文字信息。 [代码]图片信息[代码][代码]属性名[代码][代码]类型[代码][代码]值[代码][代码]说明[代码][代码]type[代码][代码]String[代码][代码]image[代码][代码]图片类型[代码][代码]url[代码][代码]String[代码] [代码]图片路径，为线上图片[代码][代码]left[代码][代码]Number[代码] [代码]距离画布的左边距[代码][代码]top[代码][代码]Number[代码] [代码]距离画布的顶部距离[代码][代码]width[代码][代码]Number[代码] [代码]绘画图片的宽度[代码][代码]height[代码][代码]Number[代码] [代码]绘画图片的高度[代码][代码]circle[代码][代码]Boolean[代码][代码]true、false[代码][代码]是否是绘制圆形，默认为false[代码]文字信息[代码]属性名[代码][代码]类型[代码][代码]值[代码][代码]说明[代码][代码]type[代码][代码]String[代码][代码]text[代码][代码]文字类型[代码][代码]content[代码][代码]String[代码] [代码]绘图的文字内容[代码][代码]left[代码][代码]Number[代码] [代码]距离画布的左边距[代码][代码]top[代码][代码]Number[代码] [代码]距离画布的顶部距离[代码][代码]width[代码][代码]Number[代码] [代码]文字绘画的宽度[代码][代码]color[代码][代码]String[代码] [代码]文字信息[代码][代码]textAlign[代码][代码]String[代码] [代码]文字水平对齐方式[代码][代码]fontSize[代码][代码]Number[代码][代码]默认为26rpx[代码][代码]文字大小[代码][代码]textAlign参数[代码][代码]属性名[代码][代码]类型[代码][代码]说明[代码][代码]left[代码][代码]String[代码][代码]左对齐[代码][代码]center[代码][代码]String[代码][代码]居中对齐[代码][代码]right[代码][代码]String[代码][代码]右对齐[代码]如图： [图片] 实例： [代码]data:{     data: {    drawing: [      {        type: 'image',        url: '此处是线上图片',        left: 0,        top: 0,        width: 650,        height: 950      },      {        type: 'text',        content: '此处是文本信息',        fontSize: 26,        color: 'white',        textAlign: 'left',        left: 170,        top: 50,        width: 650,      }    ], }[代码]样式类名说明[代码]canvas-style[代码][代码]画布样式样式[代码][代码]savebtn-style[代码][代码]按钮样式[代码][代码]/* 画布样式 */ .canvas-style{  width: 650rpx !important;  height: 950rpx  !important;  margin: 0 auto;  border: 1px solid orangered;  margin-top: 10rpx; }[代码][代码]<poster  drawing='{{drawing}}'  savebtnText='{{savebtnText}}'  canvas-style='canvas-style'  savebtn-style='savebtn-style' />[代码]注意： 样式的优先级！ 效果[图片] 联系方式[图片]