![Antiguo](http://static.forosdelweb.com/fdwtheme/images/statusicon/post_old.gif)
24/01/2013, 13:42
|
| | 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();
|