2013-03-30 14 views
0

Мне нужен Javascript-код для добавления новых DIV в этой следующей модели. Я буду использовать порядок по умолчанию, как float left, эти элементы упорядочиваются горизонтально. Пожалуйста, помогите мнеКак выровнять div, которые имеют разную высоту?

<div id="maincontainer"> 

<div style="height:100px;width:150px; float:left; border:1px solid red; margin:5px;">smallest</div> 
<div style="height:200px;width:150px; float:left; border:1px solid red; margin:5px;">largest</div> 
<div style="height:150px;width:150px; float:left; border:1px solid red; margin:5px;">middle</div> 
<div style="height:100px;width:150px; float:left; border:1px solid red; margin:5px;">middle2</div> 
<div style="height:190px;width:150px; float:left; border:1px solid red; margin:5px;">middle3</div> 
<div style="height:160px;width:150px; float:left; border:1px solid red; margin:5px;">middle4</div> 

</div> 

 

<javascript> 
$('div').sort(function (a, b) { 
    return $(a).height() > $(b).height() ? 1 : -1; 
}).appendTo('body'); 
</javascript> 

выход я получаю

enter image description here

Мне нужно как этот

enter image description here

+0

Если jQuery - это вариант, попробуйте http://masonry.desandro.com/ – Pavlo

ответ

1

Вы можете создать 3 или вам нужны столбцы с фиксированной шириной и положить блоки в этом без плавающего.

Например:

<div id="first_col"> 
    <div class="block"> 
    content 
    </div> 
    <div class="block"> 
    content2 
    </div> 
</div> 

<div id="second_col"> 
    <div class="block"> 
    content 
    </div> 
    <div class="block"> 
    content2 
    </div> 
</div> 

<div id="last_col"> 
    <div class="block"> 
    content 
    </div> 
    <div class="block"> 
    content2 
    </div> 
</div> 

И apped от JS новых блоков в DIV с классом, где высота минимальна.