Question

我有一组div，它们全部位于一行上，需要为随机宽度，但是所有div的总和必须等于包含div的宽度。

我当时正在考虑使用百分比作为宽度。我将如何在页面加载时随机生成这些宽度百分比？

很显然，我需要使用javascript来做到这一点。如果有人能指出我正确的方向，将不胜感激。我不能为此使用jquery，它必须是普通的旧javascript。

在此先感谢您的任何建议。

我的div看起来像这样：

<div class="progWrap">
                    <div class="adhSec"></div>
                    <div class="combSec"></div>
                    <div class="dosSec"></div>
                    <div class="guidSec"></div>
                    <div class="safSec"></div>
                    <div class="othSec"></div>
                </div>

我想要的最终效果是这样的

Answer 1

如果您要向正确的方向点头：

您可以使用flexbox在其父级中对齐div。然后编写一些执行以下操作的JavaScript：

选择.progWrap内的所有div（请参见https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector）
遍历这些div，然后对每个div执行以下操作：
- 生成随机宽度（请参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random）
- 将随机宽度应用于div（请参见https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style）

祝你好运！

Answer 2

您可以使用flex-box的flex-grow属性，如下所示，并使用JS为每个div上的flex-grow值生成一个随机数。您可以轻松地向代码中添加div以获取所需的数量。我只用了四个。

CodePen：https://codepen.io/Sareliz126/pen/KrVpZr

关于弹性盒的参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<!DOCTYPE html>
<html>
<head>
  <title>flex grow random</title>
    <style>
.container {
  display: flex;
  flex-direction: row;
}

.grow {
  height: 60px;
}


#first {
  background-color: pink;
}

#second {
  background-color: blue;

}

#third {
  background-color: green;

}

#fourth {
  background-color: yellow;
}

</style>
</head>
<body>

  <div class="container">
  <div class="grow" id="first"></div>
  <div class="grow" id="second"></div>
  <div class="grow" id="third"></div>
  <div class="grow" id="fourth"></div>
</div>


<script>
  const randomize = () => {

    document.getElementById('first').style.flexGrow = Math.floor(Math.random() * 10) + 1;
    document.getElementById('second').style.flexGrow = Math.floor(Math.random() * 10) + 1;
    document.getElementById('third').style.flexGrow = Math.floor(Math.random() * 10) + 1;
    document.getElementById('fourth').style.flexGrow = Math.floor(Math.random() * 10) + 1;
  };

  window.onload=randomize;
</script>

</body>
</html>

Answer 3

希望这会有所帮助。它生成6个整数，可用于width属性。尽管最后一个div可以根据前5个div的结果获得更高的值，但是可以生成的最大值有一个限制，当前设置为20。

如果要设置宽度的最小值，可以在while循环内轻松添加条件。

const divs = () => Math.floor(Math.random() * 21); // Random number
const max = 100; // Maximum value for width
const numberOfDivs = 6;
const el = []; // Store width values
let start = 0; // Makes while loop stop when more than 100
let actual = 0; // Stores sum of widths while < 100
let i = 0; // Counting number of divs added to el
while (start < max && i < numberOfDivs) {
  const x = divs();
  el.push(x);
  start += x;
  i++;
  if (start < max) actual += x;
}
const arLength = el.length;
const lastValue = el[5];
el.splice(arLength - 1, 1); // Remove last element
el.push(max - actual + lastValue); // Add element with remaining width
console.log(el);

Answer 4

您没有任何迹象表明您正在努力解决问题的哪一部分。

这是您所描述内容的非常粗略的实现：

const a = Math.random();
const b = Math.random();
const c = Math.random();
const sum = a + b + c;

document.write(`
  <div style="background:#f00;float:left;height:50px;width:${a/sum*100}%"></div>
  <div style="background:#0f0;float:left;height:50px;width:${b/sum*100}%"></div>
  <div style="background:#00f;float:left;height:50px;width:${c/sum*100}%"></div>
`);

Answer 5

如果刷新页面，则不必使用JavaScript或jQuery。

PHP只能运行一次。

您可以这样做：

// Set a full width parent div.

<div id="parent" style="width: 100%;"> 
<?php

$width_max = 100;
$number_of_divs = 6;
$div_widths = array();

for($i = 0; $i < $number_of_divs; $i++){
$random_width = rand(0, $width_max);
$width_max -= $random_width;
array_push($div_widths, $random_with);
    }

for($i = 0; $i < $numberOfDivs; $i++){ ?>
<div style="width:<?php echo $div_width[$i];?>"></div>
   <?php }
?>

</div>

但是，无论出于何种原因，您都可以在JavaScript中进行此操作，尽管由于可以关闭JavaScript，因此不必依赖于此。

<script>



window.onload = function(){
    generateDivs();
    }

function generateDivs(){

var width_max = 100; 
var number_of_divs = 6;
var div_widths = new Array();
var parent_div = document.getElementById("parent");

for(var i = 0; i < number_of_divs; i++){
var random_width = Math.floor((Math.random() * width_max) + 1);
width_max -= random_width;
div_widths.push(random_width);
}

for(var i = 0; i < number_of_divs; i++){
var newDiv = document.createElement('div');
parent_div.appendChild(newDiv);
newDiv.style.width = div_widths[i];
}

}
</script>

请注意，在JavaScript示例中，您仍然必须包含宽度为100％且id =“ parent”的HTML Div。

单行上div的随机宽度

5 个答案: