javascript - 如何根据高度和周围环境调整 float 的 div？

Question

免责声明:以下代码使用了 rubuxa JS 可排序插件。

Javascript:

function qs(expr){return document.querySelector(expr)}
var container = qs('.ITEST');
var sort = Sortable.create(container, {
  animation: 350,
  draggable: ".draggable", 
});

CSS:

 .draggable{
    color: #fff;
    margin: 1px;
    float: left;
    display: inline-block; 
}
.ITEST{
    width:425px;
    height:400px;
    margin:auto;
    border:1px solid grey
}

http://jsfiddle.net/g8o0upLq/9/

问题在于拖动红色方 block 时，它们可以正确移动，但它们不会垂直堆叠在一起，而是水平堆叠。这会在下方创建不需要的额外空白。我试图为所有 div 设置相同的高度，但没有成功。

Answer 1

我刚刚通过 Rubaxa 的 Github 看到了您的帖子。

无论如何，您无法使用纯 CSS 实现此目的。即使使用 Flexbox，我也想不出一种方法可以做到这一点。

要实现此行为，您需要一些 javascript 方法来计算绝对定位。图书馆http://packery.metafizzy.co/为此做得很好。它使用“jQuery UI draggable”或“Draggabilly”，后者使用绝对定位。

不利的一面是，我认为没有办法通过 Rubaxa 的 Sortable 实现这一点......