I have Javascript code parsing a JSON API for images, every thing works except 20 unique images are retrieved from API, but when being displayed in my grid system four of the same images are displayed in 4 columns and 5 rows. My code is below and an screenshot is attached.

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