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

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