1

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

Community
  • 1
  • 1
Mohsen
  • 55
  • 7
  • any and all plugins/CSS will use float left/right. There is no "float up". You have to put each "column" in it's own container. what's your HTML that you're using w/ masonry? – Rob Scott Jun 16 '15 at 12:55
  • http://isotope.metafizzy.co/layout-modes/masonry.html – Jeremy C. Jun 16 '15 at 12:55
  • there is simple HTML : `
    ` and inner divs "item" have dynamic count and dynamic height     – Mohsen Jun 16 '15 at 13:02

2 Answers2

3

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

AlexG
  • 5,649
  • 6
  • 26
  • 43
0

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);
TheOnlyError
  • 1,441
  • 12
  • 19