CSS / Javascript: динамические несколько столбцов

Question

Мне нужно создать динамическое представление с несколькими столбцами для содержимого моего веб-сайта (я использую drupal в качестве CMS, если это может быть полезно) со следующими функциями

1) фиксированная ширина столбцов (ОК)

2) количество столбцов зависит от ширины окна (ОК)

3) элементы не имеют фиксированной высоты (важно, еще не зафиксировано)

4) контент должен быть, возможно, распределен по вертикали (не знаю, как это сделать, так как я использую атрибут css float: left)

Смотрите этот скриншот, чтобы лучше понять: http://dl.dropbox.com/u/72686/grid.png

спасибо

Answer 1

Взгляните на jQuery Masonry , отличный плагин.

Answer 2

Ну, я попробую немного скинуться.
на следующем веб-сайте: http://www.quirksmode.org/dom/w3c_cssom.html использовался для размещения следующего кода [хотя, я думаю, они его сняли = /, но он хорошо работает, и я использовал его почти во всех моих проектах]

function getClientWidth()
{ 
    if( typeof( window.innerWidth ) == 'number' ) {
        return window.innerWidth;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        return document.documentElement.clientWidth;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        return myWidth = document.body.clientWidth;
    }
}
function getClientHeight()
{  
    if( typeof( window.innerWidth ) == 'number' ) {
        return window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        return document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        return document.body.clientHeight;
    }
}

Обратите внимание, что получение внутренней ширины браузера [размер окна без учета хрома] отличается для многих браузеров, как вы можете видеть в коде.

Вы должны выполнить это, выполнив переключатель if / для форматирования вашей страницы в зависимости от того, что вы хотите сделать [positoin стиля css = absolute, left, top,] ограничит ширину / высоту, или вы получите результат acid3 когда он работает на IE =) [кто-нибудь получил эту шутку? хех?]

Обратите внимание, что если вы используете мой метод, IE не любит вас и er ... divs [ваши столбцы] имеют тенденцию перекрываться. К сожалению, самый безопасный способ сделать что-либо в вашей ситуации - использовать стол. Однако большинству «современных» веб-разработчиков не нравится таблица для размещения вашего сайта [на самом деле, некоторые считают, что это устарело]

Answer 3

Я решил с этим замечательным плагином jquery: http://welcome.totheinter.net/columnizer-jquery-plugin/