下个阶段的改进 about vue-virtual-waterfall HOT 8 CLOSED

嗯，好的，这个好，之前加个死的文字高度，只有一行文本的时候，空白区域太大。

只有文字的，我晚点试试。

我准备把有的内容，都关联到一个表里面，有图文的，有文字的。一起显示。

https://itrumors.com/buyers/xiaomi 现在部署了。 我这个也没有办法开源，好多内容没有弄上面来，等哪天完善了，再看要不要开源吧，现在设置为私有了。

不过还有很多待优化的点，使用起来，感觉哪里怪怪的。

内容还在加。现在用的 cf 有点卡。省掉了备案。

from vue-virtual-waterfall.

参考

• masonry

• isotope

• 虚拟列表优化

from vue-virtual-waterfall.

已解决:

// 计算真实高度，这里只计算除了图片的高度
function getRealHeight(item: ItemOption, realWidth: number) {
    const dom = document.createElement('div')

    render(
        h(Card, {
            item: item,
            width: realWidth + 'px',
            noImage: true
        }),
        dom
    )

    document.body.appendChild(dom)

    // 获取高度
    const height: number = dom.clientHeight

    // 移除新容器
    document.body.removeChild(dom)
    // 返回高度
    return height
}

from vue-virtual-waterfall.

现在支持，没有图片，纯文字的版本吗？图片和文字混合的

from vue-virtual-waterfall.

现在支持，没有图片，纯文字的版本吗？图片和文字混合的

支持了，可以看例子，我通过创建一个临时dom去计算文本的高度，再把dom删除，文本高度加上图片高度就可以了

代码位置

当然也可以连同图文一同计算，但如果图片太大，可能会耗时太久，我这里的数据是已知图片的尺寸，省去了图片的渲染，单独计算出文本渲染后的高度即可

from vue-virtual-waterfall.

刚才改了下，发现

render(h(WaterfallText, { data: item }), dom)

这个方法不支持NuxtImg，找了半天原因，最终算是调好了。新建了一个 WaterfallText 没有图片，只有title的组件，用来给render方法调用，哈哈

顺便梳理了一下代码。用了你的方式 useWaterfall

from vue-virtual-waterfall.

@dxhuii 原生的img不行吗？

from vue-virtual-waterfall.

@dxhuii 原生的img不行吗？

原生的应该没有问题。

from vue-virtual-waterfall.