CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mohsen
Mohsen

Reputation: 55

How to get different height html divs to float up 2

according to this question

i want div to be float up not just fix dynamic height! enter image description here

jquery masonry use float left and right but i want it look like newspaper columns!

any idea?

its my 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>`

and js is:

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

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

and it's final result: enter image description here

Upvotes: 1

Views: 351

Answers (2)

AlexG
AlexG

Reputation: 5919

You could work with display: flex; note that older browsers do not support this completly

<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

Upvotes: 3

TheOnlyError
TheOnlyError

Reputation: 1451

You could calculate the heights using jQuery, and then set the appropriate margins: https://jsfiddle.net/6u8jypmr/1/

It works for a dynamic width and height.

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

Upvotes: 0

Related Questions