entender funcion facil

[andykofman]

Muchas gracias isabel, permiteme que insista.. pero como veo que me puedes ayudar bastante en este codigo que lo necesito como agua de mayo, te lo pongo entero por si me pudieses ayudar en otros puntos.

Es un codigo que me descarge para poner los elememenos de las columnas de tal modo que se pongan uno seguido de otro, sin embargo funciona siempre que el no haya ningun elemento pradre mas que el body por encima del padre de .listado (que es donde estan contenidas las imagenes).

la verdad es que no se porque..

/**
* Flex List Javascript Library v0.0.1
*
* @Author ANM.
*
* Date 2015-09-15
*/

var flex_list = {

sections: [480, 640, 800, 1200],

initialize: function(classReference) {

document.getElementsByClassName(classReference)[0].parentNode.style.position = "relative";

// Load listener
window.addEventListener("load", function() {
// First time execution
flex_list.resizeFunction(classReference);
}, false);

// Resize listener
window.addEventListener("resize", function() {
flex_list.resizeFunction(classReference);
}, false);

},


/**
* Initialize flex list events.
* Add onload and resize listeners AND list of sections to make columns.
*/
initialize_with_sections: function(classReference, sects) {
// Define sections
if ( sects && (sects.constructor.toString().indexOf("Array") > -1) )
flex_list.sections = sects;

flex_list.initialize(classReference);
},

/**
* Returns x,y as pixels position of selected item into HTML DOM
*/
getPosition: function(element) {
var xPosition = 0;
var yPosition = 0;

while(element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
},


/**
* Each time function is called, check number of items needed for every row and move all to adjust.
*/
resizeFunction: function(classReference) {
// Set container size, for adjust content to it.
var list = document.getElementsByClassName(classReference);
list[0].style.left = 0;
var fatherWidth = list[0].parentNode.offsetWidth;
//console.log(fatherWidth);

// Default items per row value.
var itemsPerRow = 1;
//console.log(window.innerWidth);
/*
if (window.innerWidth > 1200) {
itemsPerRow = 5;
}else if (window.innerWidth > 800) {
itemsPerRow = 4;
}else if (window.innerWidth > 640) {
itemsPerRow = 3;
}else if (window.innerWidth > 480) {
itemsPerRow = 2;
}
*/

// Check sections array and define these sections. If array isnt exists, define only 1 column.
for (var x = 0; x<flex_list.sections.length; x++) {
if ( window.innerWidth > parseInt(flex_list.sections[x]) ) {
itemsPerRow = itemsPerRow + 1;
}
}



// Default values for realignment.
var mod = 0;
var row = 1;
var newTop = 0;
var newLeft = 0;
var pos = {x:0, y:0};
for (var x = 0; x<list.length; x++) {
mod = x % itemsPerRow;
row = Math.floor(x / itemsPerRow);
//console.log("Fila:"+row+" columna:"+mod);
pos = flex_list.getPosition(list[x]);
//console.log("Left:"+pos.x+" Top:"+pos.y);

// TOP alignment
if (row == 0) {
newTop = 0;
}else {
pos = flex_list.getPosition(list[x-itemsPerRow]);
newTop = pos.y + list[x-itemsPerRow].offsetHeight;
//console.log("Item:"+(x-itemsPerRow)+" Altura:"+list[x-itemsPerRow].offsetHeight);
}

// LEFT alignment
if (mod == 0) {
newLeft = 0;
}else {
pos = flex_list.getPosition(list[x-1]);
newLeft = pos.x + list[x-1].offsetWidth;
}

// APPLY
list[x].style.left = newLeft;
list[x].style.top = newTop;
list[x].style.position = "absolute";
//console.log("newTop:"+newTop+" newLeft:"+newLeft);
}
},
};