1

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

layout gridJquery Mobile的结构使用限制为五列的内置样式网格/块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>

先感谢您！

4

3 回答 3

3

试一试吧！ 

$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++;
};
于 2013-02-21T15:03:16.780 回答
1

尝试

$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 函数 chr： http: //php.net/manual/en/function.chr.php

“a”的ASCII码：97

于 2013-02-21T15:02:07.960 回答
1

与其他答案一样，这使用 MOD 来确定我们所在的列，但适用于任意数量的图片，并且如果图片数量不是 4 的因子，也可以填写空白单元格。使用用户输入而不是 ad/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";
?>
于 2013-02-28T15:06:33.380 回答