{"id":28473768,"url":"https://github.com/ifanrx/brick-layout","last_synced_at":"2026-03-09T06:31:08.354Z","repository":{"id":52148938,"uuid":"143112562","full_name":"ifanrx/brick-layout","owner":"ifanrx","description":"A brick layout solution for miniprograms. 瀑布流解决方案小程序特供版。","archived":false,"fork":false,"pushed_at":"2020-08-18T05:40:00.000Z","size":1772,"stargazers_count":259,"open_issues_count":3,"forks_count":45,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-07-02T07:44:21.099Z","etag":null,"topics":["miniprogram"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ifanrx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-01T06:20:50.000Z","updated_at":"2025-05-13T09:34:46.000Z","dependencies_parsed_at":"2022-09-09T01:40:19.702Z","dependency_job_id":null,"html_url":"https://github.com/ifanrx/brick-layout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ifanrx/brick-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifanrx%2Fbrick-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifanrx%2Fbrick-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifanrx%2Fbrick-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifanrx%2Fbrick-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ifanrx","download_url":"https://codeload.github.com/ifanrx/brick-layout/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifanrx%2Fbrick-layout/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30284774,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T02:57:19.223Z","status":"ssl_error","status_checked_at":"2026-03-09T02:56:26.373Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["miniprogram"],"created_at":"2025-06-07T12:30:32.236Z","updated_at":"2026-03-09T06:31:08.318Z","avatar_url":"https://github.com/ifanrx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BrickLayout晓瀑布流使用指南\n\n## 介绍\n\nBrickLayout 晓瀑布流为使用者提供开箱即用的瀑布流布局的一种可行性的方案，使用者仅需要按照对应所需的字段传入瀑布流组件，即可快速实现瀑布流布局。未来的瀑布流组件将会提供更多样式、适用更多场景的瀑布流模板，敬请期待！希望有更多场景推荐，希望有更多内容定制，欢迎留言或者告诉我们 👏\n\n![组件于未来实验室示例](brickLayout/doc/demo.gif)\n\n## How BrickLayout ✨\n\n由于小程序的诸多限制，导致在 web 上很多常规实现瀑布流的方式大多受到不同程度的影响，小程序中，实现瀑布流组件大抵有两种思路：采用纯粹的 css 来实现，或者通过数据处理配合 css 来实现瀑布流。\n\n* 采用纯粹的 css\n\n  采用纯粹的 css 可以用 multi-column 利用 css3 属性实现多列布局、flex 布局、grid 布局等等。但是结合每个布局的特性，我们率先排除了 grid 布局，因为 grid 布局是实现相对有规则的网格布局，瀑布流布局中，grid 布局不适用。其次，我们排除了 multi-column 这个 css3 属性。在呈现效果上看，multi-column 的确很好地满足了我们对于瀑布流布局的样式布局要求，但是，multi-column 本质上是将文档流分为多列，也就是我们在杂志、报刊常见的多列布局，最后呈现效果（如下图）实际上不满足我们对有序数据的展现要求，因此而排除。\n\n  ![multi-column 展现实际效果](brickLayout/doc/multi-column.png)\n\n  最后我们的考虑范围只剩下 flex 布局，flex 布局在初始状态下的确很好地满足了我们对于数据的呈现效果，但是如果不加以数据干预，在默认非展开的情况下展开单个卡片，极端情况下会导致两列高度差过大，破坏了我们对于瀑布流的要求。\n\n* css 配合数据处理\n\n  综上所述，我们采用了 flex 布局加之对于使用者所传入的数据进行处理，达成了我们想要的效果。前端展现方面，我们还是通过 flex 布局，达成实际的瀑布流呈现效果，对于数据变化亦或是卡片展开时，我们再对数据进行进一步的处理，只有在初始化的时候，或者卡片状态发生改变的时候，对两列高度进行计算，保证两列保持较为稳定的高度差，进而实现瀑布流布局。\n\n  ![brickLayout 展现实际效果](brickLayout/doc/flex.png)\n\n## why BrickLayout ✨\n\n通过 BrickLayout 晓瀑布流使用者无须在关心实际的瀑布流布局实现，也无需关心前端的实际样式布局，更加专注于业务逻辑开发。未来的 BrickLayout 晓瀑布流将为使用者提供更加多样的模板，适用于不同场景之下的瀑布流布局。\n\n  ![brickLayout 展现实际效果](brickLayout/doc/demo.png)\n\n### 使用\n\n1. 在微信小程序管理后台中，按 APPID `wx3c042630f3cdc175` 搜索到该插件，点击添加，即可在代码中使用 `brickLayout`。\n\n2. 在 `app.json` 里，声明该插件的引入，目前该插件为 `0.2.0`，`provider` 为该插件的 APPID，`brickLayout` 为自定义的插件名称。\n\n```json\n\"plugins\": {\n  \"brickLayout\": {\n    \"version\": \"0.2.0\",\n    \"provider\": \"wx3c042630f3cdc175\"\n  }\n}\n```\n\n3. 在需要引用瀑布流组件的小程序页面的 `json` 配置文件中，作如下配置：\n\n```json\n{\n  \"usingComponents\": {\n    \"brickLayout\": \"plugin://brickLayout/brickLayout\"\n  }\n}\n```\n\n4. 使用方法\n\n```xml\n\u003cbrickLayout\n  dataSet=\"{{dataSet}}\"\n  option=\"{{brick_option}}\"\n  bind:tapCard=\"tapCard\"\n  bind:tapLike=\"tapLike\"\n  bind:tapUser=\"tapUser\"\n  bind:onCardExpanded=\"onCardExpanded\"\n/\u003e\n```\n\n### 组件属性介绍\n\n* **dataSet**\n  * **类型：** `Array\u003cObject\u003e`\n  * **类别：** required 必填参数\n  * **示例值说明：**\n    * **id**  \n      * 类型： `string`\n      * 说明：数据每条记录的唯一标志\n    * **content**  \n      * 类型：`string`\n      * 说明：(optional) 卡片实际记录的内容，不支持解析富文本\n    * **backgroundColor**\n      * 类型：`string`\n      * 说明：(optional) 每个卡片的背景颜色 如果不填，则为随机色。由于字体均为白色，不建议使用白色作为背景色\n    * **time**\n      * 类型：`unix timestamp`\n      * 说明：(optional) 记录的时间戳 如果不填默认没有时间显示\n    * **likedCount**\n      * 类型：`number`\n      * 说明：(optional) 右下角点赞的数量 如果不填默认没有卡片右下角显示\n    * **liked**\n      * 类型：`bool`\n      * 说明：(optional) 如果需要点赞功能，则需要该变量作为用户是否已经点赞的标志，如果为 false 则代表未点赞，icon 为空心 icon，且可以触发点赞动作；如果为 true 则代表已点赞，icon 为实心 icon，且不可再触发点赞动作\n    * **user**\n      * 类型：`Object`\n      * 说明：(optional) 如果不传，则不显示卡片用户区\n        * 类型：`string` (optional param) `avatar` 用户头像 url 如果不填默认没有头像\n        * 类型：`string` (optional param) `username` 用户名 如果不填默认没有用户名\n        * 类型：`string` (optional param) `userId` 用户 id， 如果需要点击用户区域相关事件，可以传入 `userId` ,用于相关点击用户区域事件回调\n    * **images**\n      * 类型：`Array\u003cstring\u003e`\n      * 说明：(optional) 如果不传，瀑布流则不显示图片，注意图片是位于文字的下方。默认会一张张显示在文字下面\n    * **示例值 🌰：**\n\n```js\n[\n  {\n    id: '1',\n    content:\n      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',\n    backgroundColor: '#AF7AC5',\n    time: 1533106010,\n    likedCount: 0,\n    liked: false,\n    user: {\n      avatar: 'user_avatar_url',\n      username: 'Minya Chan',\n      userId: '1'\n    },\n    images: [\n       'pic_url', 'pic_url', 'pic_url'\n     ]\n  },\n  {\n    id: '2',\n    content:\n      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',\n    backgroundColor: '#AF7AC5',\n    time: 1533106010,\n    likedCount: 0,\n    liked: false,\n    user: {\n      avatar: 'user_avatar_url',\n      username: 'Minya Chan',\n      userId: '1'\n    },\n    images: [\n       'pic_url', 'pic_url'\n     ]\n  }\n]\n```\n\n---\n\n* **option**\n  * **类型：** `Object`\n  * **类别：** optional 选填参数\n  * **示例值说明：**\n    * **defaultExpandStatus**\n      * 类型： `bool`\n      * 说明： (optional) 卡片默认展开情况，默认值为 `false` ，即为默认收起\n    * **backgroundColor**\n      * 类型：`string`\n      * 说明： (optional) 每个卡片默认统一的颜色，如果已经设置了卡片的颜色，优先使用卡片颜色；如果既没有卡片颜色，也没有设置全局背景色，则默认为随机色。即优先级：`card.backgroundColor` \u003e `backgoundColor` \u003e `randomColor`\n    * **forceRepaint**\n      * 类型： `bool`\n      * 说明： (optional) 是否强制重绘，强制重绘则会使原来的展开状态、高度等等全部重置，数据重新渲染。默认值为 `false`，即默认认为源数据的改变只是追加、变更或者减少数据时，不重置卡片的展开状态和高度等等\n    * **columns**\n      * 类型： `number`\n      * 说明： (optional) 瀑布流展示的列数，建议综合考虑一下使用场景的屏幕宽度，默认值为 `2`，如果传入 `0` 是无效的\n    * **imageFillMode**\n      * 类型： `string`\n      * 说明： (optional) 图片的展示功能，详情请参阅 [微信小程序 Image 的 mode 属性](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)，默认值为 `widthFix`\n    * **icon**\n      * 类型： `Object`\n      * 说明： (optional) 支持自定义图标的功能，\b仅支持上传在线图片 icon, 支持所有 wx.image 组件支持的文件格式。\n        * fill：(optional) 卡片点赞后的样式，即原示例中实心的图标样式。\n        * default: (optional) 卡片默认图标延时，即原示例中空心的图标样式。\n    * **fontColor**\n      * 类型：`string`\n      * 说明： (optional) 卡片字体颜色\n  * **示例值 🌰：**\n\n```js\n{\n  defaultExpandStatus: false,\n  backgroundColor:  '#ababab',\n  forceRepaint: false,\n  columns: 3,\n  imageFillMode: 'widthFix',\n  icon:{\n    fill:'xxx.com/icon-full.svg',\n    default:'xxx.com/icon-default.svg'\n  },\n  fontColor:'#000'\n}\n```\n\n---\n\n### 组件事件介绍\n\n如调用的组件的 wxml 声明如下：\n\n```xml\n\u003cbrickLayout\n  dataSet=\"{{dataSet}}\"\n  option=\"{{brick_option}}\"\n  bind:tapCard=\"tapCard\"\n  bind:tapLike=\"tapLike\"\n  bind:tapUser=\"tapUser\"\n  bind:onCardExpanded=\"onCardExpanded\"\n/\u003e\n```\n\n* **用户点击区域说明**\n\n![卡片结构说明](brickLayout/doc/sample.jpg)\n\n* **tapCard**\n  * **类型：** `function`\n  * **类别：** optional 选填参数\n  * **说明：** 当用户点击卡片区域时，所触发的自定义事件，可以通过 `event.detail.card_id`拿到对应的卡片的 id，该卡片 id 为 dataSet 里面的唯一标志，唯一标志该数据记录。\n  * **示例：**\n\n```js\ntapCard: function (event) {\n  const cardId =  event.detail.card_id\n  // code here.\n  console.log('tap card!')\n},\n```\n\n---\n\n* **tapLike**\n  * **类型：** `function`\n  * **类别：** optional 选填参数\n  * **说明：** 当用户点击点赞区域时，所触发的自定义事件，可以通过 `event.detail.card_id`拿到对应的卡片的 id，该卡片 id 为 dataSet 里面的唯一标志，唯一标志该数据记录。\n  * **示例：**\n\n```js\ntapLike: function (event) {\n  const cardId =  event.detail.card_id\n  // code here.\n  console.log('tap like!')\n},\n```\n\n---\n\n* **tapUser**\n  * **类型：** `function`\n  * **类别：** optional 选填参数\n  * **说明：** 当用户点击用户区域（包括 头像、用户名、时间等顶部区域）时，所触发的自定义事件，前提是要传入 `userId`，使用过程中，可以通过 `event.detail.user_id` 拿到所对应的用户 userId\n  * **示例：**\n\n```js\ntapUser: function (event) {\n  const userId =  event.detail.user_id\n  // code here.\n  console.log('tap user!')\n},\n```\n\n---\n\n* **onCardExpanded**\n  * **类型：** `function`\n  * **类别：** optional 选填参数\n  * **说明：** 当用户触发展开卡片按钮时，所触发的展开之后的自定义事件，前提是要默认缩起的状态才会有展开和缩起的事件回调，可以通过 `event.detail.card_id` 拿到所对应触发的卡片 id ,该卡片 id 为 dataSet 里面的唯一标志，唯一标志该数据记录；同时还可以通过 `event.detail.expand_status` 拿到当前卡片的展开状态，`true` 代表目前为 `展开` 状态。\n  * **示例：**\n\n```js\nonCardExpanded:function(event){\n  const cardId =  event.detail.card_id\n  const expandStatus =  event.detail.expand_status\n  // code here\n  console.log(\"expand call back\")\n},\n```\n\n### 版本修改说明 🎉\n\n* 0.1.0\n  * init！😜\n\n* 0.1.1\n  * 修复空数组提示错误的问题 😢\n\n* 0.2.0\n  * 新增图片展示功能，展示于文字下方 😯\n  * 新增自定义列数功能 😏\n  * 新增图标以及字体颜色自定义 😆\n  * 适配 ipad 下的小程序应用 😝\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fifanrx%2Fbrick-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fifanrx%2Fbrick-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fifanrx%2Fbrick-layout/lists"}