動畫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>