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。谢谢！基本上HTML和CSS就是一个盒子。我用php生成x个盒子。如果我要删除一个，我希望他们滑动到他们想要的位置。

Answer 1

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

激活容器元素上的插件;

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

并在删除框时通过调用

执行重新布局

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

Fiddle here

使用删除后滑动元素

1 个答案: