javascript - 调整大小后重新排序 div

Question

我希望我的 div 如此，同时能够为运动使用过渡(例如，如果单击 div2):

来自

[div1][div2]

[div3][div4]

-

到

[---div2----]

[div1][div3]

[div4]

到目前为止，问题在我附加的 codepen 中很明显。

用我的 div 实现这一点的最佳方法是什么:

HTML

<div class="container">
 <div id="cell1" class="cell" onclick="clickFunction(this)"></div>
 <div id="cell2" class="cell" onclick="clickFunction(this)"></div>
 <div id="cell3" class="cell" onclick="clickFunction(this)"></div>
 <div id="cell4" class="cell" onclick="clickFunction(this)"></div>
 <div id="cell5" class="cell" onclick="clickFunction(this)"></div>
 <div id="cell6" class="cell" onclick="clickFunction(this)"></div>
</div>

CSS

.container{
width:300px;
}
.cell{
width:100px;
height:100px;
border:solid black 1px;
display:inline-block;
transition:background-color 1s;
}
.cell:hover{
background-color: blue;
}
.click {
background-color: green;
width:200px;
height:200px;
}

Javascript

var clickFunction = function(elem){

        if(elem.classList.contains("click")){
            elem.classList.remove("click")
        }
        else{
            var elements = document.getElementsByClassName("cell");

            for(var i = 0; i<elements.length; i++){

            if(elements[i].classList.contains("click")){
                elements[i].classList.remove("click");

            }
            }
            elem.classList.add("click");
        }
    }

代码笔

So far

Answer 1

查看下面的代码。我用的是 flex 。

var clickFunction = function(elem){

        if(elem.classList.contains("click")){
            elem.classList.remove("click")
        }
        else{
            var elements = document.getElementsByClassName("cell");

            for(var i = 0; i<elements.length; i++){

            if(elements[i].classList.contains("click")){
                elements[i].classList.remove("click");

            }
            }
            elem.classList.add("click");
        }
    }

.container{
  width:300px;
  display: flex;
  flex-wrap: wrap;
}
.cell{
  width:100px;
  height:100px;
  border:solid black 1px;
  display:inline-block;
  transition:background-color 1s;
  order: 2;
  
}
.cell:hover{
  background-color: blue;
}
.click {
  background-color: green;
  width:200px;
  order: 1;
}

<div class="container">
  <img class="cell" src="http://www.placehold.it/300x300?text=Cell 1" onclick="clickFunction(this)">
  <img class="cell" src="http://www.placehold.it/300x300?text=Cell 2" onclick="clickFunction(this)">
  <img class="cell" src="http://www.placehold.it/300x300?text=Cell 3" onclick="clickFunction(this)">
  <img class="cell" src="http://www.placehold.it/300x300?text=Cell 4" onclick="clickFunction(this)">
</div>