Native js implements waterfall layout, React version of waterfall layout components

• demo map
• demo page
• React version codesandbox demo page
• The core idea is borrowed from https://codepen.io/iounini/pen/KyYPKe

• For the basic implementation principle, see: Summarize three ways to implement waterfall flow

  How to use

1. Direct cdn import

    // 示例代码: https://github.com/hugeorange/waterfalljs/blob/master/src/index.html
   <script src="https://unpkg.com/browse/waterfalljs-layout@latest/dist/waterfalljs-layout.esm.js"></script>
   <script>
       const wf = new Waterfall({
           el: '#waterfall',
           columnWidth: 236,
           gap: 24,
           delay: 800,
           // 自定义样式按需使用
           customStyle: ''
       })
       // ..................................
       // 初始化数据或加载更多场景时时调用 
       wf.loadMore()

2. React version

    // yarn add waterfalljs-layout
   import Waterfall from "waterfalljs-layout/react";
   // 详细演示页面请参考 https://codesandbox.io/s/busy-faraday-w538tc
   <Waterfall
       columnWidth={236}
       columnCount={2}
       gap={24}
       customStyle={customStyle}
       onChangeUlMaxH={(h) => console.log('ul容器高度-->', h)}
     >
       {images.map((item, index) => {
         return (
           <li key={index} >
             <div><img src={item} alt="" /></div>
           </li>
         );
       })}
     </Waterfall>

3. The simple and rude method is to directly copy the code in the directory src/index.ts to use in your project, both vue and react projects, or directly import import Waterfall from "waterfalljs-layout

---

API

option :

Options	meaning	value type	Defaults	Remark
el	container element id	string	#waterfall	The container must be a ul element
columnWidth	the width of each column	number	360
columnCount	how many columns	number	-	If not passed, it will be automatically allocated
gap	Gap between each column	number		500
delay	polling schedule interval	number	#waterfall
customStyle	custom style	string	-
onChangeUlMaxH	Get container height in real time	(h: number) => void	-	Can be used in pull-up loading scenarios

Problems encountered with rollup packaging

• Adopt rollup multi-entry packaging, respectively type out the core js library without framework dependency and the react version library - see rollup.config.js for configuration files, and react version local development and debugging configuration file rollup.config.react-dev.js
• In order to facilitate the reference of the core .d.ts library and the react version, there is no distinction between directories, and they are placed in the .d.ts root directory. .d.ts ) as shown below
  
• How to define and export two packages in package.json, refer to the definition method of swiper (new) Package.json exports field
• How swiper is defined
  
• TODO: The rollup react development environment cannot load the packages in node_module