javascript - 如何在jQuery中排列位置绝对div

您好，我想用jQuery像排列的图像一样动态地将divs安排为适合列的样式。我有一个父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>

    

潜水安排：

最佳答案

您可以尝试使用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/

关于javascript - 如何在jQuery中排列位置绝对div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44178966/