Question

我必须用width填充我的容器的div。但是每个width的{{1}}是在jQuery中3个可能的宽度之间随机选择的。

有一个JsFiddle，在那之后我会更容易理解我的意思。 https://jsfiddle.net/2bcqj3dj/1/

div

$(document).ready(function() {
  var classes = ["col-sm-4", "col-sm-3", "col-sm-2"];

  $("#container .item").each(function() {
    $(this).addClass(classes[~~(Math.random() * classes.length)]);
  });
});

#container {}

.item {
  background-color: #000;
  height: 250px;
  min-width: 16.666666666%;
  float: left;
  margin-bottom: 1px;
  color: #FFF;
  border: 1px solid #FFF;
}

.item.col-sm-2 {
  width: 16.6666666%;
}

.item.col-sm-3 {
  width: 25%;
}

.item.col-sm-4 {
  width: 33.33333333%;
}

目标是完美填充容器<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="container"> <div class="item">a</div> <div class="item">b</div> <div class="item">c</div> <div class="item">d</div> <div class="item">e</div> <div class="item">f</div> <div class="item">g</div> <div class="item">h</div> <div class="item">i</div> <div class="item">j</div> <div class="item">k</div> </div>，我的意思是，我不希望看到我内容右边的任何边距。

请注意，我不知道容器中最终项目的数量，因为它们是用PHP创建的。

Answer 1

您可以创建有效组合的集合来填充一行，然后根据您填写配额之前随机选择的项目数量。

组合填充一行：

items | 1/6 | 1/4 | 1/3
  1      -     -     -
  2      -     -     -
  3                  3
  4            4
  4      1     2     1
  5      4           1
  6      6

随机宽度div填充容器宽度

1 个答案: