I'm trying to make a masonry layout and the logic is as follows: I have an array of elements [elem1,elem2,elem3,elem4] and I want to distribute them in 3 columns, but they must appear in this order:
columna1 columna2 columna3
elem1 elem2 elem3
For some reason the first element is not added, I don't understand why
this is my javascript code:
I don't understand why not all the elements are added, I even tried with an array of numbers to see the logic and the numbers were added correctly
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++
}
Here I test the algorithm with numbers before using the 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--
}
The output is this, which is just what I expect:
arr1---> 0: [2, 12]
arr2---> 1: [41, 12]
arr3---> 2: [3]
Update:
Here is the HTML that I am using
<!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>