javascript - JS/Angular - 找出父元素的宽度/高度内有多少 html 元素

Question

我想在这里创建这样的东西:https://www.amazon.de/Meisterwerke-Weltliteratur-Sammlung-internationaler-Meistererzählungen/dp/3839892716/

如果您使浏览器窗口的宽度变小或变大，您会注意到 authors-element 的后缀(始终为一行)会显示“X-authors hidden - show all”。我如何计算有多少元素/作者超出了作者父元素的范围，这样我就可以通过单击该后缀告诉用户他可以扩展多少？

我使用 angular 4，但如果你知道纯 JS 的解决方案，我也许可以翻译它。

[编辑]:我添加了两个屏幕截图来显示效果，例如“& 16 mehr”和“& 14 mehr”(德语中还有 16 或 14)。

和

Answer 1

写一个监听窗口调整大小的指令，比如:

@HostListener('window:resize', ['$event'])
onResize(event) {

    const elementHeight = event.target.innerHeight;
    const parentHeight = window.innerHeight;
    const visibleElements = parentHeight / elementHeight;
    const hiddenElements = Math.ceil(elementHeight - visibleElements);
    console.log(hiddenElements);
}