动画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>