@ozo/masonry

@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	瀑布流容器样式类	❌	String	''
cols	列数	❌	Number	2
data	数据源	❌	Object	{}
gutter	列间槽宽	❌	Number	10
itemRender	子项渲染方法，(item, style)=>{ return <自定义组件 />; }	❌	Function	null
itemStyle	子项style样式	❌	Object	{}
lazyLoadProps	图片懒加载的属性集合，{ offset, 相对于当前元素顶部的提前加载偏移 }, 详情参见 https://github.com/twobin/react-lazyload	❌	Object	{ offset: window.screen.height }
maxScreen	virtualized模式下，指定最大显示多少屏，默认为4	❌	Number	4
onClick	子项单击回调	❌	Function	null
onScroll	容器内滚动回调	❌	Function	null
renderType	渲染类型: 普通流(ok)、定位流(ok)、CSS多列流（测试中）、网格流（测试中）	❌	Enum('normal', 'position', 'column', 'grid')	'position'
scrollTop	设置初始滚动值,默认为0，仅首次加载时生效	❌	Number	0
style	瀑布流容器style样式	❌	Object	{}
theme	主题风格类型：扁平flat、立体shadow	❌	Enum('shadow', 'flat')	'shadow'
type	瀑布流类型：纵向(ok)、横向（暂未支持）	❌	Enum('vertical', 'horizontal')	'vertical'
virtualized	是否采用虚拟滚动	❌	Boolean	false

Piece

参数名	说明	必填	类型	默认值	备注
className	自定义样式类名	❌	String	''
data	子项数据源	❌	Object	{}
isPosition	是否绝对定位，与Masonry组件的renderType一致: false：普通流、网格流，true：定位流	❌	Boolean	false
lazyLoadProps	图片懒加载的属性集合，{ offset, 相对于当前元素顶部的提前加载偏移 }, 详情参见 https://github.com/twobin/react-lazyload	❌	Object	{ offset: window.screen.height }
style	自定义样式	❌	Object	{}
titleNode	自定义title节点	❌	ReactNode	null

ScrollView

实时返回 scrollTop，兼容移动端，默认开启了节流

参数名	说明	必填	类型	默认值	备注
className	瀑布流容器样式类	❌	String	''
delay	滚动修正触发延迟时间，默认为16.7ms	❌	Number	16.7
onScroll	容器内滚动回调	✅	Function
scrollTop	设置初始滚动值,默认为0，仅首次加载时生效	❌	Number	0
scrollable	是否可滚动	❌	Boolean	true
style	瀑布流容器style样式	❌	Object	{}