@ozo/masonry NPM

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