根据屏幕大小加载元素以填充屏幕

Question

我正在寻找一种方法来使用基于视口大小的元素填充视口。

有没有办法使用createElement()和load()等方法来执行此操作？

具体来说，我正在尝试用小圆圈填充视口。我现在设置它的方法是将它们全部手动编码到html中并将overflow设置为hidden，以便超出屏幕大小的div不可见。

如果这是不可能的，有没有办法告诉JS我正在运行只动画那些可见的div？

我有一个codepen，其中设置了div作为我正在谈论的内容的参考。在全屏尺寸下，您可以看到页面底部缺少div。