如何在PHP/HTML中显示两列数组

Question

我有一个图标数组。现在，我们只显示4个桶。所以如果你有7个图标，第一张幻灯片上的第4个图标会重复第二张幻灯片上的第8个图标。这是因为数组的第三个下标存储在同一个位置。为了解决这个问题，我想循环遍历数组，而不是一个图标一个图标地显式迭代。

            <?php if (!empty($icons)) { // if we have icons attributes 
              // NOTE: we've changed it to show as many sets as we can
              //       (sets of 4)
                $number_of_sets = ceil(count($icons) / 4);
            $k=0; // for inner iteration
            for ($j=0;$j < $number_of_sets; $j++) {
                $slide_total ++;
                ?>
                <div class="cf slide icon-slide">
                    <?php
            // up to 4 icons
                    if (is_array($icons) && !empty($icons[$k])) {
                        $icon1 = $icons[$k];
                        $k++;
                    }
                    ?>
                    <div class="col left">
                        <div class="cf icon">
                            <div class="col thumb">
                                <img src="<?=$icon1['thumb']?>" alt="<?=htmlentities($icon1['post_title'])?>" />
                            </div>
                            <div class="colR details">
                                <h4><?=$icon1['post_title']?></h4>
                                <p><?=$icon1['post_content']?></p>
                            </div>
                        </div>
                        <?php
            // up to 4 icons
                        if (is_array($icons) && !empty($icons[$k])) {
                            $icon2 = $icons[$k];
                            $k++;
                        }
                        ?>
                        <div class="cf icon">
                            <div class="col thumb">
                                <img src="<?=$icon2['thumb']?>" alt="<?=htmlentities($icon2['post_title'])?>" />
                            </div>
                            <div class="colR details">
                                <h4><?=$icon2['post_title']?></h4>
                                <p><?=$icon2['post_content']?></p>
                            </div>
                        </div>
                    </div>
                    <?php
            // up to 4 icons
                    if (is_array($icons) && !empty($icons[$k])) {
                        $icon3 = $icons[$k];
                        $k++;
                    }
                    ?>
                    <div class="colR right">
                        <div class="cf icon">
                            <div class="col thumb">
                                <img src="<?=$icon3['thumb']?>" alt="<?=htmlentities($icon3['post_title'])?>" />
                            </div>
                            <div class="colR details">
                                <h4><?=$icon3['post_title']?></h4>
                                <p><?=$icon3['post_content']?></p>
                            </div>
                        </div>
                        <?php
            // up to 4 icons
                        if (is_array($icons) && !empty($icons[$k])) {
                            $icon4 = $icons[$k];
                            $k++;
                        }
                        ?>
                        <div class="cf icon">
                            <div class="col thumb">
                                <img src="<?=$icon4['thumb']?>" alt="<?=htmlentities($icon4['post_title'])?>" />
                            </div>
                            <div class="colR details">
                                <h4><?=$icon4['post_title']?></h4>
                                <p><?=$icon4['post_content']?></p>
                            </div>
                        </div>
                    </div>
                </div> <!-- // end icon slide -->
                <?php
            } // end for $j (number of sets of 4 icons
            ?>

我建议的解决方案:

            <?php if (!empty($icons)) { 
                $num_cols = 2;
                $i = 0;
                $slide_items = 4;
                ?>
                <div class="cf slide icon-slide">
                    <?php foreach ( $icons as $icon ) {

                        echo $i++%$num_cols==0 ? '</div><div class="col" style="width: 250px;">' : '';
                        ?>
                        <div class="cf icon">
                            <div class="col thumb">
                                <img src="<?=$icon['thumb']?>" alt="<?=htmlentities($icon['post_title'])?>" />
                            </div>
                            <div class="colR details">
                                <h4><?=$icon['post_title']?></h4>
                                <p><?=$icon['post_content']?></p>
                            </div>
                        </div>

                        <?php  } } // end if we have icons attributes ?>

我在点击4个图标后不知道如何制作另一张幻灯片。在foreach循环结束前添加以下行行不通。

echo $i++%$slide_items==0 ? '</div><div class="cf slide icon-slide">' : '';

Answer 1

下面是一些循环逻辑:

$i = count( $icons );    
if ( $i % 4 != 0 )
    $i = $i + ( $i % 4 );
for( $n = 0; $n < $i; $n++ )
{
    if ( $n % 4 == 0 )
    {
        // code to open a row here
    }
    // code to open a column here
    // echo your icon here, use isset() or !empty().
    // code to close a column here
    if ( $n > 0 && $n % 3 == 0 )
    {
        // code to close a row here
    }
}

顶部的if用于保持列号一致。否则在循环的末尾会有一些奇怪的地方。