如何在jQuery

Question

你好我想用jQuery动态调整我的div作为适合的列样式，就像附加的图像一样。我有一个父div，里面可以有很多位置绝对的盒子。这些盒子具有相同的宽度，但高度将根据其中的数据而变化。我的HTML是

.container{
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}
.box{
  border: 2px solid;
  width: 24%;
  margin: 5px;
  float: left;
}
.col-1,.col-6{
  height: 300px;
}
.col-2,.col-8{
  height: 400px;
}
.col-3,.col-5{
  height: 200px;
}
.col-4,.col-7{
  height: 300px;
}

<div class="container">
   <div class="box col-1">Block 1</div>
   <div class="box col-2">Block 2</div>
   <div class="box col-3">Block 3</div>
   <div class="box col-4">Block 4</div>
   <div class="box col-5">Block 5</div>
   <div class="box col-6">Block 6</div>
   <div class="box col-7">Block 7</div>
   <div class="box col-8">Block 8</div>
 </div>

    

分区安排：

Answer 1

您可以尝试使用Flexbox。只需制作容器的css

即可

<code>
.container{max-width: 960px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  display: flex;
  flex-flow: column wrap;
  max-height: 800px;
}
</code>

在此处查看JSFiddle：https://jsfiddle.net/adamturner93/qo72dsuj/