乐趣区

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

jiezi
  • 演示图
  • 演示页面
  • React 版本 codesandbox 演示页面
  • 外围思路借鉴自 https://codepen.io/iounini/pe…

  • 根本实现原理参见: 总结实现瀑布流的三种形式

    应用形式

  1. 间接 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()

  2. 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>
  3. 简略粗犷的方法间接拷贝 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 外面的包
退出移动版