使用PHP从SQL获取每3个项目创建一个新的div类行

时间:2017-06-05 13:10:12

标签: php jquery html css mysql

我正在尝试创建一个图库..每3个图像我需要创建一个新的div并重新开始。(试图将此HTML转换为php-sql) enter image description here

我正在尝试使用这个PHP代码

<?php
  //get images from database
  $query = $con->query("SELECT * FROM images ORDER BY id");

   if($query->num_rows > 0){
    while($row = $query->fetch_assoc()){
    $imagethumb = 'images/thumb/'.$row["file_name"];
    $imagefront = 'images/'.$row["file_name"];

    $i = 0;

    if($i++ % 3 == 0){
    ?>
    <div class=" bd-layoutcontainer bd-columns bd-no-margins">
       <div class="bd-container-inner">
          <div class="container-fluid">
              <div class="row">                             
                   <div class="bd-columnwrapper-136 <?php  
                       list($width, $height) = getimagesize($imagethumb);                                
                       if($width > 298){
                          echo 'col-sm-6';
                       }else{
                          echo 'col-sm-3';
                     }
                   ?>">
                   <?php echo '<div class="bd-layoutcolumn-136 bd-column">
                               <div class="bd-vertical-align-wrapper">
                               <div class="bd-hoverbox-6 bd-effect-fade">
                               <div class="bd-slidesWrapper">' ?>
                        <a href="<?php echo $imagethumb; ?>" data-fancybox="group" data-caption="<?php echo $row["title"]; ?>" >
                         <img src="<?php echo $imagefront; ?>" alt="" />
                        </a>
                  <?php echo '
                              </div>
                              </div> 
                              </div>
                              </div>'
                  ?> 
                  </div>
            </div>
      </div>
     </div>
   <?php
      }
      }
      } 
?>

我正在使用if语句$ i%3 == 0来创建一个新的div,但我得到的每个图像都是其他图像,而不是像图片那样的三个图像.. enter image description here  这就是我得到的

我还应该做什么?

我需要每3个imgs来创建

     <div class=" bd-layoutcontainer bd-columns bd-no-margins">
       ..............
     </div>

div从未乘以3我只得到一个div

2 个答案:

答案 0 :(得分:0)

</div>
<div class=" bd-layoutcontainer bd-columns bd-no-margins">

我认为如果声明$ i%3 == 0你应该添加关闭标记并创建一个新的div.Hope来解决你的问题。

答案 1 :(得分:0)

定义$ i = 0;在while循环之前

<?php
  //get images from database
  $query = $con->query("SELECT * FROM images ORDER BY id");

   if($query->num_rows > 0){
$i=0;
while($row = $query->fetch_assoc()){
$imagethumb = 'images/thumb/'.$row["file_name"];
$imagefront = 'images/'.$row["file_name"];

if($i++ % 3 == 0){
?>
<div class=" bd-layoutcontainer bd-columns bd-no-margins">
   <div class="bd-container-inner">
      <div class="container-fluid">
          <div class="row">                             
               <div class="bd-columnwrapper-136 <?php  
                   list($width, $height) = getimagesize($imagethumb);                                
                   if($width > 298){
                      echo 'col-sm-6';
                   }else{
                      echo 'col-sm-3';
                 }
               ?>">
               <?php echo '<div class="bd-layoutcolumn-136 bd-column">
                           <div class="bd-vertical-align-wrapper">
                           <div class="bd-hoverbox-6 bd-effect-fade">
                           <div class="bd-slidesWrapper">' ?>
                    <a href="<?php echo $imagethumb; ?>" data-fancybox="group" data-caption="<?php echo $row["title"]; ?>" >
                     <img src="<?php echo $imagefront; ?>" alt="" />
                    </a>
              <?php echo '
                          </div>
                          </div> 
                          </div>
                          </div>'
              ?> 
              </div>
        </div>
  </div>
 </div>
   <?php
  }
  }
  } 
?>