работа с контентом в jquery

[kuzroman]

Доброго времени суток, подскажите пожалуйста какой нибудь вариант решения или метод, задача в следующем:

Е нас есть блок <div id='тянучка'> он тянущийся
(допустим начальное его значение width:800px;),

в нем лежат <div class='блок'> блоки (например их 10шт
с max-width:200px;
и float:left; )

т.е. что то вроде:

<div id='тянучка'>
<div class='блок'>1</div>
<div class='блок'>2</div>
<div class='блок'>3</div>
<div class='блок'>4</div>
<div class='блок'>5</div>
<div class='блок'>6</div>
<div class='блок'>7</div>
<div class='блок'>8</div>
<div class='блок'>9</div>
<div class='блок'>0</div>
</div>

т.е. сейчас блоки лепятся друг к другу слева и переносятся вниз как только им не хватает места.

Вопрос такой, необходимо, чтобы эти блоки при начальном значении в 800px у id='тянучка' располагались так:
1 4 7 0
2 5 8
3 6 9

т.е. в 4 в столбца,

а при уменьшении до 600 так:

1 5 9
2 6 0
3 7
4 8

думаю логика понятна, соответственно чем меньше, id='тянучка', тем меньше столбцов, чем больше, тем столбцов больше.

Решения я не от кого не прошу(хотя если кто напишет буду вовсе не против), подскажите какими манипуляциями или наборами необходимо аперировать при работе в jqueri с контентом, ведь по сути здесь нужно будет добавлять дивы, а потом их переставлять в другое место.

Заранее спасибо!

[ваый]

Нет, это я ерунду посоветовал. Достаточно просто написать плагинчик который будет переставлять блоки в нужном порядке. Набросал примерную реализацию.

<style>
.parent {
width: 200px;
background-color: #dcdcdc;
border: 1px #deb887 solid;
}
.child {
width: 55px;
display: inline-block;
border: 1px dotted #8fbc8f;
}
</style>
<div class="parent">
<div class="child">1 child</div>
<div class="child">2 child</div>
<div class="child">3 child</div>
<div class="child">4 child</div>
<div class="child">5 child</div>
<div class="child">6 child</div>
<div class="child">7 child</div>
<div class="child">8 child</div>
<div class="child">9 child</div>
<div class="child">10 child</div>
</div>

<button>200px</button>
<button>250px</button>
<button>150px</button>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$.fn.columns = function(options) {
var settings = $.extend({
restoreOrder: false,
empty: '<div style="clear: both;" class="not-child"></div>'
}, options);

return this.each(function() {
var items = Array.prototype.slice.call($(this).children(':not( .not-child)'));

if (settings.restoreOrder) {
var toArray = function(obj) {
var arr = [];
var tmp = [];
var add = [];
var ndx;
if (!obj.constructor.toString().match('Object')) {
return obj;
}
for (ndx in obj) {
if (isNaN(ndx)) {
tmp.push(obj[ndx]);
continue;
}
if (ndx - arr.length > 0) {
add = new Array(ndx - arr.length);
add.push(obj[ndx]);
arr = arr.concat(add);
}
else {
arr[ndx] = obj[ndx];
}
}
for (ndx in tmp) {
arr.push(tmp[ndx]);
}
return arr;
}

var order = $(this).data['order'].split(',');
var obj = {};
for (var i in order) {
obj[order[i]] = items[i];
}
items = toArray(obj);
}

var cols = Math.floor($(this).width() / $(this).find(':first').outerWidth());
var rows = Math.floor($(this).height() / $(this).find(':first').outerHeight());

var size = items.length;
var count = 0;
var order = [];
$(this).empty();

for (var i = 0; i < rows; i++) {
for (var j = 0; j < cols; j++) {
if (count <= size) {
var index = i + rows * j;
var item = items[index];
if (!item) {
item = settings.empty;
}
else {
order.push(index);
}
$(this).append(item);
count++;
}
else {
break;
}
}
}

$(this).data['order'] = order.join(',');
});
};

$('.parent').columns();

$('button').click(function() {
$('.parent').css('width', $(this).text()).columns({restoreOrder: true});
});

</script>

[kuzroman]

Спасибо большое!
Осталось только разобраться во всем этом.
Я то думал что все будет значительно короче.

[kuzroman]

[QUOTE=ваый;119313]Достаточно просто написать плагинчик который будет переставлять блоки в нужном порядке. Набросал примерную реализацию...


Доброго вам времени. С вашим скриптом что то так и не разобрался, по нажатию он работает, а вот когда его креплю на resize то неработает.

В итоге сделал вот что:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!-- Следующие три строки необходимы для определинея плагина Resizable jquery -->
<link type="text/css" href="http://www.trueski.ru/cms2/css/start/jquery.custom.css" rel="stylesheet" />
<script src="http://www.trueski.ru/cms2/script/jqueryMin.js" type="text/javascript"></script>
<script src="http://www.trueski.ru/cms2/script/jquery-ui.custom.min.js" type="text/javascript"></script>
<style>
.parent2{
width:100px;
float:left;
/*border: 1px #f00 solid;*/
}

.child2{
width:100px;
clear: both;
border: 1px #deb887 solid;
}

.content{
width:331px;
border: 5px #f00 solid;
overflow:hidden;
}
</style>
<div class='content' id='content' class="ui-widget-content" >
<div class="child2" id='1'>1 child2</div>
<div class="child2" id='2'>2 child2</div>
<div class="child2" id='3'>3 child2</div>
<div class="child2" id='4'>4 child2</div>
<div class="child2" id='5'>5 child2</div>
<div class="child2" id='6'>6 child2</div>
<div class="child2" id='7'>7 child2</div>
<div class="child2" id='8'>8 child2</div>
<div class="child2" id='9'>9 child2</div>
<div class="child2" id='10'>10 child2</div>
</div>



<script type="text/javascript">

var cont = $('#content').children(); // сохраняем наш первоначальный контент

$(document).ready(function(){
stretch()
});

$(function(){ // тянучка
$("#content").resizable({
minWidth:100,
maxWidth:1100,
resize: function(event, ui) { stretch() }
});

});



function stretch()
{
var parentW = document.getElementById('content').clientWidth;

var kolDiv = 10; // 10 элементов div
var column = Math.floor( parentW / 100 ); // кол столбцов окр. в меньшую сторону
var step = Math.ceil( kolDiv / column); // шаг округ. в большую сторону
var from = 0; // от
var to ; // до

// и выводим их в новом DOMe
for(var i=0; i<=column-1 ; i++)
{
$('#content').append("<div class='parent2' id='collumn"+i+"'></div>");
to = step * (i+1);
$('#collumn'+i).append(cont.slice(from,to));
from = to;
}
}


</script>

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

Проблема в том что это происходит только с одним блоком
т.е. если в моем контенте нужно добавить еще один блок, то понадобиться так же добавлять ему id? а так же добавлять JS в скрипт, а это неудобно.

Не могли бы вы помоч, довести мой пример до ума, например вставив ваш код в мою тянучку.