我想创建一个具有以下内容的HTML页面：
图像有 10 个插槽，有 3 个图像，三个图像中的任何一个都有 50% 的机会，因此它将获得 50%（5 个插槽），其余两个将占据 5 个插槽的左侧。
有什么方法可以在 js/php 中做到这一点吗？
任何帮助将不胜感激！
这是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;
?>