2

是否有任何选项可以gridstack.js根据grid-stack-item height内部内容（如image.

在我的场景中，每个images都有不同的高度，所以它没有正确显示在卡片上。

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

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

当前行为

当前行为

预期行为

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

在此处输入图像描述

4

2 回答 2

0

我设法通过设置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);
        }
    });
于 2018-08-27T11:46:15.077 回答
0

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

于 2020-04-14T11:44:18.477 回答