[英]JS/Angular - figure out how many html-elements are within the width/height of parent element
I am trying to create something like this here: https://www.amazon.de/Meisterwerke-Weltliteratur-Sammlung-internationaler-Meistererzählungen/dp/3839892716/ 我正在尝试在此处创建类似的内容: https : //www.amazon.de/Meisterwerke-Weltliteratur-Sammlung-internationaler-Meistererzählungen/dp/3839892716/
if you make the width of your browser-window smaller or bigger, you will notice the suffix of the authors-element (which is always one line) will say "X-authors hidden - show all". 如果您将浏览器窗口的宽度变小或变大,您会注意到authors-element的后缀(始终为一行)将显示“ X-authors hidden-show all”。 how can I calculate how many elements/authors are out of the bounds of the authors-parent-element, so I can tell the user how many he can expand by clicking on that suffix?
如何计算超出authors-parent-element范围的元素/作者,因此我可以告诉用户单击该后缀可以扩展多少个元素/作者?
I use angular 4, but if you know the solution in plain JS, I might be able to translate it. 我使用的是4号角,但是如果您知道普通JS中的解决方案,则可以翻译它。
[EDIT]: I added two screenshots to show the effect, eg "& 16 mehr" and "& 14 mehr" (16 or 14 more in German). [编辑]:我添加了两个屏幕快照以显示效果,例如“&16英里”和“&14英里”(德语中为16或14多个)。
Write a directive who will listen to window resize, something like: 编写一条指令,该指令将监听窗口调整大小,例如:
@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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.