关于react.js:原生-js-实现瀑布流布局React-版本的瀑布流布局组件

演示图
演示页面
React 版本 codesandbox 演示页面
外围思路借鉴自 https://codepen.io/iounini/pe...
根本实现原理参见: 总结实现瀑布流的三种形式
应用形式

间接cdn引入

// 示例代码: 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()

React 版本

// yarn add waterfalljs-layoutimport 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>

简略粗犷的方法间接拷贝src/index.ts目录下的代码到你的我的项目中应用，vue、react我的项目均可，或是间接 esmodule 导入 import Waterfall from "waterfalljs-layout

API

option：

选项	含意	值类型	默认值	备注
el	容器元素id	string	#waterfall	容器必须是ul元素
columnWidth	每一列的宽度	number	360
columnCount	多少列	number	-	不传会主动调配
gap	每列之间的间隙	number		500
delay	轮询排布的间隔时间	number	#waterfall
customStyle	自定义款式	string	-
onChangeUlMaxH	实时获取容器高度	(h: number) => void	-	可在上拉加载场景中应用

rollup 打包遇到的问题

采纳 rollup 多入口打包，别离打出无框架依赖的外围 js 库，和 react 版本的库 - 配置文件详见 rollup.config.js，react 版本本地开发调试配置文件rollup.config.react-dev.js
为了不便外围 js库援用及 react 版本没有辨别目录，对立放在 src 根目录下，ts 主动生成 .d.ts 会依据文件名主动生成一个目录(并且会为所有文件生成 .d.ts) 如下图所示
package.json 怎么定义导出两个包，参考自 swiper 的定义形式 Node.JS（新）Package.json exports 字段
swiper 定义形式
TODO: rollup react开发环境无奈加载node_module外面的包

应用形式

API

rollup 打包遇到的问题