gridstack.js 根据内部内容自动设置 grid-stack-item 高度
gridstack.js set grid-stack-item height auto based on inner content
是否有任何选项可以根据 image
.
等内部内容对每个 grid-stack-item
height
使用 gridstack.js
在我的场景中,每个 images
都有不同的高度,因此无法在卡片上正确显示。
它在grid-stack-item
里面给了滚动条来查看图片,这是错误的。
将根据任何因素限制固定高度的任何选项或解决方法或其他 JS plugin/library。
当前行为
预期行为
高度将 100%
基于宽度,因此图像 aspect ratio
保留。
我设法通过设置 cellHeight
来做到:10
然后在 resizestop
事件中获取 image
并更新 updateWidget
.
下面是该 resizestop
事件的示例代码。
$('.grid-stack').on('resizestop', function (e, item) {
let stackItem = me.findGridStackItem(item.element.find('img').data('Id'));
if (stackItem) {
setTimeout(() => {
stackItem.option.height = Math.ceil(($(stackItem.nativeElement).find('img').height() + 5) / 10);
me.gridStackMain.updateWidget(stackItem);
}, 200);
}
});
您面临的问题是关于创建 "masonry layout"。我认为 gridstack 不是解决此问题所需的工具。尝试 https://masonry.desandro.com/ 或任何其他砌体布局库。
是否有任何选项可以根据 image
.
grid-stack-item
height
使用 gridstack.js
在我的场景中,每个 images
都有不同的高度,因此无法在卡片上正确显示。
它在grid-stack-item
里面给了滚动条来查看图片,这是错误的。
将根据任何因素限制固定高度的任何选项或解决方法或其他 JS plugin/library。
当前行为
预期行为
高度将 100%
基于宽度,因此图像 aspect ratio
保留。
我设法通过设置 cellHeight
来做到:10
然后在 resizestop
事件中获取 image
并更新 updateWidget
.
下面是该 resizestop
事件的示例代码。
$('.grid-stack').on('resizestop', function (e, item) {
let stackItem = me.findGridStackItem(item.element.find('img').data('Id'));
if (stackItem) {
setTimeout(() => {
stackItem.option.height = Math.ceil(($(stackItem.nativeElement).find('img').height() + 5) / 10);
me.gridStackMain.updateWidget(stackItem);
}, 200);
}
});
您面临的问题是关于创建 "masonry layout"。我认为 gridstack 不是解决此问题所需的工具。尝试 https://masonry.desandro.com/ 或任何其他砌体布局库。