@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 | {} |