带有json的随机图片库？

问题描述 投票：0回答：1

我正在尝试使用json文件对随机图像进行无穷大滚动。我成功了，问题是，这应该在没有任何服务器的情况下都能正常工作。因此，我试图将所有信息放入“ var”中，但是现在这些图像不再加载。有没有办法不需要服务器就可以修复它？这是我到目前为止的内容：

HTML：


<body>
    <main>

    </main>

    <div class="container">
        <div class="text-center">
            <button onclick="setTimeout(getData,2000); return false" type="submit" id="button" value="Load more" class="button">
                    Load more</button>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5/jquery.min.js"></script>
    <script src="main.js"></script>
    <script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
</body>

现在，所有用var imgJson编写的内容都在images.txt中。现在，我已经看到其他人在var中编写它，所以我做到了，但是没有用。公平地说，昨天我才刚刚了解JSON，所以我很陌生。

JS：

// const URL = "images/images.txt"
var imgJson = {"items":[{
    "id": 1,
    "img": 'https:\/\/picsum.photos\/200\/300'
}, {
    "id": 2,
    "img": 'https:\/\/picsum.photos\/201\/301'
},
{
    "id": 3,
    "img": 'https:\/\/picsum.photos\/202\/302'
},
{
    "id": 4,
    "img": 'https:\/\/picsum.photos\/203\/303'
}
]}

getData();

function getData(){

    let main = document.querySelector("main");
    console.log("fetch some data");
    fetch(imgJson)
    .then(response => response.json())
    .then(data => {
        data.items.forEach(item => {
            let fig = document.createElement("figure");
            let img = document.createElement("img");    
            img.src = item.img;

            fig.appendChild(img);
            main.appendChild(fig);
        });
    });

}

$(document).ready(function(){
    $(".button").click(function(){
        $(this).addClass("active");

        setTimeout(function(){
            $(".button").removeClass("active");
        },2000);
    });
});

CSS（仅图像部分）：


main {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 1rem;
        width: 80vw;
        margin: auto;
        grid-template-rows: auto;
      }


main figcaption {
    font-size: 1rem;
    font-family: inherit;
}
main img {
    width: auto;
    height: auto;
    max-width: 100%;
}
javascript json random image-gallery
1个回答
0
投票

// const URL = "images/images.txt"
var imgJson = {
  "items": [{
      "id": 1,
      "img": 'https:\/\/picsum.photos\/200\/300'
    }, {
      "id": 2,
      "img": 'https:\/\/picsum.photos\/201\/301'
    },
    {
      "id": 3,
      "img": 'https:\/\/picsum.photos\/202\/302'
    },
    {
      "id": 4,
      "img": 'https:\/\/picsum.photos\/203\/303'
    }
  ]
}

getData();

function getData() {

  let main = document.querySelector("main");
  console.log("fetch some data");
  imgJson.items.forEach(item => {
    let fig = document.createElement("figure");
    let img = document.createElement("img");
    img.src = item.img;

    fig.appendChild(img);
    main.appendChild(fig);
  });
}
main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1rem;
  width: 80vw;
  margin: auto;
  grid-template-rows: auto;
}

main figcaption {
  font-size: 1rem;
  font-family: inherit;
}

main img {
  width: auto;
  height: auto;
  max-width: 100%;
}
<main>
</main>
<div class="container">
  <div class="text-center">
    <button onclick="setTimeout(getData,2000); return false" type="submit" id="button" value="Load more" class="button">Load more</button>
  </div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.