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

Question

是否有任何选项可以根据 image.

等内部内容对每个 grid-stack-item height 使用 gridstack.js

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

它在grid-stack-item里面给了滚动条来查看图片，这是错误的。

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

当前行为

预期行为

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

Answer 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);
        }
    });

Answer 2

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

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

gridstack.js set grid-stack-item height auto based on inner content

javascript

jquery

jquery-ui

grid

gridstack