Foros del Web » Programando para Internet » Javascript »

Problema de columnas

Estas en el tema de Problema de columnas en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/01/2013, 13:42
 
Fecha de Ingreso: julio-2010
Mensajes: 24
Antigüedad: 13 años, 10 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();
  #2 (permalink)  
Antiguo 24/01/2013, 14:57
 
Fecha de Ingreso: julio-2010
Mensajes: 24
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: Problema de columnas

Una idea que tengo, en caso de no encontrar solucion.
La web tiene un preload, si yo estando en index.html#subpagina pulso el enlace con la pagina index, podria existir la posibilidad de volve a cargar la pagina con su preload incluido. Me imagino que de esa forma volveria a establecer el orden. ¿como puede hacerlo? Si pongo el location.reload(); no vale porque se recarga la subpagina.
  #3 (permalink)  
Antiguo 25/01/2013, 17:48
 
Fecha de Ingreso: julio-2010
Mensajes: 24
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: Problema de columnas

Creo saber donde esta el error, pero no tengo ni idea de resolverlo.
La cuestion es que cuando retorno a la pagina el reparto de columnas (1,2,3,4,6,...etc. dependiendo del tamaño de la ventana del navegador) lo hace perfectamente, el problema esta en el alto del div que contiene los div con las imagenes.
En el momento que yo vuelvo a ampliar o reducir la altura de la ventana automaticamente se vuelven a reacomodar las imagenes.
Podeis echarme una mano. Gracias
  #4 (permalink)  
Antiguo 27/01/2013, 10:11
 
Fecha de Ingreso: septiembre-2012
Mensajes: 17
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Problema de columnas

No se si te servira puesto que no conozco bn lo que intentas hacer pero ay un plugin de jquery que puede talvez solucionar el problema que dices

Este es el link
[URL="http://masonry.desandro.com/"]http://masonry.desandro.com/[/URL]

tambien puedes hacer lo en vez de refrescar la pagina mediante AJAX. es mas comodo y no tienes que recargar nada.

Esperto te haya servido de algo
  #5 (permalink)  
Antiguo 27/01/2013, 17:49
 
Fecha de Ingreso: julio-2010
Mensajes: 24
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: Problema de columnas

Gracias itnas, la verdad es que me adelante y ayer instale Masonry... pero no se soluciono.
Despues de dias indagando el problema viene del jquery.mobile (me vais a decir "porque no empezaste por ahi", pero no me imaginaba que de ahi partia). Le puse el siguiente codigo entre el head y funciona, cada vez que vuelvo a la pagina de inicio se reacomoda. Por supuesto le he dejado el plugin Masonry, ya que me parece mas perfeccionado.
Código:
$(function(){
	$('#container').masonry({
		itemSelector: '.boxes',
		columnWidth: 260,
		isAnimated: !Modernizr.csstransitions,
		isFitWidth: true
	});
	$('[data-role=page]').live('pageshow',function(event, ui) {        
		$('#container').masonry({
		itemSelector: '.boxes',
		columnWidth: 260,
		isAnimated: !Modernizr.csstransitions,
		isFitWidth: true
		});
	});  
});
Solo tengo una duda:
Como ves todos los datos se repiten, pero si pongo solo "$('#container').masonry({..." se cargan la primera vez pero no hacen la recarga al volver a la pagina. Si pongo "$('[data-role=page]').live('pageshow',function(event, ui)..." solucionan el problema pero la primera vez que cargo la pagina no funciona Masonry. Extraño no. Hay alguna forma de abreviar para no repetirlo?

Etiquetas: columnas, funcion, html, jquery, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:20.