javascript - 有没有办法让 div 从展开的 div 左右浮动？

Question

我正在构建一个网站，该网站显示许多 div float 在彼此的旁边和下方。单击 div 时，div 会展开并显示其内容。

我想要做的是让所有其他 div 围绕展开的 div float ，但现在它们只会 float 在右侧(因为一行中的一个对象被展开并将其余部分推向右侧和下方).

有没有办法通过 css 或 javascript 解决这个问题？

我实现了 float:left 和 display:inline-block，但是这些函数显然不能理解移动到展开的 div 的左边。不同的职位也不起作用，我该怎么做才能解决/完成这个问题？

$('.toggle-cells-one').click(function() {
  var toggleHeight = $(this).height() == 80 ? "181px" : "80px";
  $(this).animate({
    height: toggleHeight
  });
});

$('.toggle-cells-two').click(function() {
  var toggleHeight = $(this).height() == 80 ? "282px" : "80px";
  $(this).animate({
    height: toggleHeight
  });
});

$(".alg").on("click", function() {
  $(".alg-sub").toggle();
});
$(".cam").on("click", function() {
  $(".cam-sub").toggle();
});
$(".con").on("click", function() {
  $(".con-sub").toggle();
});
$(".dji").on("click", function() {
  $(".dji-sub").toggle();
});
$(".eth").on("click", function() {
  $(".eth-sub").toggle();
});

.country-wrap {
  position: relative;
  display: inline-block;
  float: left;
  width: 90px;
  height: 80px;
  margin: -1px -1px 0 0;
  padding: 10px;
  cursor: pointer;
  border: 1px solid black;
  text-align: center;
  vertical-align: top;
  font-size: 18px;
}


/*.country-wrap:hover {
  width: 201px;
}*/

.country-content {
  display: none;
  margin-top: 15px;
}

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<div class="countries">
  <div class="country-wrap toggle-cells-one alg">
    <img src="image0100.svg"><br> ALG
    <div class="country-content alg-sub">
      <img src="image0101.svg"><br> KAB
    </div>
  </div>
  <div class="country-wrap toggle-cells-one cam">
    <img src="image0200.svg"><br> ALG
    <div class="country-content cam-sub">
      <img src="image0201.svg"><br> KAB
    </div>
  </div>
  <div class="country-wrap toggle-cells-one con">
    <img src="image0300.svg"><br> ALG
    <div class="country-content con-sub">
      <img src="image0301.svg"><br> KAB
    </div>
  </div>
  <div class="country-wrap toggle-cells-one dji">
    <img src="image0400.svg"><br> ALG
    <div class="country-content dji-sub">
      <img src="image0401.svg"><br> KAB
    </div>
  </div>
  <div class="country-wrap toggle-cells-one eth">
    <img src="image0500.svg"><br> ALG
    <div class="country-content eth-sub">
      <img src="image0501.svg"><br> KAB
    </div>
  </div>
</div>

Answer 1

看看masonry :

$('.toggle-cells-one').click(function() {
  var toggleHeight = $(this).height() == 80 ? "181px" : "80px";
  $(this).animate({
    height: toggleHeight
  }, 400, 'swing', function() {
    // when the animation ends, trigger layout re-calculation
    $('.countries').masonry('layout');
  });
});

$('.toggle-cells-two').click(function() {
  var toggleHeight = $(this).height() == 80 ? "282px" : "80px";
  $(this).animate({
    height: toggleHeight
  });
});

$(".alg").on("click", function() {
  $(".alg-sub").toggle();
});
$(".cam").on("click", function() {
  $(".cam-sub").toggle();
});
$(".con").on("click", function() {
  $(".con-sub").toggle();
});
$(".dji").on("click", function() {
  $(".dji-sub").toggle();
});
$(".eth").on("click", function() {
  $(".eth-sub").toggle();
});

// create the masonry layout
$('.countries').masonry({
  itemSelector: 'div.country-wrap'
});

.country-wrap {
  position: relative;
  display: inline-block;
  float: left;
  width: 90px;
  height: 80px;
  margin: -1px -1px 0 0;
  padding: 10px;
  cursor: pointer;
  border: 1px solid black;
  text-align: center;
  vertical-align: top;
  font-size: 18px;
}


/*.country-wrap:hover {
  width: 201px;
}*/

.country-content {
  display: none;
  margin-top: 15px;
}

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<div class="countries">
  <div class="country-wrap toggle-cells-one alg">
    <img src="image0100.svg"><br> ALG
    <div class="country-content alg-sub">
      <img src="image0101.svg"><br> KAB
    </div>
  </div>
  <div class="country-wrap toggle-cells-one cam">
    <img src="image0200.svg"><br> ALG
    <div class="country-content cam-sub">
      <img src="image0201.svg"><br> KAB
    </div>
  </div>
  <div class="country-wrap toggle-cells-one con">
    <img src="image0300.svg"><br> ALG
    <div class="country-content con-sub">
      <img src="image0301.svg"><br> KAB
    </div>
  </div>
  <div class="country-wrap toggle-cells-one dji">
    <img src="image0400.svg"><br> ALG
    <div class="country-content dji-sub">
      <img src="image0401.svg"><br> KAB
    </div>
  </div>
  <div class="country-wrap toggle-cells-one eth">
    <img src="image0500.svg"><br> ALG
    <div class="country-content eth-sub">
      <img src="image0501.svg"><br> KAB
    </div>
  </div>
</div>