waterfall-js 瀑布流布局

• 演示图
• 核心思路借鉴自 position版本、grid版本
• 演示页面-index.html
• React 版本 codesandbox 演示页面

使用方式

1. 直接cdn引入

   // 示例代码: https://github.com/hugeorange/waterfalljs/blob/master/demo/index.html
   <script src="https://unpkg.com/browse/waterfalljs-layout@latest/dist/waterfalljs-layout.min.js"></script>
   <script>
   const wf = Waterfall({
       mode: 'position', // 还有 grid 模式可选
       el: '#waterfall',
       columnWidth: 236, // 每列宽度
       columnGap: 24, // 列间隙
       rowGap: 24, // 行间隙
       delay: 800, // 轮询获取元素高度频率
       // 自定义样式
       customStyle: `#waterfall li>div {
           border-radius: 8px;
           font-size: 20px;
           overflow: hidden;
           color: rgba(0, 0, 0, 0.6);
           padding: 6px;
           background: rgb(255, 255, 255);
           box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
           transition: all 0.5s;
         }
         #waterfall li>div:hover {
           transform: translateY(-6px);
           box-shadow: 0 30px 50px rgba(0, 0, 0, 0.3);
           transition: all 0.3s
         }
         #waterfall li>div>img {
           width: 100%
         }`
     })
     // 加载
     wf.load()
   </script>

2. React 版本

   // yarn add waterfalljs-layout
   import Waterfall from "waterfalljs-layout/react";
   // 详细演示页面请参考 
   // 1. https://github.com/hugeorange/waterfalljs/blob/master/demo/react-demo.tsx
   // 2. https://codesandbox.io/s/busy-faraday-w538tc
   <Waterfall
     mode='grid'
     el="#react-waterfall-grid-comps"
     columnWidth={236}
     columnCount={2}
     columnGap={24}
     rowGap={24}
     customStyle={customStyleGrid}
     onChangeUlMaxH={h => (ulMaxHRef.current = h)}
   >
     {images.map((item: any, index) => {
       return (
         <li key={index} onClick={() => alert('图片地址为:' + item)}>
           <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元素，使用react组件不必传此项| | columnWidth | 每一列的宽度 | number | 360 | 单位px | | columnCount |多少列 | number | - | 不传会自动根据columnWidth分配 | | columnGap | 每列之间的间隙 | number | 24 | 单位px| | rowGap | 每列之间的间隙 | number | 24 | 单位px| | delay | 轮询排布的间隔时间 | number | 500 |单位 ms，轮询获取元素高度的间隔时间| | customStyle | 自定义样式 | string | -| | | onChangeUlMaxH | 实时获取容器高度 | (h: number) => void | - |可在上拉加载场景中使用|

注意事项

• 使用UMD方式时 ==> html元素层级关系必须是 ul#el>li>div> 自己需展示的内容
• 使用React版本时 ==> Children 必须是 <li><div>自己需展示的内容</div></li>

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里面的包