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

Question

我在网页上有元素。对于平板电脑断点，内容将达到50％宽度并分为两列。但是，有时根据内容，有时会在页面上显示空白。有没有办法将元素置于最佳位置，以便占用可用的垂直空间？我无法控制标记。 请注意：我无法控制内容。我在这个例子中使用了随机高度，但它们可以是任何东西。

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

非常感谢任何帮助！

以下是示例代码： http://jsfiddle.net/a8ar7eyx/

在上面的示例中，我希望绿色框向上移动，以便没有任何空白区域。

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>

Answer 1

我建议使用Masonry

你的html结构应该是

<div class="container"> <div class="row"> <div class="col" style="height: 900px; background-color: blue;"></div> <div class="col" style="height: 500px; background-color: red;"></div> <div class="col" style="height: 200px; background-color: orange;"></div> <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>

在您的网站中加入Masonry .js文件后。用jQuery初始化

$(document).ready(function(){ $('.row').masonry({ // options itemSelector: '.col', columnWidth: '.col' }); });

https://jsfiddle.net/a8ar7eyx/2/