\n\t)\n}\ncomponentDidMount()\n{\n\twaterfall(this.container, 314, 25)\n}\ncomponentDidUpdate()\n{\n\twaterfall(this.container, 314, 25) // if necessary\n}\n\nif you use\nhook, you\ncan\nuse\nwaterfall in useEffect\n...\n```\n\n```markdown\n### waterfall(container, width, gap, bool, time_gap)\n\n### container: Dom\n\n### width: child Width (number),\n\nnotice: (width) This value can be passed either by using the width defined in\nCSS or by dynamically fetching data from javascript\n\n### gap: gap between childrens (number)\n\n### bool: which ways between one and two\n\n### time_gap: (number) if you use image, time_gap is the time between image load\n```\n\n> The waterflow.js library exposes a function that takes three arguments:\n>\n> ### first argument: container (When using React or Vue, pass in a ref or a DOM depending on the class name, etc.)\n>\n> ### second: width The width of a single element in the container (type number)\n>\n> ### third: gap The space between containers\n","readmeFilename":"README.md","description":"[Demo](http://alex-xueyao.gitee.io/v3pro/#/laolai)"}
![](\"./1.png\"/)
\n One\n ![](\"./2.png\"/)
\n Two\n ![](\"./3.png\"/)
\n Three ...\n ![](\"https://alex-xueyao.gitee.io/static/one.jpg\"/)
\n\n* two\n![](\"https://alex-xueyao.gitee.io/static/two.jpg\")
\n\n###### Usage\n\n```html\n\n\n\n