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

Posted 2023-02-19

【中文标题】gridstack.js 根据内部内容设置 grid-stack-item 高度自动

【英文标题】：gridstack.js set grid-stack-item height auto based on inner content

【发布时间】：2019-01-23 11:56:35

【问题描述】：

是否有任何选项可以根据image 等内部内容将gridstack.js 与每个grid-stack-item height 一起使用。

在我的场景中，每个 images 都有不同的高度，因此它无法正确显示在卡片上。

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

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

当前行为

预期行为

高度将是 100% 基于宽度，所以图像 aspect ratio 保留。

【参考方案1】：

我设法通过设置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);
        
    );

【参考方案2】：

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