如何根据高度和周围环境调整浮动div？

Question

免责声明：以下代码使用JS {sortables的rubuxa插件。

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/

问题在于拖动红色方块时，它们会正确移动，但它们不会垂直叠放在彼此顶部而是水平放置。这会在下面创建不必要的额外空白区域。我试图为所有div设置相同的高度，但没有运气。

Answer 1

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

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

要完成此行为，您需要某种方式的javascript来计算绝对定位。 图书馆http://packery.metafizzy.co/为此做得很好。它使用'jQuery UI draggable'或'Draggabilly'，它使用绝对定位。

缺点是，我认为Rubaxa的Sortable无法实现这一目标......