2

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

[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 数量的盒子。如果我要删除一个，我希望它们滑动到所需的位置。

4

1 回答 1

0

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

激活容器元素上的插件；

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

并在删除框时执行重新布局，方法是调用

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

在这里提琴

于 2013-01-12T11:48:07.533 回答