0

问题

我正在尝试生成一个画廊，它将在其中每行显示 3 个“块”并在大图像和小图像之间交替。

例如：

Big     |   4 Small     |   Big

4 Small |   Big         |   4 Small

一个大图像是 4 个小图像的大小。

我试过的

这是我迄今为止尝试过的一个例子。

            $i = 0;
            $r = 0;
            $image = '';
            foreach($gallery_images as $image_data) {

                ($i == 5 ? $i = 0 : '');

                //If there's been 3 blocks added to the row, end the row and start a new one
                if($r == 3) { $image .= '</div>'; $r = 0; }

                //Start new row every 3 blocks
                if($r == 0) { $image .= '<div class="row">'; }

                //One big image, per 4 small in sequence
                if($i == 0) {
                    $image .= '<div style="height: 300px; width:33.3%; background: red;float:left;"></div>';
                    ++$r;
                } else {
                    //If no small, start the block
                    if($i == 1) { $image .= '<div style="width:33.3%;height:300px;float:left;">'; }
                        //echo each small image
                        $image .= '<div style="height: 150px; width:50%;background: blue;float:left;"></div>';

                    //Once 4 images have been echoed, close the div
                    if($i == 4) { $image .= '</div>'; ++$r; }
                }

                ++$i;

            }
            echo $image;

第一行显示正常，但下一行完全混乱。我只是看不到我错过了什么才能让它发挥作用。

“行”类是因为我在 Zurb 的基础框架上构建它，以使其具有响应性。

4

3 回答 3

2

问题是，在第 2 行，直到 4 个小图像结束时才递增$r，1因此它会继续<div class="row">在每个小图像之前添加。您需要更改if偶数行上的块。您可以通过再添加 1 个计数器来执行此操作，该计数器会跟踪您所在的行 -

通过添加

$t=0;

和改变

//Start new row every 3 blocks
if($r == 0) { $image .= '<div class="row">'; }

至

//Start new row every 3 blocks
if($t%2==1){ // if we are on an even row
    if($i == 1 && $r == 0) { $image .= '<div class="row">';}
}
else{ // if we are on an odd row
    if($r == 0) { $image .= '<div class="row">'; }
}

你现在有——

$i = 0;
$r = 0;
$image = '';
$t=0; // counter for odd/even row
foreach($gallery_images as $image_data) {

         ($i == 5 ? $i = 0 : '');
            //If there's been 3 blocks added to the row, end the row and start a new one
            if($r == 3) { $image .= '</div>'; $r = 0; ++$t; }

          //Start new row every 3 blocks
          if($t%2==1){ // if we are on an even row
              if($i == 1 && $r == 0) { $image .= '<div class="row">';} // if it is the first small image group start the row
          }
          else{ // if we are on an odd row
                 if($r == 0) { $image .= '<div class="row">'; }  // if it is the first large image
          }

            //One big image, per 4 small in sequence
            if($i == 0) {
                $image .= '<div style="height: 300px; width:33.3%; background: red;float:left;"></div>';
                ++$r;
            } else {
                //If no small, start the block
                if($i == 1) { $image .= '<div style="width:33.3%;height:300px;float:left;">'; }
                    //echo each small image
                    $image .= '<div style="height: 150px; width:50%;background: blue;float:left;"></div>';

                //Once 4 images have been echoed, close the div
                if($i == 4) { $image .= '</div>'; ++$r; }
            }

            ++$i;

        }
        echo $image;

您可以在http://phpfiddle.org/main/code/t25-kbe看到一个 phpFiddle 示例这是有 60 个图像，所以总共有 4 行，每个模式 2 个。

于 2013-07-18T16:15:53.173 回答
1

新答案：

好的，这就是你想要的：

<style type="text/css">
.big {
    width:200px;
    height:200px;
    background:#03F;    
}
.small {
    width:50px;
    height:50px;
    background:#F00;    
}
</style>

<?

$gallery_images = array(
 1,2,3,4,5,6
);          
        echo '<div class="row">';
        //count counts whether it's big or small
        $count = 0;
        //count2 counts whether it's the end of the row or not
        $count2 = 0; 
        $row   = 0;
        foreach($gallery_images as $image_data) {
            //assign these from image data
            $big = "<img class='big'>"; 
            $small =  array(
                "<img class='small'>","<img class='small'>","<img class='small'>","<img class='small'>"
            );
            //if it's 0 it's big else it's 1 and it's small 
            if($count === 0) {
                echo $big;
                $count++; 
            }else {
                foreach($small as $s) {
                    echo $s;    
                }; 
                $count = 0; 
            }
                            //if it's 2 then its the end of the row else increment
            if($count2 === 2) {
                echo "</div>";
                echo "<div class='row'>";   
                $count2 = 0;
            }else {
                $count2 ++;
            }   


        }


?>
于 2013-07-18T15:52:24.153 回答
0

新的：

好的，您需要对此进行修改，但我认为它可以解决问题：

<style type="text/css">
.big {
    width:200px;
    height:200px;
    background:#03F;    
}
.small {
width:50px;
height:50px;
    background:#F00;    
}
</style>

<?
        $gallery_images = array(
         1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16
        );           
        //find out how many images
        $total_images = count($gallery_images); 

        echo '<div class="row">';
        //count counts whether it's big or small
        $count = 0;
        //count2 counts whether it's the end of the row or not
        $count2 = 0; 
        $row   = 0;
        //overall count of images 
        $overall = 0;
        for($i=0;$i<count($gallery_images);$i++) {
            //assign these from image data
            $big = "<img class='big' src='".$gallery_images[$i]."'>"; 
            //increment overall
            $overall++;
            if($i+1 < $total_images) {
                $small1 = $i+1;
                $small[] = $small1; //would be $gallery_images[$small1]
                $overall++;
            }
            if($i+1 < $total_images) {
                $small2 = $i+2;
                $small[] = $small2;  //would be $gallery_images[$small2]
                $overall++;
            }
            if($i+1 < $total_images) {
                $small3 = $i+3;
                $small[] = $small3; //would be $gallery_images[$small3]
                $overall++;
            }
            if($i+1 < $total_images) {
                $small4 = $i+4;
                $small[] = $small4; //would be $gallery_images[$small4]
                $overall++;
            }
            //if it's 0 it's big else it's 1 and it's small 
            if($count === 0) {
                if($overall < $total_images) {
                    echo $big;
                    $count++; 
                }
            }else {
                if($small) {
                    foreach($small as $s) {
                        echo "<img class='small' src='".$s."' />";
                    }; 
                    $count = 0; 
                }
            }
            if($count2 === 2) {
                echo "</div>";
                echo "<div class='row'>";   
                $count2 = 0;
            }else {
                $count2 ++;
            }   
            unset($small);
            if($overall >= $total_images) {
                echo "</div>";  
            }
        }


?>
于 2013-07-18T15:41:18.510 回答