我最近在四个等宽的框中很好地显示了一个图片库,其中图像为 100% 宽度、清除和高度自动。这工作得很好,除了我在页面上调用了数百张图像。
我试图获得相同的效果,只使用一个简短的 php 脚本来调用图像并显示它们。
Here is a link to the gallery before
And here is a link to the site which I am trying to achieve the 4 column fetch thing on.
还有我目前的php代码
<?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 在列中显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23805015/