时间戳

首页 > 解决方案 > 重复一个元素，直到它覆盖整个屏幕

javascript - 重复一个元素，直到它覆盖整个屏幕

问题描述

我希望重复一个 html/css 元素，直到它覆盖整个屏幕。

我怎样才能重复它并只在屏幕高度上停止，而不是永远重复它？

#container{
 height: 100vh;
 width: 100vw;
}
.dotts{
 background-color: yellow;
 border-radius: 50%;
 height: 20px;
 width: 20px;
}

function repeat(){
 $("#repeating").append($(".dotts:first").clone());
}

标签： javascriptjqueryhtmlcss

解决方案

使用height()

function repeat() {
  $("#repeating").append($(".dotts:first").clone());
}

let fill = Math.floor($(window).height() / $('.dotts:first').height())
for (let i = 1; i < fill; i++) {
  repeat()
}
#container {
  height: 100vh;
  width: 100vw;
}

.dotts {
  background-color: yellow;
  border-radius: 50%;
  height: 20px;
  width: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="repeating">
  <div class="dotts"></div>
</div>

推荐阅读