Нет, это я ерунду посоветовал. Достаточно просто написать плагинчик который будет переставлять блоки в нужном порядке. Набросал примерную реализацию.
<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>