работа с контентом в 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 в скрипт, а это неудобно.

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