javascript - 如何在javascript和html中创建堆叠和重新排列div的效果？

Question

假设我有一个带有两个按钮的 div，用于添加框和删除框:

<div id="container" height=500 width=300>
</div>
<button>Add</button>
<button>Remove</button>

单击“添加”将向宽度为“200”、高度为“200”且带有字母“X”的容器“添加”一个 div。再次点击“添加”将在其正上方添加一个相同大小的框。

点击一个 div 上的任何“X”都会导致该 div 消失，它下面的其他 div 会向上滑动以填充它的空间。

点击移除将移除顶部框并导致下方的任何其他 div 向上滑动以占用其空间。

如何在Javascript中实现这种效果？

Answer 1

jQuery 的 slideToggle effect 可用于隐藏一个 div 并将其他 div 滑动到一起

要获得更高级的库，请查看 Isotope