entender funcion facil

[andykofman]

muy buenas, llevo unos meses intentando aprender programacion jvascript y me surgen muchas dudas, espongo la siguiente por si me ayudase alguien.

si tenemos este codigode abajo en el js

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);

},

y en la pagina index hay esto antes de cerrar body
<script type="text/javascript">
flex_list.initialize("listado");
</script>


que es lo que esta sucediendo aqui?

consigo saber que se le pasa el argumento listado que es una clase a la funcion
del js, pero esto no se bien que es initialize: function(classReference) {

¿se guarda la funcion en initialize?, initialize que es, una variable , una funcion, un metodo?.

MUchas gracias

[IsaBelM]

flex_list es un objeto y dentro de el están los elementos de este objeto. tanto initialize como sections son elementos del objeto flex_list y a estos elementos se le puede asignar otro objeto, un array (sections), una función (initialize), etc...

<offtopic>en lugar de usar getElementsByClassName, usa querySelectorAll</offtopic>

[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);
}
},
};