为 div 的高度设置动画并让下面的 div 向下移动

Question

基本上我希望有 div 列，当用户单击 div 时，他/她可以在 div 中看到更多，因为高度变大了。我设置了它，但看起来我遇到了文档流问题。当我单击第一列中的 div 时，它下面的 div 会做一些有趣的事情。下面的一个像中途一样进入下一列。这不好，我希望它在第一列中向下移动，并让其他较低的 div 跟随。这实际上发生在第二列。这很好，但问题是当我单击第二列中的 div 时，第一列会产生相同的空间。第一列应该什么都不做。你会如何解决这个问题？

我想的一种方法是让 2 列向左浮动，而不是每个 div，我认为这将解决文档流问题。但这会破坏 div 左浮动的便利性，因为 div 需要按顺序排列。

$(function(){
  $(".box").on("click", function(){
    if(!$(this).hasClass("open")){
      $(this).addClass("open");
      $(this).animate({
        height : "+=100"
      })
    }else{
      $(this).animate({
        height : "-=100"
      })
      $(this).removeClass("open")
    }
  })
})

html{
  font-size: 18;
}
.wrapper{
  width: 40em;
  height: 60em;
  background: #ccc;
}
.box{
  float: left;
  height: 8em;
  width: 18em;
  background: tomato;
  margin-bottom: 2em;
}
.box:nth-child(even){
  margin-left: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

下面是我想要的效果。这不太好，因为当我想动态插入我不知道的 div 数据时，我将不得不进行操作。 1和2应该是相邻的。它在屏幕上显示，但在 html 中相距很远。这可能会在以后引起混乱。如果有人有更好的方法，请告诉我。

$(function(){
  $(".box").on("click", function(){
    if(!$(this).hasClass("open")){
      $(this).addClass("open")
      $(this).animate({
        height : "+=100"
      })
    }else{
      $(this).animate({
        height : "-=100"
      })
      $(this).removeClass("open")
    }

  })
})

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.wrapper{
  width: 40em;
  background: #ccc;
  height: 40em;
}
.col1{
  float: left;
  width: 19em;
}
.col2{
  float: right;
  width: 19em;
}
.box{
  background: tomato;
  height: 5em;
  margin-bottom: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper clearfix">
  <div class="col1">
    <div class="box">1</div>
    <div class="box">3</div>
    <div class="box">5</div>
  </div>
  <div class="col2">
    <div class="box">2</div>
    <div class="box">4</div>
    <div class="box">6</div>
  </div>
</div>

Answer 1

添加flex，删除float，奇怪的错位就消失了。

$(function(){
  $(".box").on("click", function(){
    if(!$(this).hasClass("open")){
      $(this).addClass("open");
      $(this).animate({
        height : "+=100"
      })
    }else{
      $(this).animate({
        height : "-=100"
      })
      $(this).removeClass("open")
    }
  })
})

html{
  font-size: 18;
}
.wrapper{
  display: flex;
  flex-wrap: wrap;
  width: 40em;
  background: #ccc;
}
.box{
  height: 8em;
  width: 18em;
  background: tomato;
  margin-bottom: 2em;
}
.box:nth-child(even){
  margin-left: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

更新

为了使它们不向下推（逐行）并创建空白间隙，您可以使用列（参见下面的示例），或者您需要类似Masonry

$(function(){
  $(".box").on("click", function(){
    if(!$(this).hasClass("open")){
      $(this).addClass("open");
      $(this).animate({
        height : "+=100"
      })
    }else{
      $(this).animate({
        height : "-=100"
      })
      $(this).removeClass("open")
    }
  })
})

html{
  font-size: 18;
}
.wrapper{
  -webkit-columns: 18em 2; /* Chrome, Safari, Opera */
  -moz-columns: 18em 2; /* Firefox */
  columns: 18em 2;
  background: #ccc;
}
.box{
  display: inline-block;
  height: 8em;
  width: 18em;
  background: tomato;
  margin-bottom: 2em;
  order: 1;
}
.box:nth-child(odd) {
  order: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
  <div class="box">1</div>
  <div class="box">3</div>
  <div class="box">5</div>
  <div class="box">2</div>
  <div class="box">4</div>
  <div class="box">6</div>
</div>