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

75次阅读

共计 1475 个字符，预计需要花费 4 分钟才能阅读完成。

演示图
演示页面
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-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>

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

option：

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

采纳 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 外面的包