1

データベースから画像を取得し、画像をJquery Mobile 1.2.0の構造にロードするための以下の作業コードがあります。mysqli_fetch_array()layout grid

layout gridJquery Mobileの構造は、最大5 列に制限された組み込みのスタイル付きグリッド/ブロックを使用します。したがって、私は JQM スタイルに固執する必要があります。ui-block-aui-block-e

注: 4 列構造を使用していますui-block-a。ui-block-d

8 つの画像をブロックにロードし、それらを正しくスタイル設定するにはui-block-a, -b, -c, -d、4 つの画像の最初の行にこれらのクラスを使用し、4 つの画像の 2 番目の行に同じクラスを使用する必要があります。

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

他の回答と同様に、これは 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 に答える
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" のアスキー コード: 97

于 2013-02-21T15:02:07.960 に答える