Question

我可能比自己更加困惑自己。

我的服务器上有12个图像，还有一个处理链接的数组。

$ppDefault = "images/profile/default/";
$ppDefaultArray = array($pLoc . "p-01.png", $pLoc . "p-02.png", $pLoc . "p-03.png", ...);

我的目标是建立这样的结构：

<div class="row">
    <div class="col-md-3">
        <img class="img-responsive" src="image.png" />
    </div>
    <div class="col-md-3">
        <img class="img-responsive" src="image.png" />
    </div>
    <div class="col-md-3">
        <img class="img-responsive" src="image.png" />
    </div>
    <div class="col-md-3">
        <img class="img-responsive" src="image.png" />
    </div>
</div>
And so on with more rows and columns

目前我的php代码如下：

<?php
    $count = 4;
    for ($i = 0; $i < count($ppDefaultArray); $i++) {
        if ($count % 4 == 0) {
            echo 
                '<div class="row">';
                for ($j = 0; $j < 4; $j++) {
                    echo '<div class="col-md-3"><img class="img-responsive" src="' . $ppDefaultArray[$i] . '"/></div>';
                }
                echo '</div>';
        } else {
            for ($j = 0; $j < 4; $j++) {
                echo '<div class="col-md-3"><img class="img-responsive" src="' . $ppDefaultArray[$i] . '"/></div>';
            }
        }
        $count++;
    }   
?>

哪个输出我这样的东西：

这不是我需要的。我需要每张图片只显示一次，我假设有些标签丢失，因为有些图片未对齐。

如果需要，我可以发布生成的HTML，但它非常大。

Answer 1

试试这个

<?php

echo '<div class="row">';
for ($i = 0; $i < count($ppDefaultArray); $i++) {
    echo '<div class="col-md-3"><img class="img-responsive" src="' . $ppDefaultArray[$i] . '"/></div>';
    if (($i+1) % 4 == 0)
        echo '</div><div class="row">';
}   
echo '</div>';
?>

Answer 2

可能想尝试这样的事情：

<?php
$count = 4;

echo '<div class="row">';
for ($i = 0; $i < count($ppDefaultArray); $i++) {

    echo '<div class="col-md-3"><img class="img-responsive" src="' . $ppDefaultArray[$i] . '"/></div>';

    if ($count % 4 == 0) { // time to break line
        echo '</div>';
        echo '<div class="row">';
    } 

    $count++;
}   
echo '</div>';

Answer 3

这是我的建议

<?php
$imgeIndex = 0;
while($imgeIndex < count($ppDefaultArray)){
    echo '<div class="row">';
    for ($col = 0; $col < 4; $col++) {
        echo '<div class="col-md-3"><img class="img-responsive" src="' $ppDefaultArray[$imgeIndex] . '"/></div>';
        $imgeIndex++;
    }
    echo '</div>';
}

?>

Answer 4

首先初始化$ cont = 4.5，如果你想要每行四列

$dom = new \DOMDocument();
            $dom->loadHTML($data);

            // create the new element
            $newNode = $dom->createElement('div', 'this is new');
            $newNode->setAttribute('id', 'new_div');

            //foreach

            $count = 0;
            foreach($tags->contents as $content){
                $contents[$count] = $content->text;
            }

            // fetch and replace the old element
            $oldNode = $dom->getElementById('blog-xpath');
            $oldNode->parentNode->replaceChild($newNode, $oldNode);


            $nodes = $dom->saveHTML($dom->documentElement);

Echo自举网格与数组中的图片

4 个答案: