元素传播

Question

我创建了一个元素填充器，它采用某些元素，将它们包装在 HTML 标记中并将它们附加到容器中。我遇到的问题，如果有的话，更令人讨厌的是，每个要加载的图像都必须自动输入。有没有办法从文件夹中检索所有图像并将它们加载到数组中？

我有这个代码，它可以工作，但需要手动输入：

    $(window).on('load', function () {

    var gallery = document.getElementById("grid");
    var images = [
        "./imgs/galeria/0.jpg",
        "./imgs/galeria/1.jpg",
        "./imgs/galeria/2.jpg",
        "./imgs/galeria/3.jpg",
        "./imgs/galeria/4.jpg",
        "./imgs/galeria/7.jpg",
        "./imgs/galeria/6.jpg",
        "./imgs/galeria/5.jpg",
        "./imgs/galeria/8.jpg",
        "./imgs/galeria/9.jpg",
        "./imgs/galeria/10.jpg",
        "./imgs/galeria/11.jpg",
        "./imgs/galeria/12.jpg",
        "./imgs/galeria/13.jpg",
        "./imgs/galeria/14.jpg",
        "./imgs/galeria/15.jpg",
        "./imgs/galeria/16.jpg",
        "./imgs/galeria/17.jpg",
        "./imgs/galeria/18.jpg",
        "./imgs/galeria/19.jpg",
        "./imgs/galeria/20.jpg"
    ];

    for (var i = 0; i < images.length; i++) {

        var thumbnailWrapper = document.createElement("div");

        thumbnailWrapper.className = "thumbnail-wrapper";

        var thumbnail = document.createElement("div");

        thumbnail.className = "thumbnail";

        thumbnail.dataset.source = "./imgs/galeria/" + i + ".jpg";

        thumbnailWrapper.appendChild(thumbnail);

        gallery.appendChild(thumbnailWrapper);
    }

    var thumb = document.getElementsByClassName('thumbnail');
    // console.log(thumb);

    for (j = 0; j < images.length; j++) {
        // $(thumb[j]).attr('src', images[j]);
        $(thumb[j]).css('background-image', 'url(./imgs/galeria/thumbs/' + j + 'tbm.jpg)');
        // console.log(j);
        // console.log(images[j]);
    }

您可以在我在“galeria”部分制作的website 中看到正在运行的脚本。

编辑：也许有 ajax 的东西？我想让 php 排除在等式之外
EDIT2：我想用 ajax 来做，现在这是正确的代码

Answer 1

您不能使用客户端 JavaScript 扫描服务器上的文件夹。如果您不知道该文件夹包含哪些文件，那么单独使用 AJAX 甚至无法正常工作。

您必须使用服务器端代码（例如 PHP）来查找文件夹中的所有文件，然后它们以某种方式将它们传递给客户端。这是我看到的唯一方式。

这种方法可行：

$images = glob('imgs/galeria/*.jpg');

echo '<div id="grid">';

foreach ($images as $key => $image) {
  echo '<div class="thumbnail-wrapper">';
  echo '<div 
    class="thumbnail" 
    data-source="' . $image . '"
    style="background-image: url(imgs/galeria/thumbs/' . $key . 'tbm.jpg)"
    ></div>';
  echo '</div>';
}

echo '</div>';

我希望这能像你的 JavaScript 代码一样工作。