從陣列中的圖片回聲bootstrap網格

我在我的服務器上有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，但它非常大。

來源

2016-02-11 Mr.Smithyyy

你在找3排4張圖片嗎？ – nerdlyist

@nerdlyist基本上是的。 –

你在主循環內循環4次。您可能希望在打印下一張圖像之前添加％4的條件，這樣您將知道何時「斷線」 –

試試這個

<?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>'; 
?>

來源

2016-02-11 17:26:22

簡單，優雅，並且完美。謝謝！ –

可能想嘗試這樣的事：

<?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>';

來源

2016-02-11 17:26:17

這裏是我的建議

<?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>'; 
} 

?>

來源

2016-02-11 17:30:13 nerdlyist

首先初始化$續= 4.5，如果你希望每個四列排

@foreach ($images as $image) 

    @if($count==0 OR is_int($count/3)) 
     <?php echo '<div class="row">';?> 
    @endif 

    <div class="col-md-3"> 
     <div class="well" style="background:white;"> 
     <img src="{{ url('images/'.$image->filepath) }}" alt="" class="" height="100" width="100" ></br> 

     {{ $image->title }}<br> 
     {{$image->filepath }} 
     </div> 
    </div> 

    @if($count==0 OR is_int($count/3)) 
     <?php echo '</div>' ;?> 

    @endif 

    <?php $count++;?> 
@endforeach

來源

2016-06-28 09:09:22

從陣列中的圖片回聲bootstrap網格

回答

相關問題