使用不同尺寸的图像制作照片网格答案

【问题标题】：Making Photo Grid with Different size images使用不同尺寸的图像制作照片网格
【发布时间】：2015-04-30 02:47:11
【问题描述】：

好吧，可能真的很简单。但是，我不知道该怎么做。我想要的是查询一个表并在页面上的两个 div 中显示结果。我的意思是我有一些这样的html：

<div class="row">
    <div class="small">
      //
    </div>
    <div class="large">
      //
    </div>
    <div class="small">
      //
    </div>
    <div class="small">
      //
    </div>
    <div class="small">
      //
    </div>
    <div class="large">
      //
    </div>
</div>

这样的查询

$stmt = $pdo->prepare("SELECT * FROM cars WHERE cars_cat = ? ORDER BY car_id DESC");
$stmt->execute(array($cat_id));
$data = $stmt->fetchAll();

foreach($data as $row)  {

}

数据库表是id, name, image, cars_cat的简单表。

更新：这是画廊的结构

  <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- First Column -->

       <div class="small">

       </div>  

       <div class="large">

       </div>  

       <div class="small">

       </div>

       <div class="small">

       </div>
  </div> <!-- End First Column -->
  <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- Second Column -->
       <div class="small">

       </div>

       <div class="small">

       </div>

       <div class="large">

       </div>

       <div class="small">

       </div>
  </div> <!-- End Second Column -->
  <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- Third Column -->

       <div class="large">

       </div>

       <div class="small">

       </div>

       <div class="large">
            //
       </div>

  </div> <!-- End Third Column -->

【问题讨论】：

您希望两个 div 中的数据相同？
不一样。从数据库中加载所有按 id 排序的数据。让我稍微编辑一下这个问题，因为它们是几个小的和 2-3 个大的 div。
已编辑。他们是这样的。这就是为什么我不知道如何制作。第一个小 div 中的 ID-1..下一个 div 中的 ID-2，依此类推。
这很奇怪。您如何确定从 db 返回的行数与 div 的数量完全相同。
使用ajax获取数据并更新div个数的结果。

标签： php html mysql css

【解决方案1】：

试试这个方法

<style>
    .row {
        -webkit-column-width:400px;
        -moz-column-width:400px;
        column-width:400px;
        -webkit-column-gap:5px;
        -moz-column-gap:5px;
        column-gap:5px;
    }
    .small-box{
        display:inline-block; 
        margin:0 0 5px 0;
        padding:10px;
        color:white;
    }
    .img-responsive{
      width:100%;
      height:auto;
    }
</style>

        <div class="row">
                <div class="small-box">
                    <img src="http://aneemals.com/wp-content/uploads/2013/04/photos-of-animals-that-know-what-love-is-3.jpg" alt="img" class="img-responsive">
                </div>
                <div class="small-box">
                    <img src="http://www.softstuffcreations.com/refresh/data/zoom_image/1772-PandaBear_resized.jpg" alt="img" class="img-responsive">
                </div>

                <div class="small-box">
                    <img src="http://images6.fanpop.com/image/photos/35600000/wild-animals-animals-of-the-world-35665506-800-533.jpg" alt="img" class="img-responsive">
                </div>
                <div class="small-box">
                    <img src="http://nice-animals.com/wp-content/uploads/2013/10/facts-of-love-between-animals-08.jpg" alt="img" class="img-responsive">
                </div>
                <div class="small-box">
                    <img src="http://www.kenya.com/wp-content/uploads/2013/03/Mt-Kenya-Animals.jpg" alt="img" class="img-responsive">
                </div>
                <div class="small-box">
                    <img src="http://www.softstuffcreations.com/refresh/data/zoom_image/1772-PandaBear_resized.jpg" alt="img" class="img-responsive">
                </div>
                <div class="small-box">
                    <img src="http://fc09.deviantart.net/fs71/i/2012/364/4/3/animals___lion_9_by_moonsongstock-d5pr9za.jpg" alt="img" class="img-responsive">
                </div>
        </div>

基本上意味着您需要更新的就是以这种方式更新代码

    <div class="row">
   <?php
      foreach($data as $row)  {     
        echo '<div class="small-box"> your image </div>';         
 }
?>
</div>

【讨论】：

谢谢你的回答。我会尝试重写那个画廊。它是基于引导程序的模板，当我编辑像你这样的行时，我需要放置 100% 的宽度，但我只能得到小图像。
您可以在行内再添加一个 div 并向该 div 添加 css 规则....给宽度 100% 将不起作用，您必须以像素为单位指定宽度...这样就可以了

【解决方案2】：

<div class="row">
   <?php
      foreach($data as $row)  {
         if($row->div_type == 0){
            echo '<div class="small"> your data </div>';
         }else{
            echo '<div class="large"> your data </div>';
         }
      }
   ?>
</div>

【讨论】：

这是否意味着我需要在数据库表中添加另一行来保存small 或large ？
cars_cat 列有什么数据？？
整数..这是汽车类别的ID..基于此我显示该类别中的所有汽车。
small, small, small,small, small, LARGE, small, LARGE, small, LARGE 这是它们在页面上的显示方式
您可以在数据库中添加新列，指定何时需要小 div 和大 div .....让我们说 div_type，当它设置为 0 时，您将显示小 div，当它设置为 1 时，您将显示将显示大 div