{"id":17969592,"url":"https://github.com/mqyqingfeng/waterfall","last_synced_at":"2025-10-03T23:29:47.342Z","repository":{"id":91238511,"uuid":"113125464","full_name":"mqyqingfeng/waterfall","owner":"mqyqingfeng","description":"原生 JavaScript 实现的瀑布流效果，兼容到 IE8。","archived":false,"fork":false,"pushed_at":"2017-12-05T03:17:25.000Z","size":5641,"stargazers_count":120,"open_issues_count":1,"forks_count":25,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-20T01:41:24.633Z","etag":null,"topics":["javascript","waterfalls"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mqyqingfeng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-05T03:11:07.000Z","updated_at":"2024-10-29T03:56:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"3e9bebeb-68c2-4de7-9221-1be254f2334a","html_url":"https://github.com/mqyqingfeng/waterfall","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/mqyqingfeng%2Fwaterfall","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mqyqingfeng%2Fwaterfall/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mqyqingfeng%2Fwaterfall/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mqyqingfeng%2Fwaterfall/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mqyqingfeng","download_url":"https://codeload.github.com/mqyqingfeng/waterfall/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245444584,"owners_count":20616413,"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":["javascript","waterfalls"],"created_at":"2024-10-29T15:00:35.062Z","updated_at":"2025-10-03T23:29:42.312Z","avatar_url":"https://github.com/mqyqingfeng.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# waterfall\n\n## 介绍\n\n原生 JavaScript 实现的瀑布流效果，兼容到 IE8。\n\n## 效果图：\n\n![演示图](https://raw.githubusercontent.com/mqyqingfeng/waterfall/master/demonstration.gif)\n\n源码地址：\n\n[https://mqyqingfeng.github.io/waterfall/](https://mqyqingfeng.github.io/waterfall/)\n\n## 依赖\n\n原生 JavaScript 实现，无依赖。\n\n## 大小\n\n压缩后 5KB，gzip 压缩后更小。\n\n## 下载\n\n```js\ngit clone git@github.com:mqyqingfeng/waterfall.git\n```\n\n## 使用\n\n```html\n\u003cscript src=\"path/waterfall.js\"\u003e\u003c/script\u003e\n```\n\n或者\n\n```js\nimport WaterFall from 'path/waterfall.js'\n```\n\n## 示例\n\n```js\nvar waterfall = new WaterFall({\n    container: '#waterfall',\n    pins: \".pin\",\n    loader: '#loader',\n    gapHeight: 20,\n    gapWidth: 20,\n    pinWidth: 216,\n    threshold: 100\n});\n\nwaterfall.on(\"load\", function(){\n    setTimeout(function(){\n        var htmlStr = '\u003cdiv class=\"pin\"\u003e\u003cimg src=\"img/1.jpeg\" class=\"img\"\u003e\u003cp class=\"description\"\u003e文字\u003c/p\u003e\u003c/div\u003e';\n        // 调用 append 方法，传入 html 字符串和图片的选择符，\n        // append 函数会检验是否所有的图片都具有高度后才会 append 进文档树中\n        waterfall.append(htmlStr, '.img')\n    }, 1000)\n})\n```\n\n## API\n\n### 初始化\n\n```js\nvar waterfall = new WaterFall(options);\n```\n\n### options\n\n**container**\n\n必填，指定瀑布流容器的 selector\n\n**pins**\n\n必填，指定瀑布流添加的区块的 selector\n\n**loader**\n\n必填，指定瀑布流加载时的 loading 的 selector\n\n**gapHeight**\n\n默认值为 `20`，pins 上下间隔的距离\n\n**gapWidth**\n\n默认值为 `20`，pins 左右间隔的距离\n\n**pinWidth**\n\n默认值为 `216`，pins 的宽度为 216px\n\n**threshold**\n\n默认值为 `100`，当距离底部还是有 100px 的时候就开始加载\n\n### 事件绑定\n\n当需要加载新的数据时，会触发 load 事件\n\n```js\nwaterfall.on(\"load\", function(){\n    // 模拟数据加载\n    setTimeout(function(){\n        // 注意当加载新的 pins 的时候，需要调用 waterfall.append 函数\n        waterfall.append(htmlStr, selector)\n    }, 1000)\n})\n```\n\n### 方法\n\n**append**\n\n该函数传入两个参数：\n\n1.htmlStr 类似于\n\n```js\n'\u003cdiv class=\"pin\"\u003e\u003cimg class=\"img\"\u003e ... \u003c/div\u003e'\n```\n\n需要注意每个 pin 需要添加与 options.pins 一致的类名，图片元素需要添加类名，然后作为选择符，传入第二个参数\n\n2. selector\n\n图片的选择符，以上面的例子为例，应该传入\n\n```js\nwaterfall.append(htmlStr, '.img')\n```\n\n这是为了根据选择符筛选出要加载的图片，判断所有的图片都有了高度之后，才会添加进瀑布流中。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmqyqingfeng%2Fwaterfall","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmqyqingfeng%2Fwaterfall","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmqyqingfeng%2Fwaterfall/lists"}