Tengo un código Javascript que analiza una API JSON para imágenes, todo funciona excepto que se recuperan 20 imágenes únicas de la API, pero cuando se muestran en mi sistema de cuadrícula, cuatro de las mismas imágenes se muestran en 4 columnas y 5 filas. Mi código está debajo y se adjunta una captura de pantalla.

 ================= GRID IMAGE CODE ================= /////// IMAGE GRID var cols = '4'; var rows = (ocean.length / 5);//DIVIDE 20 UNIQUE IMAGE API RESULTS var e = document.getElementById("bookout");//DISPLAY DIV cols = cols || rows; ///// for(var r = 0; r < rows; r++) { var row = document.createElement("div"); row.className = "row"; for(var c = 0; c < cols; c++) { var col = document.createElement("div"); col.className = "col"; col.innerHTML = (Math.floor(Math.random(r)) * rows) + c ; //col.innerHTML = getElement(); col.innerHTML = '<img src="' + ocean[c].thumbnailUrl + '">'; //col.innerHTML = c; row.appendChild(col); } e.appendChild(row); }