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中的解决方案，我或许可以翻译它。

[编辑]：我添加了两个截图来显示效果，例如： “＆amp; 16 mehr”和“＆amp; 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);
}