javascript - 如何让不同高度的html div float 起来2

Question

根据 this question

我希望 div float 起来，而不仅仅是固定动态高度!

jquery masonry 使用左右浮动，但我希望它看起来像报纸专栏!

有什么想法吗？

这是我的 html:

`<div class="paper">
   <div class="ticket" style="height: 116px;background-color: rgb(121,89,118);">1</div>
   <div class="ticket" style="height: 75px;background-color: rgb(121,89,118);">2</div>
   ....
</div>`

而 js 是:

var $grid = $('.paper').masonry({
    // options
    itemSelector: '.ticket',
    columnWidth: '.ticket',
    percentPosition: true,
    isOriginLeft: false
});

$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
});

最后的结果是:

Answer 1

您可以使用 display: flex; 请注意，旧版浏览器不完全支持此功能

<div class="box">
    <div class="stuff" style="background-color: cyan; height: 100px;">1</div>
    <div class="stuff" style="background-color: red; height: 200px;">2</div>
    <div class="stuff" style="background-color: lime; height: 150px;">3</div>
    <div class="stuff" style="background-color: orange; height: 50px;">4</div>
    <div class="stuff" style="background-color: yellow; height: 300px;">5</div>  
    <div class="stuff" style="background-color: pink; height: 200px;">6</div>        
</div>

.box{
    display: flex;
    flex-flow: column wrap;
    width: 220px;
    height: 600px;
}

---

.stuff{
    width: 100px;
    margin: 4px;
}

Fiddle