来自 API 的动态图像在网格的行和列中显示相同的图像

问：

我有 Javascript 代码解析图像的 JSON API，除了从 API 中检索 20 个唯一图像外，其他一切都有效，但是当在我的网格系统中显示时，四个相同的图像显示在 4 列和 5 行中。我的代码在下面，并附上了屏幕截图。

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