Сила масонства/аналогично игнорированию потока и заполнению пробелов вместо

Question

Кирпичная кладка/изотоп/Freetile, а остальное отлично справляется с элементами абсолютного позиционирования в сетке/контейнере.

Однако, когда элемент принимает всю ширину сетки/контейнера, он создает массивные промежутки, которые не являются приемлемым результатом.

Вот jsfiddle к моей проблеме: http://jsfiddle.net/QNf3A/1/

Там достаточно места на верхней части красной DIV поместить зеленый. Однако разные библиотеки склонны уважать поток, а не философию «оставить без пробелов».

Кто-нибудь знает об альтернативной js-библиотеке или подобном трюке, чтобы избежать пробелов?

-

код из jsfiddle ...

HTML:

<div id="container"> 
    <div class="block half"></div> 
    <div class="block full"></div> 
    <div class="block half"></div> 
    <div class="block half"></div> 
    <div class="block half"></div> 
</div> 

CSS:

#container{ 
    width: 600px; 
    background-color: #EEE; 
} 
.block{ 
    float: left; 
} 
.half{ 
    width: 300px; 
    height: 100px; 
    background-color: #CFC; 
} 
.full{ 
    width: 600px; 
    height: 100px; 
    background-color: #FCC; 
} 

JS/JQuery:

$(function($) { 

    $('#container').masonry({ 
    itemSelector: '.block', 
    columnWidth: 300 
    }); 

}); 

Answer 1

Я нашел это:
https://github.com/DrewDahlman/Mason

И, кажется, сделать трюк.

Answer 2

Не знаю, является ли этот ответ слишком поздним или нет, но проверьте упаковку. Это тип кладки плагин, который делает именно это:

https://github.com/metafizzy/packery

Answer 3

Лучшим решением 2-мерная упаковка. Идеальная кладка http://www.drewdahlman.com/meusLabs/?p=218 может решить некоторые проблемы, связанные с пробелами.