基於％的HTML圖像？

Question

我想創建一個具有以下內容的HTML頁面：

有10個插槽的圖像，有3個圖像，三個圖像中的任何一個有50％的機會，所以它會獲得50％（5個插槽）剩下的兩個將剩下5個插槽。

有沒有辦法在js/php中做到這一點？

任何幫助，將不勝感激！

Answer 1

這是PHP中的一個片段，可能有助於您找到解決方案。

<?php 
    $images = array(
     array('title' => 'mytitle1', 'path' => 'path/to/image1.png', 'slots' => 0), 
     array('title' => 'mytitle2', 'path' => 'path/to/image2.png', 'slots' => 0), 
     array('title' => 'mytitle3', 'path' => 'path/to/image3.png', 'slots' => 0), 
    // array('title' => 'mytitle4', 'path' => 'path/to/image4.png', 'slots' => 0), 
    // array('title' => 'mytitle5', 'path' => 'path/to/image5.png', 'slots' => 0), 
    // array('title' => 'mytitle6', 'path' => 'path/to/image6.png', 'slots' => 0), 
    // array('title' => 'mytitle7', 'path' => 'path/to/image7.png', 'slots' => 0), 
    // array('title' => 'mytitle8', 'path' => 'path/to/image8.png', 'slots' => 0), 
    ); 

    // Calculate # of slots to use per image 
    $nimages = count($images);     // # of images 
    $nslots = 10;        // # of slots 
    $rimags = $nimages - 1;      // # remaining images 
    $images[0]['slots'] = floor($nslots * 0.5); // # slots 1st image 
    $rslots = $nslots - $images[0]['slots']; // # remaining slots 
    $xslots = floor($rslots/$rimags);  // slots/image 
    $xtra = ($rslots % $rimags);    // extra slots 

    for ($xi=1; $xi<$nimages; $xi++) { 
     $images[$xi]['slots'] = $xslots + (($xtra>0) ? 1 : 0); 
     if ($xtra>0) $xtra--; 
    } 

    // Generate HTML code 
    echo '<div id="image_panel">' . PHP_EOL; 
    $nslot = 1; 
    foreach ($images as $img) { 
     if ($img['slots']<1) continue; 
     for ($xi=0; $xi<$img['slots']; $xi++) { 
      echo ' '.$nslot.': <img src="'.$img['path'].'"  title="'.$img['title'].'" alt="'.$img['title'].'" id="'.$xi.'" />' . PHP_EOL; 
      $nslot++; 
     } 
    } 
    echo '</div>' . PHP_EOL; 
?>