gridstack.js根据内部内容自动设置grid-stack-item的高度

Question

基于gridstack.js之类的内部内容，是否可以选择对每个grid-stack-item height使用image。

在我的情况下，每个images的高度都不同，因此在卡上无法正确显示。

它在grid-stack-item内提供滚动条以查看图像，这是错误的。

任何会基于任何因素限制固定高度的选项或解决方法或其他JS插件/库。

当前行为

预期的行为

高度将基于宽度为100%，因此图像aspect ratio得以保留。

Answer 1

我设法通过设置cellHeight：10然后在image事件中获得resizestop并更新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);
        }
    });

Answer 2

您面临的问题是关于创建“砌体布局”。我认为gridstack并不是解决此问题所需的工具。尝试使用https://masonry.desandro.com/或任何其他砌体布局库。