{"id":13654426,"url":"https://github.com/icindy/WxMasonry","last_synced_at":"2025-04-23T09:33:26.770Z","repository":{"id":75520554,"uuid":"72925281","full_name":"icindy/WxMasonry","owner":"icindy","description":"WxMasonry-微信小程序瀑布流布局模式","archived":false,"fork":false,"pushed_at":"2016-11-05T13:58:57.000Z","size":808,"stargazers_count":126,"open_issues_count":6,"forks_count":32,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-12T17:02:24.527Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/icindy.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-11-05T12:41:46.000Z","updated_at":"2025-02-13T19:07:34.000Z","dependencies_parsed_at":"2023-06-06T18:00:20.408Z","dependency_job_id":null,"html_url":"https://github.com/icindy/WxMasonry","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icindy%2FWxMasonry","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icindy%2FWxMasonry/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icindy%2FWxMasonry/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icindy%2FWxMasonry/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/icindy","download_url":"https://codeload.github.com/icindy/WxMasonry/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250407703,"owners_count":21425548,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-08-02T03:00:32.361Z","updated_at":"2025-04-23T09:33:26.477Z","avatar_url":"https://github.com/icindy.png","language":"JavaScript","funding_links":[],"categories":["Demo","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# WxMasonry\nWxMasonry-微信小程序瀑布流布局模式\n\n## 来源\n[微信小程序开发论坛](http://weappdev.com/)\n垂直微信小程序开发交流论坛\n\n\n## 效果\n\n![WxMasonry-微信小程序实现瀑布流布局效果gif](screenshoot/masonry.gif)\n\n## github地址\n\n[WxMasonry-微信小程序实现瀑布流布局 https://github.com/icindy/WxMasonry](https://github.com/icindy/WxMasonry)\n\n\n## 先提一个问题，以免你们不看到最后\n\n**在微信小程序的循环列表中，如何实现图片的等比例缩放，这件事上我有尝试，但是效果不佳，欢迎交流解决方案！！**\n\n## 实现方式\n\n\u003e 虽然实现方式很简单，但是我起初没有想到，也是绕了很远的路才想到。当你看到下面的解决方案的时候，请不要说我sb，因为我确实是没有想起来，太久没有学习前端知识，很多属性基本没有见过。\n\n* 使用css3的`column-＊`属性\n  + column-width\n  + column-count\n  + column-gap\n\n\u003e 如果熟悉css3的朋友可能一下子就想起来了，但是我并没有 我是绕了一大圈才想起来\n\n* 实现方式\n\n```\n.WxMasonryView{\n  column-count:2;\n  column-gap: 10px;\n  width: 100%;\n}\n.WxMasonry{\n  width: 95%;\n  background: #fefefe;\n  border: 2px solid #fcfcfc;\n  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);\n  margin: 5px 2px 2px 2px;\n  padding: 1px;\n  padding-bottom: 5px;\n  transition: opacity .4s ease-in-out;\n  display: inline-block;\n}\n```\n\ncolumn-count： 用于分割几列,这样你就可以通过直接设置几列，而不用担心屏幕宽度，当然这里有个坑哈，就是图片自适应！\n\ncolumn-gap: 间距不提。\n\n\u003e 至于几个属性的使用，建议自己w3c一下\n \n## 心酸历程\n\n\u003e 实际上在着手做瀑布流的时候，我想到过纯css的的方法，但是我没有看到过column-＊属性，因为已经很久没有再次学习css了。\n\n* 为什么会首先考虑纯css路线\n原因很简单，微信小程序没有dom操作，如果按照常规的路线是无法实现的。纯float是不科学的，因为，你自己可以尝试，float达不到瀑布流的间隙插针的效果。\n\n* 常规的瀑布流实现方式\n前端工程师看到瀑布流的时候，会想到很对js库，或者jquery库，这些库的实现原理大同小异，基本上都是使用了“绝对定位”进行计算布局。\n\n* 我的弯路\n我毫不犹豫的想要按照常规的瀑布实现方式，但是没有办法实现那么多dom层级嵌套计算，所以想了很久没有想通，才跳回到纯css路线的，后面搜索发现了column-＊属性，所以才浪费了很长时间。\n\n## 总结\n\n既然微信小程序没有Dom操作，可以通过css3的很多属性来解决一些问题。\n\n## 来源\n[微信小程序开发论坛](http://weappdev.com/)\n垂直微信小程序开发交流论坛\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficindy%2FWxMasonry","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficindy%2FWxMasonry","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficindy%2FWxMasonry/lists"}