3列显示中的叠瓦浮子

Question

我想把不同高度的浮子按顺序排列在一起。

这是我的密码

CSS

#page .equipeBox{
    float:left;
    width:280px;
    padding:10px;
    margin:10px;
    background:#fff;
}

HTML

<div id="page">
  <div style="font-size:40px">****</div>
  <hr />
  <div>
    <div class="equipeBox">Box 1<br>Bresaola corned beef pork shoulder, tri-tip drumstick venison short loin t-bone pastrami turkey swine strip steak biltong. Brisket andouille ham shankle. Strip steak tail spare ribs boudin pork chop, rump beef. Ground round fatback brisket, shoulder corned beef short loin ball tip shank. Turkey sirloin salami beef ribs ribeye. Meatloaf beef ribs chuck, ribeye tail shankle pork chop drumstick rump pork loin sausage bresaola. Bresaola venison pork chop, turkey chuck ham boudin beef drumstick.</div>
    <div class="equipeBox">Box 2<br>Bresaola corned beef pork shoulder, tri-tip drumstick venison short loin t-bone pastrami turkey swine strip steak biltong. Brisket andouille ham shankle. Strip steak tail spare ribs boudin pork chop, rump beef. Ground round fatback brisket, shoulder corned beef short loin ball tip shank. Turkey sirloin salami beef ribs ribeye. Meatloaf beef ribs chuck, ribeye tail shankle pork chop drumstick rump pork loin sausage bresaola. Bresaola venison pork chop, turkey chuck ham boudin beef drumstick.

Turkey jowl tri-tip pig, ribeye meatball pancetta. Cow bresaola fatback, andouille shankle ham hock jerky bacon. Pork chop fatback pastrami corned beef. Shankle rump ground round brisket, andouille venison ball tip swine pork corned beef pig pork loin bacon tongue pancetta. Hamburger sausage pastrami, strip steak chicken drumstick ham beef ribs corned beef swine. Bresaola fatback pork, swine sirloin t-bone bacon meatloaf turkey jerky. Venison salami beef ribs, fatback tail spare ribs sirloin pork tri-tip short loin swine cow.</div>
    <div class="equipeBox">Box 3<br>andouille shankle ham hock jerky bacon. Pork chop fatback pastrami corned beef. Shankle rump ground round brisket, andouille venison ball tip swine pork corned beef pig pork loin bacon tongue pancetta. Hamburger sausage pastrami, strip steak chicken drumstick ham beef ribs corned beef swine. Bresaola fatback pork, swine sirloin t-bone bacon meatloaf turkey jerky. Venison salami beef ribs, fatback tail spare ribs sirloin pork tri-tip short loin swine cow.</div>
    <div class="equipeBox">Box 4<br>Bresaola corned beef pork shoulder, tri-tip drumstick venison short loin t-bone pastrami turkey swine strip steak biltong. Brisket andouille ham shankle. Strip steak tail spare ribs boudin pork chop, rump beef. Ground round fatback brisket, shoulder corned beef short loin ball tip shank. Turkey sirloin salami beef ribs ribeye. Meatloaf beef ribs chuck, ribeye tail shankle pork chop drumstick rump pork loin sausage bresaola. Bresaola venison pork chop, turkey chuck ham boudin beef drumstick.

Turkey jowl tri-tip pig, ribeye meatball pancetta. Cow bresaola fatback, andouille shankle ham hock jerky bacon. Pork chop fatback pastrami corned beef. Shankle rump ground round brisket, andouille venison ball tip swine pork corned beef pig pork loin bacon tongue pancetta. Hamburger sausage pastrami, strip steak chicken drumstick ham beef ribs corned beef swine. Bresaola fatback pork, swine sirloin t-bone bacon meatloaf turkey jerky. Venison salami beef ribs, fatback tail spare ribs sirloin pork tri-tip short loin swine cow.

Swine beef ribs shank short ribs, sausage biltong t-bone venison. Short loin shank salami beef ribs. T-bone ball tip swine, meatloaf corned beef pork chop shankle shoulder tail short ribs bacon andouille jerky flank turkey. Andouille ball tip bresaola boudin beef ribs ground round. T-bone bresaola pastrami cow jowl meatball. Corned beef tongue t-bone, meatball chicken beef ribs flank biltong. Spare ribs pig short loin meatloaf, tri-tip jowl beef.</div>
    <div class="clear"></div>
  </div>
</div>

这给

​

​

那么，是否有可能“方框4”在框1下，填充左边的空格，如果有框5，在方框2下，等等.？就像俄罗斯方块:D

编辑

请注意，会有更多的框，而不仅仅是4或5，所以我需要一个CSS的解决方案，每次我呼吁的类，它会堆叠它。

编辑2 Ok现在使用Masonry.js，这是他们的方式，我想为什么他们的位置上有这么大的空间在对方之上。看这张照片。我需要他们更接近彼此，就像他们在他们的网站上展示的那样。

我在使用这个函数

$('#equipe').masonry({
    itemSelector: '.equipeBox'
  });

Answer 1

请查看Masonary.js或本教程这里。

Answer 2

尝试将方框3向右浮动，其余框向左浮动，或将方框1和4放入包装器中。

Answer 3

根据俄罗斯方块规则，这个布局实际上是最好的，因为方框3没有方框1高.