php - 使用不同尺寸的图像制作照片网格

Question

好吧，可能真的很简单。但是，我不知道该怎么做。我想要的是查询一个表并在页面上的两个 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 -->

Answer 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>