Question

我有以下工作代码从数据库mysqli_fetch_array()获取图像，并将图像加载到Jquery Mobile 1.2.0中的layout grid结构中。

Jquery Mobile的layout grid结构使用built-in styled grid/blocks限制为五列，ui-block-a最多为ui-block-e。因此，我应该坚持JQM风格。

注意：我使用的是四列结构，ui-block-a到ui-block-d

为了将八（8）个图像加载到块中并使它们正确设置样式，我必须将这些类ui-block-a, -b, -c, -d用于四个图像的第一行，并将相同的类用于四个图像的第二行

我在foreach (array(a, b, c, d, a, b, c, d) as $i)中使用了while loop，但我得到了重复的结果。

代码工作正常，但我想知道是否还有其他可能通过删除所有IF-statements来实现所需的结构。

代码：

while ($row = mysqli_fetch_array($query)) {
 $img = $row["fn"];
  if (empty($img)) { break; }
  $thumb = 'images/th_'.$img;
  if ($count == 8) { break; } // limited to 8 images/results

  if ($count == 0) $i = 'a'; //first 4 imgs row classes
  if ($count == 1) $i = 'b';
  if ($count == 2) $i = 'c';
  if ($count == 3) $i = 'd';

  if ($count == 4) $i = 'a'; //second 4 imgs row classes
  if ($count == 5) $i = 'b';
  if ($count == 6) $i = 'c';
  if ($count == 7) $i = 'd';

  $ths.='<div class="ui-block-'.$i.'"><img src="'.$thumb.'"></div>';

  $count = $count + 1;
};

结果：

<div class="ui-grid-c">
    <!-- First row -->
    <div class="ui-block-a"><img src="img1.jpg"></div>
    <div class="ui-block-b"><img src="img2.jpg"></div>
    <div class="ui-block-c"><img src="img3.jpg"></div>
    <div class="ui-block-d"><img src="img4.jpg"></div>
    <!-- Second row -->
    <div class="ui-block-a"><img src="img5.jpg"></div>
    <div class="ui-block-b"><img src="img6.jpg"></div>
    <div class="ui-block-c"><img src="img7.jpg"></div>
    <div class="ui-block-d"><img src="img8.jpg"></div>
</div>

提前谢谢！

Answer 1

让我们试一试！

$count=0;
$arr=array('a', 'b', 'c', 'd');
while ($row = mysqli_fetch_array($query)) {
 $img = $row["fn"];
  if (empty($img)) { break; }
  $thumb = 'images/th_'.$img;
  if ($count == 8) { break; }

  $i=$arr[$count%4];    

  $ths.='<div class="ui-block-'.$i.'"><img src="'.$thumb.'"></div>';

  $count++;
};

Answer 2

尝试

$count = 0;
while ($row = mysqli_fetch_array($query) && $count < 8) {
  $img = $row["fn"];
  if (empty($img)) { break; }
  $thumb = 'images/th_'.$img;

  $i = chr(97 + ($count%4) ); // char a + 0, 1, 2 or 3

  $ths.='<div class="ui-block-'.$i.'"><img src="'.$thumb.'"></div>';

  $count++;
};

php function chr：http://php.net/manual/en/function.chr.php

“a”的ascii代码：97

Answer 3

与其他答案一样，它使用MOD来确定我们所在的列，但是可以用于任意数量的图片，并且还可以填充空白单元格，如果pic的数量不是4的因子。使用用户输入而不是广告/ b演示的结果见http://solomon.ie/so/gallery.php?pics=6 - 将pics = 6更改为任何数字

<?  
$num_pics = 0;
$num_pics = $_GET['pics'];


// store HTML/JQM fragments
$blank_picture_row = "<div class='ui-block-a'>%pic_1%</div>\n";
$blank_picture_row .= "<div class='ui-block-b'>%pic_2%</div>\n";
$blank_picture_row .= "<div class='ui-block-c'>%pic_3%</div>\n";
$blank_picture_row .= "<div class='ui-block-d'>%pic_4%</div>\n\n";

//start HTML
$out ="<div class='ui-grid-c'>\n\n";



for ($pic_index=0; $pic_index < $num_pics; $pic_index++)
    {
    $thumb_pic = "Pic # $pic_index";// create image tag - text for demo

    if ($pic_index % 4 == 0) // mod result will be zero for start of each new row of 4 
        $picture_row = $blank_picture_row;

    $position_in_row = ($pic_index % 4) + 1;
    $pic_place_holder = "%pic_"  . $position_in_row . "%";

    $picture_row = str_replace($pic_place_holder, $thumb_pic, $picture_row);

    if ($pic_index == ($num_pics - 1)) // last pic, blank any positions that are not needed
        {
        $position_in_row = $pic_index % 4; 

        switch ($position_in_row) 
            { 
            case 0: // last pic was in column 1 - using a space, but could also put in a dummy pic
                    $picture_row = str_replace("%pic_2%", "&nbsp;", $picture_row);
            case 1: // last pic was in column 2 
                    $picture_row = str_replace("%pic_3%", "&nbsp;", $picture_row);
            case 2: // last pic was in column 3 
                    $picture_row = str_replace("%pic_4%", "&nbsp;", $picture_row);
            case 3: // last pic is in column 4, no action required
                break;
            } 
        } // END if if ($pic_index == ($num_pics - 1))




    if ($pic_index % 4 == 3 || $pic_index == ($num_pics - 1))  
        {// last pic in this row or last pic in total - add this row to output
        $out .= $picture_row;
        }

    } // END for ($pic_index=$start_pic; $pic_index < $finish_pic; $pic_index++)


$out .= "</div>\n\n\n";
$out=htmlspecialchars($out);
$out=nl2br($out);

print "$out\n";
?>

在while循环中循环mysqli_fetch_array（）

3 个答案: