如何获得不同的高度html divs浮动2

Question

根据this question

我想让div浮起来而不仅仅是修复动态高度！

jquery砌筑使用左右浮动，但我希望它看起来像报纸栏！

任何想法？

是我的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

Answer 2

您可以使用jQuery计算高度，然后设置适当的边距：https://jsfiddle.net/6u8jypmr/1/

它适用于动态宽度和高度。

var heightdiv1 = $("#div1").css("height");
var heightdiv2 = $("#div2").css("height");
var margindiv2 = parseInt(heightdiv1) + parseInt(8);
var margindiv3 = parseInt(margindiv2) + parseInt(heightdiv2) + parseInt(8);

var heightdiv4 = $("#div4").css("height");
var heightdiv5 = $("#div5").css("height");
var margindiv5 = parseInt(heightdiv4) + parseInt(8);
var margindiv6 = parseInt(margindiv5) + parseInt(heightdiv5) + parseInt(8);

var widthdiv = $("#div1").css("width");
var marginleftdiv = parseInt(widthdiv) + parseInt(8);

$("#div2").css("margin-top", margindiv2);
$("#div3").css("margin-top", margindiv3);
$("#div5").css("margin-top", margindiv5);
$("#div6").css("margin-top", margindiv6);

$("#div4").css("margin-left", marginleftdiv);
$("#div5").css("margin-left", marginleftdiv);
$("#div6").css("margin-left", marginleftdiv);