Masonry Layout In Css3?

Question

I try to use the following structure to generate the layout described below.

child 1

Solution 2:

Flexbox cannot be used to recreate the Masonry layout. Period.

Flexbox is for controlling how elements flow along either a horizontal row (flex-direction: row, which is the default) or vertical column (flex-direction: column). That means you can only eliminate excess space in one direction: left/right (row) or top/bottom (column). Because flex-direction: column requires an explicit height to enable wrapping, it is entirely unsuitable for this purpose.

The CSS Multi-column Layout Module is the closest you can get to recreating a Masonry layout using pure CSS, but it still only allows you to eliminate excess space between the elements in one direction: vertically. The key difference between this and Flexbox (using the column direction) is that the Multi-Column module does not require an explicit height and will distribute the contents equally between each of the columns as best it can (this can be controlled via the column-fill property). The gap between the columns is controlled by the column-gap property.

http://codepen.io/cimmanon/pen/CcGlE

.my-element {
  -moz-columns: 15em;
  -webkit-columns: 15em;
  columns: 15em;
}

Solution 3:

If there are only two columns, why not just use floats, alternating left and right floating/clearing for odd and even boxes?

.container {
    background-color: yellow;
    overflow: hidden;
    width: 100%;
}
.box {
    height: 100px;
    width: 50%;
}
.box:nth-child(odd) {
    float:left;
    clear: left;
}
.box:nth-child(even) {
    float:right;
    clear: right;
}
.box1 {
    background-color: lime;
}
.box2 {
    background-color: blue;
    height: 120px;
}
.box3 {
    background-color: red;
    height: 140px;
}
.box4 {
    background-color: green;
}

<divclass="container"><divclass="box box1">child 1</div><divclass="box box2">child 2</div><divclass="box box3">child 3</div><divclass="box box4">child 4</div></div>

Solution 4:

.flexbox {
    background-color: yellow;    
    width: 100%;
    height: 300px;
}
.box {
    float:left;
    position:realtive;    
    height: 100px;
    width:50%;
}

try adding and removing children !!

http://jsfiddle.net/prollygeek/8hHDg/5/

Solution 5:

For boxes of the same size:

If you're using flexbox, you'll want to use flex-direction: row; and flex-wrap: wrap;

I forked your JSFiddle. All flex-box properties I added are prefixed with -webkit- only

References:

For boxes of multiple sizes:

You'll need a 'masonry' layout. This article should help you with this issue. The last section is entitled 'Pure CSS'; if you want to avoid JavaScript plugins, that should be what you want.

Unfortunately, pure CSS is only able to make top-to-bottom left-to-right layouts. For left-to-right top-to-bottom layouts, you'll need JavaScript. Check out the jQuery suggestions in the article above.

If you want to do this with pure JavaScript (without jQuery), check out this masonry library.

Answer 1

Copy

http://jsfiddle.net/prollygeek/QD9kZ/

while this second fiddle , will balance the two sides based on elements heights so that there is no big deviation in the columns heights all the time , use any script of them it is up to you.

side1=0,side2=0
$(".flexbox").children().each(function(index, element) {
if(side1<=side2)
{
$(this).css("top",side1+"px") 
side1+=parseInt($(this).css("height"))
}
elseif(side2<side1)
{
$(this).css("top",side2+"px")
$(this).css("left","50%") 
side2+=parseInt($(this).css("height"))
}

});

http://jsfiddle.net/prollygeek/hP6fS/

Html5 Academy