Я бы хотел сделать в сортировке, чтобы поплавки разной высоты уходили друг под друга.
Вот мой код
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
EDIT
Пожалуйста, обратите внимание, что будет гораздо больше блоков, а не только 4 или 5, поэтому мне нужны CSS-решения, которые каждый раз, когда я вызываю этот класс, будут его пестрить.
РЕДАКТИРОВАТЬ 2
Хорошо, теперь, используя Masonry.js, я хочу, чтобы они так много места занимали друг над другом. Посмотрите изображение. Мне нужно, чтобы они были намного ближе друг к другу, как они показывают на своем сайте.
Я использую эту функцию
$('#equipe').masonry({
itemSelector: '.equipeBox'
});