我的服务器上有一个名为“上传”的目录。里面充满了用户上传的图像。每次有人上传图像时,都会将其添加到目录中。我正在使用css属性display: grid;
来使图像处于良好的网格中。这是基本布局:
.imgSet {
float: left;
display: block;
margin-left: auto;
margin-right: auto;
}
.imgSet div {
float: left;
width: 30%;
background-color: #333;
border: 2px solid lightgrey;
}
.downloadImg {
width: 95%;
display: block;
margin-left: auto;
margin-right: auto;
}
<div class="imgSet">
<div>
<a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
</div>
<div>
<a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
</div>
<div>
<a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
</div>
<br>
<div>
<a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
</div>
<div>
<a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
</div>
<div>
<a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
</div>
<br>
<div>
<a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
</div>
<div>
<a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
</div>
<div>
<a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
</div>
<br>
</div>
我希望Uploads目录中的每个图像都可以创建一个新的div,a和image标记。标记的src属性以及href属性必须包含url / Uploads / imageurl.extension以及包含相同的类。如果有一种简单的方法可以用javascript做到这一点,对我的页面有很大帮助。预先谢谢你。
答案 0 :(得分:2)
我直接通过javascript添加了div。我遍历了链接数组以创建div。我对CSS并没有做太多事情。每行有3张图片。如果您需要其他功能,只需在javascript中更改css和数组即可编辑图像链接。
const links = ['https://jeffthecow.com/assets/images/jeffinSpace.jpg', 'https://jeffthecow.com/assets/images/jeffinSpace.jpg', 'https://jeffthecow.com/assets/images/jeffinSpace.jpg', 'https://jeffthecow.com/assets/images/jeffinSpace.jpg', 'https://jeffthecow.com/assets/images/jeffinSpace.jpg'];
for (link of links) {
document.getElementById('container').innerHTML += `<div>
<a href=${link}>
<img src=${link} alt="jeffthecow" width=120 />
</a>
</div>`;
}
#container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div id='container'></div>
</body>
</html>