隨機生成多張圖片的次數

Question

我在一個數組中有3張圖片，隨機生成索引隨機生成它們，但我想要生成每張圖片4次。什麼是最有效的方法呢？

編輯（全碼）：

var image_array = ["image1.png", "image2.png", "image3.png"]; 

function set_page() 
{ 
    var table = document.getElementById("grid"); 

    if(table != null) 
    { 
     for(var i = 0; i < table.rows.length; i++) 
     { 
      for(var j = 0; j < table.rows[i].cells.length; j++) 
      { 
       table.rows[i].cells[j].onclick = function() { 
        click_cell(this); 
       } 

       //table.rows[i].cells[j].style.backgroundImage = "url('../images/back.png')"; 

       add_cell_image(table.rows[i].cells[j]); 

      } 
     } 
    } 
} 

function click_cell(cell) 
{ 

} 

function add_cell_image(cell) 
{ 
    for(var i = 0; i <= image_array.length; i++) 
    { 
     for(var j = 0; j <= image_array.length; j++) 
     { 
      var index = create_values(); 

      cell.innerHTML = "<img class='cell_image' align='middle' width='90' height='90' src ='../images/" + image_array[index] + "'/>"; 
     } 
    } 
} 

function create_values() 
{ 
    return Math.floor(Math.random() * image_array.length); 
} 

Answer 1

你可以使用包含所有指數和shuffle一個數組：

<div id="cell"/> 

<script> 
images = ["img1", "img2", "img3"]; 

/** 
* Shuffles array in place. 
* @param {Array} a items The array containing the items. 
*/ 
function shuffle(a) { 
    var j, x, i; 
    for (i = a.length; i; i--) { 
     j = Math.floor(Math.random() * i); 
     x = a[i - 1]; 
     a[i - 1] = a[j]; 
     a[j] = x; 
    } 
} 

function range(number) { 
    return Array.apply(null, Array(number)).map(function (_, i) {return i;}); 
} 

function create_image(image_source) { 
    var img = document.createElement('img'); 
    img.src = image_source; 
    img.classList.add('cell_image'); 
    img.align = 'middle'; 
    img.height = '90'; 
    img.width = '90'; 
    return img; 
} 

function add_cell_image(cell) { 
    indices = range(images.length * 4); 
    shuffle(indices); 
    for (let i = 0; i < indices.length; i++) { 
     image_source = "../images/" + images[indices[i] % images.length]; 
     image = create_image(image_source); 
     cell.appendChild(image); 
    } 
} 

cell = document.getElementById('cell') 
add_cell_image(cell); 
</script> 

Answer 2

這裏有一個解決方案。不是最優雅的，但它應該讓你開始。

這個想法是創建一個選項數組 - 通過連接你的初始圖像X次。在你原來的問題中，你說你想重複每個圖像4次。所以我們將通過連接初始數組4次來創建一個選項數組。

然後我們將使用.slice從這個選項數組中選擇一個隨機元素，這將從選項數組中刪除該選項。我們將繼續執行，直到options數組爲空。

var image_array = [1, 2, 3]; 
 
var options = create_options(image_array, 4); 
 

 
function set_page(table, options) { 
 
    if (table != null) { 
 
    for (var i = 0; i < table.rows.length; i++) { 
 
     for (var j = 0; j < table.rows[i].cells.length; j++) { 
 
     var randIndex = Math.floor(Math.random() * options.length); 
 
     var item = options.splice(randIndex, 1)[0]; 
 
     var imgEl = create_image(item); 
 
     table.rows[i].cells[j].appendChild(imgEl); 
 
     } 
 
    } 
 
    } 
 
} 
 

 
function create_image(image_id) { 
 
    var imgEl = document.createElement('img'); 
 
    imgEl.src = "https://via.placeholder.com/350x150?text=" + image_id; 
 
    imgEl.classList.add('cell_image'); 
 
    imgEl.height = '90'; 
 
    imgEl.width = '90'; 
 
    return imgEl; 
 
} 
 

 
function create_options(image_array, N) { 
 
    var options = []; 
 

 
    for (var i = 0; i < N; i++) { 
 
    options = options.concat(image_array); 
 
    } 
 

 
    return options; 
 
} 
 

 
set_page(document.getElementById('grid'), options);

<table id="grid"> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>