Показать сообщение отдельно
  #2 (permalink)  
Старый 10.08.2011, 01:48
Профессор
Отправить личное сообщение для ваый Посмотреть профиль Найти все сообщения от ваый
 
Регистрация: 29.06.2011
Сообщений: 445

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

Последний раз редактировалось ваый, 10.08.2011 в 02:26.
Ответить с цитированием