npm package: @ozo/masonry
Description: intro component
Latest version: 1.0.25

@ozo/masonry

基于 react 的瀑布流组件

### dataTransfer

提供 dataTransfer 方法，提前转换数据格式，以满足组件需要。

**参数说明：**

```
/**
 * @param {Array} arr 转换前的数据
 * @param {Number} cols 列数，默认2
 * @param {Number} gutter 槽宽，默认10px
 * @param {Object} extra 其他扩展属性,{
 *          viewWidth, // 瀑布流view宽度,默认 414
 *          viewHeight, // 瀑布流view高度，默认 736
 *          addHeight, // 额外高度，容器中除图片外的高度
 *          maxHeight, // 子项最大高度，避免流末尾过度参差不齐
 *          imgPattern, // 图片尺寸匹配模式,默认为path,query（参数带宽高）、path（地址带宽高）、other（预加载获取宽高）
 *          force, // 强制重新计算所有值
 *      }
 * @returns {Array} 转换后的集合
 */
```

```
import Masonry, { dataTransfer } from '@ozo/masonry';

// 同步模式
const data = dataTransfer(getElements(), cols, gutter, {
    viewWidth
    viewHeight,
    addHeight,
    maxHeight,
});

// 异步模式：(采用 other加载时采用)
dataTransfer(getElements(), cols, gutter, {
    viewWidth
    viewHeight,
    addHeight,
    maxHeight,
}).then((data) => {
    this.setState({ data });
});
```

为优化加载，建议图片地址满足规范之一：

-   fetch-接口对象中返回宽高，如{src="xxx.jpg",width:300,height: 500},宽高的 key 只识别 width 或 height，不一致时，需要提前转换；
-   query-参数带宽高,如`xxx.jpg?w=300&h=500`；
-   path-地址带宽高，如`xxx/300/500.jpg`或`xxx_300_500.jpg`；
-   other-如不满足则默认采用 other-预加载获取宽高，效果不佳。

**返回值说明：**

```
{
    ...原始数据项,
    imgWidth,
    imgHeight,
    imgRatio,
    width,
    height,
    ratio,
    viewWidth,
    viewHeight,
    gutter,
}
```

## API

### Masonry

| 参数名            |                                                          说明                                                           | 必填 |                      类型                      |               默认值               | 备注 |
| ----------------- | :---------------------------------------------------------------------------------------------------------------------: | :--: | :--------------------------------------------: | :--------------------------------: | ---- |
| **className**     |                                                   `瀑布流容器样式类`                                                    | :x:  |                    `String`                    |                `''`                |
| **cols**          |                                                         `列数`                                                          | :x:  |                    `Number`                    |                `2`                 |
| **data**          |                                                        `数据源`                                                         | :x:  |                    `Object`                    |                `{}`                |
| **gutter**        |                                                       `列间槽宽`                                                        | :x:  |                    `Number`                    |                `10`                |
| **itemRender**    |                                `子项渲染方法，(item, style)=>{ return <自定义组件 />; }`                                | :x:  |                   `Function`                   |               `null`               |
| **itemStyle**     |                                                     `子项style样式`                                                     | :x:  |                    `Object`                    |                `{}`                |
| **lazyLoadProps** | `图片懒加载的属性集合，{ offset, 相对于当前元素顶部的提前加载偏移 }, 详情参见 https://github.com/twobin/react-lazyload` | :x:  |                    `Object`                    | `{ offset: window.screen.height }` |
| **maxScreen**     |                                    `virtualized模式下，指定最大显示多少屏，默认为4`                                     | :x:  |                    `Number`                    |                `4`                 |
| **onClick**       |                                                     `子项单击回调`                                                      | :x:  |                   `Function`                   |               `null`               |
| **onScroll**      |                                                    `容器内滚动回调`                                                     | :x:  |                   `Function`                   |               `null`               |
| **renderType**    |                        `渲染类型: 普通流(ok)、定位流(ok)、CSS多列流（测试中）、网格流（测试中）`                        | :x:  | `Enum('normal', 'position', 'column', 'grid')` |            `'position'`            |
| **scrollTop**     |                                       `设置初始滚动值,默认为0，仅首次加载时生效`                                        | :x:  |                    `Number`                    |                `0`                 |
| **style**         |                                                  `瀑布流容器style样式`                                                  | :x:  |                    `Object`                    |                `{}`                |
| **theme**         |                                          `主题风格类型：扁平flat、立体shadow`                                           | :x:  |            `Enum('shadow', 'flat')`            |             `'shadow'`             |
| **type**          |                                        `瀑布流类型：纵向(ok)、横向（暂未支持）`                                         | :x:  |        `Enum('vertical', 'horizontal')`        |            `'vertical'`            |
| **virtualized**   |                                                   `是否采用虚拟滚动`                                                    | :x:  |                   `Boolean`                    |              `false`               |

### Piece

| 参数名            |                                                          说明                                                           | 必填 |    类型     |               默认值               | 备注 |
| ----------------- | :---------------------------------------------------------------------------------------------------------------------: | :--: | :---------: | :--------------------------------: | ---- |
| **className**     |                                                    `自定义样式类名`                                                     | :x:  |  `String`   |                `''`                |
| **data**          |                                                      `子项数据源`                                                       | :x:  |  `Object`   |                `{}`                |
| **isPosition**    |                   `是否绝对定位，与Masonry组件的renderType一致: false：普通流、网格流，true：定位流`                    | :x:  |  `Boolean`  |              `false`               |
| **lazyLoadProps** | `图片懒加载的属性集合，{ offset, 相对于当前元素顶部的提前加载偏移 }, 详情参见 https://github.com/twobin/react-lazyload` | :x:  |  `Object`   | `{ offset: window.screen.height }` |
| **style**         |                                                      `自定义样式`                                                       | :x:  |  `Object`   |                `{}`                |
| **titleNode**     |                                                    `自定义title节点`                                                    | :x:  | `ReactNode` |               `null`               |

### ScrollView

实时返回 scrollTop，兼容移动端，默认开启了节流
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| -------------- | :----------------------------------------: | :----------------: | :--------: | :----: | ---- |
| **className** | `瀑布流容器样式类` | :x: | `String` | `''` |
| **delay** | `滚动修正触发延迟时间，默认为16.7ms` | :x: | `Number` | `16.7` |
| **onScroll** | `容器内滚动回调` | :white_check_mark: | `Function` | |
| **scrollTop** | `设置初始滚动值,默认为0，仅首次加载时生效` | :x: | `Number` | `0` |
| **scrollable** | `是否可滚动` | :x: | `Boolean` | `true` |
| **style** | `瀑布流容器style样式` | :x: | `Object` | `{}` |