[PHP][HTML, CSS]画像を隙間なく並べて表示

Facebook にシェア
Delicious にシェア
LINEで送る
Pocket

高さの違う画像をタイル状に敷き詰めて表示させる場合、Javascript を利用することが多いですが、あえて PHP で表現すると次のようになります。

<?php
//カラム数(一段に並べる枚数)
$column = 3;
//幅
$width = 100;
//画像ディレクトリ
$dir = "images/";
$list = scandir($dir);

$files = array();
foreach($list as $value){
  if(is_file($dir . $value)){
    $files[] = $dir . $value;
  }
}

function columnGallery($files, $column, $width){

  $div = array();
  
  for($i=0;$i<$column;$i++){
    $heightTotal[$i] = 0;
  }
  
  foreach($files as $file){
    asort($heightTotal);
    $keys   = array_keys($heightTotal);
    $target   = reset($keys);
    $size   = getimagesize($file);
    $height   = $size[1];
    if(!isset($div[$target])) $div[$target] = array();
    $div[$target][] = $file;
    $heightTotal[$target] += $height;
  }
  
  foreach($div as $files){
    echo "<div class=\"column\">\n";
    foreach($files as $file){
      echo "<img src=\"{$file}\" style=\"width:{$width}px;\" /><br />\n";
    }
    echo "</div>\n";
  }
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gallery</title>
<style type="text/css">
.column {float:left;}
</style>
</head>
<body>
<?php columnGallery($files, $column, $width);?>
</body>
</html>

サンプルではディレクトリ内のファイル全てを並べて表示しています。

画像の横幅を統一し、カラムとして横並びにすることでぴったり並んだように見せています。
応用すれば Pinterest のような表示もできると思います。

grid

カラムごとに画像の高さの合計値を計算し、一番短いカラムに画像を追加してバランスを取ります。

リキッドレイアウトでウィンドウサイズの変更に合わせて並び直しをしたい場合は素直に Javascript を使ったほうがいいと思います。

その場合は「jQuery Masonry」が便利です。
Masonry


Similar Posts:




  • This entry was posted in PHP, HTML, CSS and tagged . Bookmark the permalink.

    コメントを残す

    メールアドレスが公開されることはありません。