PHP在列中显示图像 [英] PHP Display images in columns

问题描述

我最近有一个图像库在四个相等宽的框中显示，图像为100％宽度，清除两个和高度自动。这工作相当不错，除了我有数百图片调用在页面上。

I recently had an image gallery displayed nicely in four equally wide boxes, with the images as 100% width, clear both and height auto. This worked pretty well, except I had hundreds of images called on the page.

我试图获得相同的效果，只使用一个短php脚本来调用图像并显示它们。

I am trying to get the same effect, only using a short php script to call the images and display them.

这里是

Here is a link to the gallery before

这里是一个链接

我目前拥有的php代码

And the php code I currently have

<?php 
    $dir    = 'images/gallery/';
    $files  = scandir($dir);
    $images = array();

    foreach($files as $file) 
    {
        if(fnmatch('*.jpg',$file)) 
        {
            $images[] = $file;
        }
    }

    foreach($images as $image) 
    {
        echo '<img src="images/gallery/'.$image.'" />';
    }
?>

推荐答案

尝试此代码

  $dir    = 'images/gallery/';
    $files  = scandir($dir);
    $images = array();


    foreach($files as $file) 
    {
        if(fnmatch('*.jpg',$file)) 
        {
            $images[] = $file;
        }
    }

    $image_count = count($images);
    $count_each_column = ceil($image_count/4);

    echo '<div style="width:100%; max-width:950px; margin:0 auto;">';
    $count = 0;
    foreach($images as $image) 
    {
        $count+=1;
        if($count==1)
        {
            echo '<div class="box boxgallery">';
        }

            echo '<img src="images/gallery/'.$image.'" />';

        if($count>=$count_each_column)
        {
            $count=0;
            echo '</div>';
        }
    }

    if($count>0)
    {
        echo '</div>';
    }
    echo '</div>';

和一些 CSS

<style>
.boxgallery {
    margin: 0 0.6% 0 0;
    padding: 0;
    width: 24%;
    float:left;
}

.boxgallery img {
    clear: both;
    float: left;
    height: auto;
    margin-bottom: 2%;
    transition: opacity 0.3s ease 0s;
    width: 100%;
}

</style>

这篇关于PHP在列中显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！