Jquery 如何在可用的垂直空间中自动移动图元？

我在网页上有元素。对于tablet断点，内容将变为50%宽度，并分成两列。但是，有时根据内容的不同，页面上有时会出现空白。是否有方法将元素放置在最佳位置，以占用可用的垂直空间？我无法控制标记请注意：我无法控制内容。在本例中，我只是使用了随机高度，但它们可以是任何高度。

我正在寻找一个使用CSS或JS（jQuery）的解决方案

任何帮助都将不胜感激

下面是示例代码：

在上面的例子中，我希望绿色框向上移动，这样就不会有任何空白

CSS:
.container{宽度：100%；}
col{
浮动：左；
宽度：50%；
框大小：边框框；
边框：0实心rgba（0,0,0,0）；
左边框宽度：18px；
背景剪辑：填充框；
}
HTML:

我建议使用

您的html结构应该是

之后，请在您的站点中包含massy.js文件。使用jQuery初始化

$（文档）.ready（函数（）{
$（'.row'）。砌体({
//选择权
itemSelector:“.col”，
列宽度：'.col'
});
});

我建议使用

您的html结构应该是



之后，请在您的站点中包含massy.js文件。使用jQuery初始化

$（文档）.ready（函数（）{
$（'.row'）。砌体({
//选择权
itemSelector:“.col”，
列宽度：'.col'
});
});

我一直在用砖石做实验。不过，我只希望它在某些断点处生效。我遇到的最大问题是，一旦这个脚本被执行，我就无法“卸载”它。如果用户将浏览器调整到一个更大的断点，我就不希望运行massy了。我还是更喜欢massy，我想你应该看看。然后，您可以使用断点使用
$（window）.resize（）
，重新初始化或销毁masonry我一直在试验砌体。不过，我只希望它在某些断点处生效。我遇到的最大问题是，一旦这个脚本被执行，我就无法“卸载”它。如果用户将浏览器调整到一个更大的断点，我就不希望运行massy了。我还是更喜欢massy，我想你应该看看。然后，您可以使用断点使用
$（window）.resize（）
，重新初始化或销毁
CSS:

.container { width: 100%; }
.col { 
    float: left; 
    width: 50%; 
    box-sizing: border-box; 
    border: 0 solid rgba(0,0,0,0);
    border-left-width: 18px;
    background-clip: padding-box;
}

HTML: 

<div class="container">
    <div class="row">
        <div class="col" style="height: 900px; background-color: blue;"></div>
    </div>
    <div class="row">
        <div class="col" style="height: 500px; background-color: red;"></div>
        <div class="col" style="height: 200px; background-color: orange;"></div>
    </div>
    <div class="row">
        <div class="col" style="height: 600px; background-color: yellow;"></div>
        <div class="col" style="height: 300px; background-color: green;"></div>
        <div class="col" style="height: 400px; background-color: purple;"></div>
    </div>
</div>