Estoy tratando de hacer un masonry layout y la logica es la siguiente tengo un arreglo de elementos [elem1,elem2,elem3,elem4] y deseo distribuirlos en 3 columnas, pero deben aparecer en este orden:
columna1 columna2 columna3
elem1 elem2 elem3
Por alguna razón el primer elemento no se agrega, no entiendo porque
este es mi código javascript:
no comprendo porque no se agregan todos los elementos, incluso probé con un arreglo de números para ver la lógica y los números se agregaban correctamente
let articles = document.getElementsByClassName("new-article")
let columns = [document.createElement("div"),
document.createElement("div"),
document.createElement("div")]
let longElements = articles.length-1
let elementsCounter = 0
for(let i=0; i<columns.length; i++){
document.getElementById("container-articles").appendChild(columns[i])
}
for(let i=0; i<columns.length; i++){
columns[i].classList.add("col-xl-4")
}
for(let i=0; i<=columns.length; i++){
if(i===columns.length){
i=0;
}
if(longElements<0){
break
}
columns[i].appendChild(articles[elementsCounter])
longElements--
elementsCounter++
}
Aquí pruebo el algoritmo con números antes de usar el DOM
let elementos = [12,12,3,41,2]
let columnas = [[],[],[]]
let longElementos = elementos.length-1 //4
for(let i=0; i<=columnas.length; i++){ //i=0,1,2,3
if(i===columnas.length){ // i=0,1,2,3
i=0
}
if(longElementos<0){ // longElementos 2,41,3,12,12
break
}
columnas[i].push(elementos[longElementos]) //3,2,1,0
longElementos--
}
La salida es esta, que es justo la que espero:
arr1---> 0: [2, 12]
arr2---> 1: [41, 12]
arr3---> 2: [3]
Actualizacion:
Aqui esta el HTML que estoy usando
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
type="text/css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<article class="new-article">
<img src="http:lorempixel.com/500/500">
<h1>Noticia 1</h1>
</article>
<article class="new-article">
<img src="http:lorempixel.com/500/500">
<h1>Noticia 2</h1>
</article>
<div class="container-fluid">
<div class="row" id="container-articles">
</div>
</div>
<script src="masonry.js"></script>
</body>
</html>