Как распределить текстовку по 3 блокам?

[Novozar]

Помогите найти путь решения.
Есть большой кусок сплошного текста, его необходимо разбить на три блока, высота блоков должна быть постоянной. Текст без разметок, вариант с разметками в тексте не подходит, так как надо будет использовать разные тексты разной длины и шрифтов, но при этом блоки должны основаться постоянной высоты и ширины.
Пример как должно быть на рисунке.
http://www.imagepost.ru/?v=1rw_16.JPG
Я мало что понимаю в javascript, натолкните в каком направлении рыть или может есть готовое решение?

Спасибо.

[DjDiablo]

CSS3 могёт

.text_demoBlock {
padding-bottom:20px; /*отступ снизу*/
width:100%; /*указываем общую ширину блока с колонками*/
text-align:justify; /*выравнивание текста внутри колонок*/
column-count: 3; /*количество колонок, на которое хотим разбить текст*/
-moz-column-count: 3; /*для мозилы*/
-webkit-column-count: 3; /*для webkit браузеров*/
сolumn-gap: 40px; /*отступ между колонками*/
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-rule: 1px solid #000; /*если требуется по дизайну, разделяем колонки линией*/
-moz-column-rule: 1px solid #000;
-webkit-column-rule: 1px solid #000;
}

jQuery
http://welcome.totheinter.net/columnizer-jquery-plugin/

[Novozar]

DjDiablo, к сожалению этот вариант не подходит. Я уже это пробовал. Дело в том что в этом варианте текст делится на ровные 3 части и соответственно высота блоков всегда разная в зависимости от размера текста. Мне же необходимо что бы высота и ширина блоков всегда оставалась постоянной 200*300 каждый блок. Если остается место после заполнение то оно должно быть пустым, как на рисунке. http://www.imagepost.ru/?v=1rw_16.JPG

[DjDiablo]

Попробуйте взять алгоритм из плагина за основу.
Я бегло просмотрел код. Они копируют элементы в контейнер пока у него непоявится скроллинг, потом начинают копирывать в другой контейнер. Вся хитрость в том как распорядится последним элементом который невлез в контейнер.
Дальше вникайте сами.

[Novozar]

Спасибо. А не подскажите как программно узнать высоту этих блоков?

[DjDiablo]

вот один из фрагмент кода.

while($parentColumn.height() < height && oText.length){
     //пока высота колумна меньше максимальной продолжаем копирывание 
}

[Раед]

А не подскажите как программно узнать высоту этих блоков?

element.offsetHeight

[Novozar]

Вроде получилось. Хотел уже танцы с бубном устраивать, высчитывая строки и добавляя <br> оказалось всё гораздо проще. Достаточно было к коду который предложил DjDiablo добавьте в стил height:300px; и всё стало ровно и красиво. Вот : http://www.imagepost.ru/?v=1bf_19.JPG.

Ещё бы узнать сколько пустых колонок осталось после заполнения текстом, есть способ?

[DjDiablo]

Пример, если все колумны емеют класс collumn

var pusto=0;
$('.column').each(function(){
       if ($(this).html()=="") pusto++;
});
alert("пустые "+pusto+ " колонок");