Question

我有一个显示数据库中图像的脚本。每4张图片都包含在<div class="row">。

中

我在此页面添加了分页脚本以限制图像数量，但我遇到了问题。

当页面上有4或8个图像时，脚本可以正常工作，但如果页面上只有1或7个图像，则</div>的结束<div class="row">不会被添加

这是我的整个剧本：

  $conn = getConnected("lucycypher");

  $img_start=0;
  $img_limit=8;

  if(isset($_GET['page'])) {
   $page=$_GET['page'];
   $img_start=($page-1)*$img_limit;
  }
  else { $page = 1; }

  $img_total=mysqli_num_rows(mysqli_query($conn, "select * from gallery_img"));
  $img_total_count=ceil($img_total/$img_limit);

  echo '<nav aria-label="Page navigation">
         <ul class="pagination">'  . PHP_EOL;
  if($page>1) {
  echo '<li><a href="?page='.($page-1).'" aria-label="Previous"><span aria-hidden="true">Previous</span></a></li>'  . PHP_EOL;
  }
  for($i=1;$i<=$img_total_count;$i++) {
   if($i==$page) { echo "<li class='active'><a href='?page=".$i."'>".$i."</a></li>"  . PHP_EOL; }
   else { echo "<li><a href='?page=".$i."'>".$i."</a></li>"  . PHP_EOL; }
  }
  if($page!=$img_total_count) {
   if(!isset($page)) { echo '<li><a href="?page='.($page+2).'" aria-label="Next"><span aria-hidden="true">Next</span></a></li>'  . PHP_EOL; }
   else { echo '<li><a href="?page='.($page+1).'" aria-label="Next"><span aria-hidden="true">Next</span></a></li>'  . PHP_EOL; }
  }

echo '</ul>
      </nav>' . PHP_EOL;
?>
 </div>
  </div>
<?php
  if($_COOKIE['age_verification'] == "adult") {
   $img_query = "SELECT img_name, img_category, img_location FROM gallery_img order by img_time desc LIMIT $img_start, $img_limit;";
  }
  else if($_COOKIE['age_verification'] == "child") {
   $img_query = "SELECT img_name, img_category, img_location FROM gallery_img WHERE img_category NOT LIKE '%nude' order by img_time desc LIMIT $img_start, $img_limit;";
  }
  $img_result = mysqli_query($conn, $img_query);

  if (mysqli_num_rows($img_result) > 0) {
      // output data of each row
      $img_count = 1;
      while($img_row = mysqli_fetch_assoc($img_result)) {
       $tags = $img_row["img_category"]; 
          if ( $img_count%4 === 1 ) { echo '<div class="row">' . PHP_EOL; } // Create new row for every 4th image
          echo '<div class="col-md-3">' . PHP_EOL;
          echo '<div class="panel panel-default">' . PHP_EOL;
          echo '<img src="http://lucycypher.com/h/400/w/300/a/c/thumb/'.$img_row["img_location"].'" class="img-responsive img-protected">' . PHP_EOL;
          echo '<div class="panel-footer"><span class="glyphicon glyphicon-tag"></span> Tags: ' . $tags . '</div>' . PHP_EOL;
          echo '</div>' . PHP_EOL;
          echo '</div>' . PHP_EOL;
          if ( $img_count%4 === 0 ) { echo '</div>' . PHP_EOL; } // Close row
          $img_count++;
      }
  } else {
          echo '<div class="col-md-3">' . PHP_EOL;
          echo '<div class="panel panel-primary">' . PHP_EOL;
          echo '<div class="panel-heading"><span class="glyphicon glyphicon-picture"></span> Sorry</div>' . PHP_EOL;
          echo 'No recent uploads.' . PHP_EOL;
          echo '</div>' . PHP_EOL;
          echo '</div>' . PHP_EOL;
  }
  ?>

   <div class="row">
  <div class="col-md-12">
  <?php
  echo '<nav aria-label="Page navigation">
         <ul class="pagination">'  . PHP_EOL;
  if($page>1) {
  echo '<li><a href="?page='.($page-1).'" aria-label="Previous"><span aria-hidden="true">Previous</span></a></li>'  . PHP_EOL;
  }
  for($i=1;$i<=$img_total_count;$i++) {
   if($i==$page) { echo "<li class='active'><a href='?page=".$i."'>".$i."</a></li>"  . PHP_EOL; }
   else { echo "<li><a href='?page=".$i."'>".$i."</a></li>"  . PHP_EOL; }
  }
  if($page!=$img_total_count) {
   if(!isset($page)) { echo '<li><a href="?page='.($page+2).'" aria-label="Next"><span aria-hidden="true">Next</span></a></li>'  . PHP_EOL; }
   else { echo '<li><a href="?page='.($page+1).'" aria-label="Next"><span aria-hidden="true">Next</span></a></li>'  . PHP_EOL; }
  }

echo '</ul>
      </nav>' . PHP_EOL;

一旦我想到这一点，我将限制图像每页8个，所以在最后一页如果总共只有3个图像那么它就会丢失最终的</div>标签，因为它没有总计4完全抛弃了页面布局的其余部分。

解释它的最佳方式是我假设的视觉效果：

当图像每行总共4个，限制为8时：

<div class="row">
 <img src="http://example.com/img.jpg">
 <img src="http://example.com/img.jpg">
 <img src="http://example.com/img.jpg">
 <img src="http://example.com/img.jpg">
</div>
<div class="row">
 <img src="http://example.com/img.jpg">
 <img src="http://example.com/img.jpg">
 <img src="http://example.com/img.jpg">
 <img src="http://example.com/img.jpg">
</div>

但如果最后一页只有3张图片：

<div class="row">
 <img src="http://example.com/img.jpg">
 <img src="http://example.com/img.jpg">
 <img src="http://example.com/img.jpg">
<!--Missing </div> Tag-->

最终</div>标记由此行设置：if ( $img_count%4 === 0 ) { echo '</div>' . PHP_EOL; } // Close row。

Answer 1

您可以计算将要上传的图像总数。

然后，使用if ( $img_count%4 === 0 || $img_count==$total_count )

在我的例子中$img_count是添加图像的数量（从1开始）

使用分页为每第4个MySQL结果添加一个Div

1 个答案: