javascript - 使用删除后滑动元素

Question

假设我在屏幕上平铺了一堆盒子:

[1] [2] [3]
[4] [5] [6]
[7] [8] [9]

每个盒子代表一个div。如果我要在其中一个 div 上使用 jquery 的 .remove()，我该如何制作滑动后出现的框？

例如，如果我删除了 box 5，我希望 box 6 滑动到 box 5 的位置， box 7 向上滑动到box 6 的位置，依此类推。

目前，当我移除一个盒子时，盒子会立即移动到所需的位置。我在它们上尝试了 css3 过渡属性，但由于某种原因它不起作用。

JS:

$(this).parent().parent().parent().remove(); //this will remove the desired box

CSS:

.left-col-box {
  position: relative;
  float: left;
  width: 218px;
  height: 218px;
  margin-left: 20px;
  margin-top: 20px;

 -webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}

HTML:

<div class="left-col-box">
  <div class="left-col-box-header">
    <?php echo $rows[1]; ?>
  </div>
  <img src="includes/thumber.php?file=../img/<?php echo $rows2[0]. '.'.$rows2[1];?>&width=217&height=217" />
</div>

请原谅 php.ini谢谢!基本上 HTML 和 CSS 构成了一个盒子。我使用 php 生成 x 个盒子。如果我要删除一个，我希望它们滑动到所需的位置。

Answer 1

你可以使用插件吗？如果是这样，您可以使用 jquery isotape 轻松完成此操作.

激活容器元素上的插件；

$('.parent').isotope({
  itemSelector : '.x'
});

并在删除框时通过调用

进行重新布局

$('.parent').isotope( 'reLayout');

Fiddle here