Question

我的服务器上有一个名为“上传”的目录。里面充满了用户上传的图像。每次有人上传图像时，都会将其添加到目录中。我正在使用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做到这一点，对我的页面有很大帮助。预先谢谢你。

Answer 1

我直接通过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>

自动显示HTML页面上目录中的所有图像

1 个答案: