Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/01/2013, 13:42
diezdedos
 
Fecha de Ingreso: julio-2010
Mensajes: 24
Antigüedad: 14 años, 7 meses
Puntos: 0
Problema de columnas

Hola amigos, en primer lugar disculpas porque no sabia si introducir el tema por javascript o jquery. El caso es que tengo este plugin insertado en la web. En principio funciona a la "perfeccion", con la pagina abierta la grafica se reparte segun el tamaño de la ventana. El problema esta en que si voy a una subpagina "index.html#ejemplo" y modifico el tamaño de la ventana al volver a la pagina principal toda las fotos que antes estaban alineadas y bien repartidas aparecen juntas y una encima de la otra, si toco levemente el tamaño de la ventana vuelven a repartirse. La primera idea que me surge es el quedarse con la distribucion establecida y no volver a cargar la pagina con el js, pero la verdad es que no tengo ni idea.
Código:
var productList = function () {
	return {
		setup: function (a) {
			if (!this.setupComplete) {
				$(document).ready(function () {
					productList.allItem();
				});
				$(window).resize(_.throttle(function () {
					productList.allItem()
				}, 50));
				this.setupComplete = true
			}
		},
		itemHolder: "#productList",
		itemArray: [],
		orderedItem: [],
		mappedItem: {},
		columnCount: 1,
		columns: 0,
		columnWidthInner: 200,
		columnMargin: 35,
		columnPadding: 27,
		columnBorder: 2,
		allItem: function () {
			var a = $(this.itemHolder + " .product"),
			c = document.documentElement.clientWidth;
			this.columnWidthOuter = this.columnWidthInner + this.columnMargin + this.columnPadding + this.columnBorder;
			this.columns = Math.max(this.columnCount, parseInt(c / this.columnWidthOuter));
			if (a.length < this.columns) this.columns = Math.max(this.columnCount, a.length);
			c = this.columnWidthOuter * this.columns - this.columnMargin;
			var d = document.getElementById("productList");
			if (d) d.style.width = c + "px";
			for (c = 0; c < this.columns; c++) this.itemArray[c] = 0;
			this.flowItem(a, true);
			if ($("#products .product").length === 0 && window.location.pathname === "/") {
				$("#products").addClass("empty");
				setTimeout(function () {
					window.location.reload()
				}, 5E3)
			}
		},
		flowItem: function (a, c) {
			if (c) {
				this.mappedItem = {};
				this.orderedItem = []
			}
			if (this.itemArray.length > this.columns) this.itemArray = this.itemArray.slice(0, this.columns);
			for (i = 0; i < a.length; i++) {
				c = a[i];
				var d = $(c).attr("data-id");
				if (d && this.mappedItem[d]) $(c).remove();
				else {
					var e = jQuery.inArray(Math.min.apply(Math, this.itemArray), this.itemArray),
					f = this.itemArray[e];
					c.style.top = f + "px";
					c.style.left = e * this.columnWidthOuter + "px";
					this.itemArray[e] = f + c.offsetHeight + this.columnMargin;
					this.mappedItem[d] = this.orderedItem.length;
					this.orderedItem.push(d)
				}
			}
			$("#productList").css('min-height',(Math.max.apply(Math, this.itemArray)) + "px");
			this.showItem();
		},
		showItem: function () {
			$.browser.msie && parseInt($.browser.version);
			var a = $(this.itemHolder);
			setTimeout(function () {
				a.css({ visibility: "visible" })
			}, 150)
		}
	}
}();

(function() {
	var root = this;
	var _ = function(obj) { return new wrapper(obj); };
	root['_'] = _;
	_.throttle = function(func, wait) {
		var context, args, timeout, throttling, more, result;
		var whenDone = _.debounce(function(){ more = throttling = false; }, wait);
		return function() {
			context = this; args = arguments;
			var later = function() {
				timeout = null;
				if (more) func.apply(context, args);
				whenDone();
			};
			if (!timeout) timeout = setTimeout(later, wait);
			if (throttling) {
				more = true;
			} else {
				result = func.apply(context, args);
			}
			whenDone();
			throttling = true;
			return result;
		};
	};
	_.debounce = function(func, wait, immediate) {
		var timeout;
		return function() {
			var context = this, args = arguments;
			var later = function() {
				timeout = null;
				if (!immediate) func.apply(context, args);
			};
			if (immediate && !timeout) func.apply(context, args);
			clearTimeout(timeout);
			timeout = setTimeout(later, wait);
		};
	};
}).call(this);
productList.setup();