最近在使用react-grid-layout
,版本号:^1.0.0
属性配置
<ResponsiveReactGridLayout
layouts={GridLayouts}
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480 }}
cols={{ lg: 12, md: 12, sm: 6, xs: 2 }}
rowHeight={50}
margin={[20, 20]}
containerPadding={[0, 0]}
>
{/* 内容 */}
</ResponsiveReactGridLayout>
// grid
const GridLayouts = {
lg: { i:'id', x:0, y:0, w:6, h:5 }
}
最后react-grid-layout
计算Item高度时,并不如我认为的rowHeight*h
,而是会把margin
一同算进去的:
Math.round(rowHeight * h + Math.max(0, h - 1) * margin[1])
想知道为什么要这么设计
我在使用时,想要得到设计图的高度,还是比较困难的,每行的Item高度很可能都不一样,而margin又是一样的,头疼
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…