如何在 Api 调用上使用引导程序创建 3 X 3（Col X Row）的画廊

Question

为 UI 使用 Bootstrap 并调用 api 以 3X3 显示图像 [Col X Row] 使用 javascript 异步等待。 但是在列中获得 3 个图像而不是 3 X 3 网格布局

它可以使用 Grid Columns 或使用 Flex In bootstrap 4

我正在使用 Dog Api 进行原型设计，用于演示目的。

点击按钮时，它将在引导程序的网格布局中显示前 15 个图像

下面没有得到正确的结果 image1 是我得到的输出。 图片1

但它应该在网格中显示为具有不同图像的 Image2 图片2

const API_URL = 'https://dog.ceo/api/breeds/image/random/20';
const randomImgDogs = document.querySelector('.random-dogs');
const loadingImg = document.querySelector('.loading');
const getButton = document.querySelector('.getRandomDog');

loadingImg.style.display = 'none';

async function getRandomDogs() {
  randomImgDogs.innerHTML = '';
  loadingImg.style.display = '';
  const response = await fetch(API_URL);
  const json = await response.json();
  console.log(json.message);
  json.message.forEach(dogImage => {
    randomImgDogs.innerHTML += `
                    <div class="container-fluid">
                        <div class="d-flex flex-row flex-wrap justify-content-center">
                            <div class="d-flex flex-column">
                                <img src="${dogImage}" class="img-fluid">
                            </div>
                        </div>
                    </div>`;
  });
  loadingImg.style.display = 'none';
}
getButton.addEventListener('click', getRandomDogs);

img {
  margin: 5px;
}

.flex-column {
  max-width: 260px;
}

a svg {
  font-size: 30px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
<div class="jumbotron text-center">
  <h1 class="display-4 font-weight-bold text-center">Random Dogs</h1>
  <p class="lead">Click on Get to see some random dogs Images!</p>


  <a class="btn btn-primary btn-lg getRandomDog " href="#" role="button">Get Random Dogs Images
            <svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor"
                xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                    d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"
                    clip-rule="evenodd" /></svg>
        </a>
</div>
<!--  -->
<!-- loading  -->
<div class="loading text-center">
  <div class="spinner-border text-dark" style="width: 3rem; height: 3rem;" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

<!-- loading ends -->


<!-- main  start -->
<div class="random-dogs">

</div>
<!-- main ends -->

Answer 1

您正在循环整个容器而不是项目本身。

你正在循环的整个容器：

<div class="container-fluid">
   <div class="d-flex flex-row flex-wrap justify-content-center">
       <div class="d-flex flex-column"> <!-- what you should loop. i.e duplicate  -->
           <img src="${dogImage}" class="img-fluid">
       </div>
   </div>
</div>

你应该循环的内容（项目）：

<div class="d-flex flex-column">
   <img src="${dogImage}" class="img-fluid">
</div>

您可以将代码重构为以下代码：

async function getRandomDogs() {
  const createParentContainer = children => (
    `<div class="container-fluid">
        <div class="d-flex flex-row flex-wrap justify-content-center">
         ${children}
        </div>
     </div>`
  );
  randomImgDogs.innerHTML = '';
  loadingImg.style.display = '';
  const response = await fetch(API_URL);
  const json = await response.json();
  console.log(json.message);
  const children = '';
  json.message.forEach((dogImage) => {
    children += `<div class="d-flex flex-column">
                    <img src="${dogImage}" class="img-fluid">
                </div>`;
  });
  randomImgDogs.innerHTML += createParentContainer(children);
  loadingImg.style.display = 'none';
}