Question

在您可以在下面运行的演示中，我生成了具有随机位置和大小的圆。

我将页面设置为在调整窗口大小时重新加载，但这不是我想要的。 我想在调整窗口大小时重新计算圆圈的大小和位置，而无需重新加载页面。

我尝试了很多事情，但是我根本无法使它工作。任何帮助将不胜感激。

>>> df_filtered
     a  b
0  201  1
1  201  2
2  201  3
4  202  1
5  202  2
7  203  1

// Draw circles

const list = (length, callback) =>
  Array.from(new Array(length), (hole, index) => callback(index))

const random = (min, max) => Math.random() * (max - min) + min

const viewportWidth = Math.max(
  document.documentElement.clientWidth,
  window.innerWidth || 0
)

const viewportHeight = Math.max(
  document.documentElement.clientHeight,
  window.innerHeight || 0
)

const elements = list(48, () => {
  const circle = document.createElement("span")
  const minSize = Math.round((viewportWidth + viewportHeight) / 48)
  const maxSize = Math.round((viewportWidth + viewportHeight) / 24)
  const size = random(minSize, maxSize)
  Object.assign(circle.style, {
    width: `${size}px`,
    height: `${size}px`,
    left: `${random(0, 100)}%`,
    top: `${random(0, 100)}%`
  })
  return circle
})

document.body.append(...elements)

// Reload page on window resize

window.addEventListener("resize", () => {
  window.location.reload(true)
})

Answer 1

而不是px，请使用vh或vw ov vmax或vmin单位

此处有一些解释https://web-design-weekly.com/2014-11-18-viewport-units-vw-vh-vmin-vmax/

vw：：视口宽度的1/100

vh： 1/100视口高度

vmin ：最小边的1/100

vmax：最大边的1/100

// Draw circles

const list = (length, callback) =>
  Array.from(new Array(length), (hole, index) => callback(index))

const random = (min, max) => Math.random() * (max - min) + min

const viewportWidth = Math.max(
  document.documentElement.clientWidth,
  window.innerWidth || 0
)

const viewportHeight = Math.max(
  document.documentElement.clientHeight,
  window.innerHeight || 0
)

const elements = list(48, () => {
  const circle = document.createElement("span")
  const minSize = Math.round((viewportWidth + viewportHeight) / 150) // tune this to your needs
  const maxSize = Math.round((viewportWidth + viewportHeight) / 80)// tune this to your needs
  const size = random(minSize, maxSize)
  Object.assign(circle.style, {
    width: `${size}vmin`,// vmin used instead px , but vh,vw aand vmax is also avalaible
    height: `${size}vmin`,// vmin used instead px , but vh,vw aand vmax is also avalaible
    left: `${random(0, 100)}%`,
    top: `${random(0, 100)}%`
  })
  return circle
})

document.body.append(...elements)

body { overflow: hidden }

span {
  background: black;
  position: absolute;
  border-radius: 50%;
  opacity: .5
}

计算窗口大小调整时的圆圈大小

1 个答案: