CSS3中的砖石布局？ [英] Masonry Layout in CSS3?

问题描述

我尝试使用以下结构生成以下布局。

 < div class =flexbox ; 
< div class =box box1>子1< / div> 
< div class =box box2> child 2< / div> 
< div class =box box3> child 3< / div> 
< div class =box box4> child 4< / div> 
< / div> 
  

我举了一个例子，

问题是箱子的顺序错误。他们应该从左到右，从上到下，像这样：

  1 2 3 
 4 5 6 
 7 8 9 
  

有一种方法可以使用css和只有一些javascript？ / p>

解决方案

这是一个新的答案，希望它解决你的问题，下面两个Fiddles，处理这个问题，所有奇数孩子在左侧，甚至所有偶数孩子在右侧

  side1 = 0，side2 = 0 
 
 $（。flexbox）。children（）。each（function（index，element）{
 if（index％2 === 0）// odd children（starts from 0）
 {
 $（this）.css（top，side1 +px）
 side1 + = parseInt（$（this）.css（height））
} 
 else //偶数个子
 {
 $（this）.css（top，side2 +px）
 $（this）.css（left，50 ％）
 side2 + = parseInt（$（this）.css（height））
} 
} 
  

http： //jsfiddle.net/prollygeek/QD9kZ/

而这第二个小提琴，将根据元素的高度平衡两边，使没有大的偏差

  side1 = 0，side2 = 0 
 $（。flexbox）。children（）。each（function（index，element）{
 if（side1< = side2）
 {
 $（this）。 css（top，side1 +px）
 side1 + = parseInt（$（this）.css（height））
} 
 else if（side2< side1）
 {
 $（this）.css（top，side2 +px）
 $（this）.css（left，50％）
 side2 + = parseInt $（this）.css（height））
} 
 
}）; 
  

http： //jsfiddle.net/prollygeek/hP6fS/

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

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

I made an example for that here.

The layout should be as follows:

• if there is only one box inside the flexbox it should have 50% of the width inside the flexbox (see following figure)

• if there are two boxes they both should take 50% of the space inside the flexbox

• if there are three boxes, each box should take 50% of the space, while the first two boxes are in row 1 and the third box appears in row 2

How can I achieve this kind of layout with css?

Edit: The boxes might not have the same height. This means they should fill the remaining space vertically. The width is always the same. See the following image for an example.

Edit: I found a way to make masonry with pure css see here: http://jsfiddle.net/confile/aGXzU/

The problem is that the boxes are in the wrong order. They should be from left to right and from top to bottom like this:

1 2 3
4 5 6 
7 8 9

Is there a way to get this with css and only little javascript?

解决方案

Here is a new answer and hope it solves your problem , following two Fiddles , to handle this issue , the first script will throw all odd children in the left side , and all even children on the right side

side1=0,side2=0

$(".flexbox").children().each(function(index, element) {
    if (index % 2 === 0) //odd children (starts with 0 )
    {
$(this).css("top",side1+"px") 
side1+=parseInt($(this).css("height"))
    }
else //even children
    {
$(this).css("top",side2+"px")
$(this).css("left","50%") 
side2+=parseInt($(this).css("height"))
    }   
});

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"))
}
else if(side2<side1)
{
$(this).css("top",side2+"px")
$(this).css("left","50%") 
side2+=parseInt($(this).css("height"))
}

});

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

这篇关于CSS3中的砖石布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！