php - 使用 Twitter Bootstrap 构建屏幕截图画廊

Question

我目前正在尝试构建屏幕截图库。我已经完成了第一步，使用户可以将图像上传到 mysql 数据库。

画廊的图像就是这样提供给画廊脚本的。不幸的是，我花了几个月的时间来完善我将各种东西放入数据库的能力，但没有花太多时间研究如何从数据库中取出它们并以用户友好的格式显示。

Twitter Bootstrap 流体网格系统
Twitter Bootstrap 使用流畅的网格系统来显示数据。您不必使用它，但它可以使布局看起来更好。现在截图库需要显示多行图像，每行 4 列宽。现在是关键，这是每一行的结构。

http://pastebin.com/HvBK5rTC

我需要一遍又一遍地生成该行。但我需要填充它的图像在 4 处停止，回显适当的结束 div，回显另一行的开始 div，并回显另外四个图像，等等。

我没有这方面的任何代码，因为我不知道从哪里开始。如果你能帮助我开始，我可以提供你需要的任何东西。

编辑 这是我到目前为止想出的，但我不知道如何关闭 <div class="row-fluid">并打开一个新的。

http://pastebin.com/EADji2eh

Answer 1

你几乎在那里。 mysql_* fn 已弃用，您应该使用 PDO 等。

您可以通过添加一个用于流量控制的外部循环并使用您已有的内部循环来完成您需要的操作。结果数组，它将自动为您遍历结果集，而无需跟踪限制等的偏移量。

build_gallery_fn.php:

function image_from_database() {
            // use a running counter for flow control of the outer loop
        $runningcount = 0;

        $r = mysql_query("SELECT DISTINCT logo AS `img` FROM NewsArticles WHERE logo IS NOT NULL AND logo !='';");

            //Get # of images in results to use as upper limit for outer loop
        $img_ct = mysql_num_rows($r);

        while ($runningcount <= $img_ct){

                    //rowcount reset to break content blocks
            $rowcount = 0;


            echo "<div class=\"row-fluid\">";

            $runningcount++;

                    while(($rowcount <= 3) && $row = mysql_fetch_assoc($r))
            {
                    $rowcount++; 
                    $img = $row['img'];
                    echo '<div class="span2">';
                    echo "<span class='thumbnail'><img src='attachments/logos/$img'/> Photo # $runningcount of $img_ct</span>";
                    echo '</div>';
            }
            echo "</div>";

        }
}

输出支架:

<div class="container">
    <h1 class="text-center">The American Pacific Group ScreenShot Gallery</h1>
    <hr>

            <?php
                    echo image_from_database();
            ?>

</div>