javascript - 从数据库中获取的 html 图像图库 View

Question

我的列表中有近 200 张图像。

$rings = $db->query("SELECT * FROM rings WHERE id > ". $ringId ." LIMIT 100"); 

我想以图库表单的形式显示它们，每个表单都有一个复选框。每行必须包含至少 4 个带有复选框的图像。

我尝试过，通过添加 div 来创建 for 循环，但每次只能在 Ring 上垂直添加。我怎样才能给它某种画廊的外观。

<div>

                                    <?php
                                            echo "<table><tr>";
                                            $i =0;
                                            foreach( $rings as $ring )
                                            {
                                               $i++;
                                               echo '<td><input type="image" src="http://thevowapp.com/iphoneapp/vowstore/rings/'.  $ring['imagePath'] .'" name="checked" value="' . $ring['id'].'" data-my-info="'. $ring['ringSetName'] .'" style="width:280px; height:280px;"></td>';
                                               echo '<input type="checkbox">';
                                               if( $i % 3 == 0 )
                                               {
                                                 echo "</tr><tr>";
                                               }
                                             }
                                             echo "</tr></table>";
                                       ?>
                               </div>

Answer 1

您需要控制输出，使其水平输出，直到该行中有 4 个图像，然后开始一个新行。

另外，我可以为此建议一个表结构吗？

echo "<table>
       <tr>";
$i=0;
foreach( $rings as $ring ):
  $i++
  echo "<td><img src='{$ring['thumb']}' /></td>";
  if( $i % 4 == 0 ){
    echo "</tr><tr>";
  }
}
echo "</tr></table>";