How to automatically move element in available vertical space?

问题

I have elements on a web page. For tablet breakpoints, the content will go 50% width and break up into two columns. However, sometimes depending on the content, there are times when there are blank spaces that show up on the page. Is there a way to place the elements into optimal positioning so that it takes up the available vertical space? I do not have control of the markup. Please note: I don't have control of the content. I just used random heights in this example, but they could be anything.

I am looking for a solution that uses CSS or JS (jQuery).

Any help would be greatly appreciated!

Here's sample code: http://jsfiddle.net/a8ar7eyx/

In the above example, I would like the green box to move up so that there isn't any white space.

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>

回答1:

I suggest to use Masonry

Your html structure should be

<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>

After include the Masonry .js file in your site. Initialize with jQuery

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

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

来源：https://stackoverflow.com/questions/33794118/how-to-automatically-move-element-in-available-vertical-space

标签

jquery

html

css