Vanilla js bootstrap布局问题

我试图从Pixabay API获取图像数据，我想在那里显示编辑器的选择图像。
这个问题是关于布局。我试图在每行显示3或4个图像，但布局是打破。我不想妥协的React。
理想情况下，3列应该显示在每一行。问题是在第一个3列之后，在第二行，列没有正确对齐。事实上，甚至没有在每行中动态添加。我试图在html和模板文字中添加。但没有任何效果。

let editorChoice = document.querySelector('.editorchoice')
async function getImg() {
  let imgData = await fetch('https://pixabay.com/api/?key=12334&editors_choice')
  let imgRaw = await imgData.json()
  console.log(imgRaw)
  let itemData = imgRaw.hits
  itemData.map((item) => {
    let imgId = item.id
    let imgType = item.type
    let imgPreview = item.previewURL
    let imgTag = item.tags
    editorChoice.innerHTML += `<div class="col-lg-4 card">
    <img src="${imgPreview}" class="img-responsive center-block" alt="${imgTag}"
    </div>
    <p class="text-center">${imgTag}</p>`
  })
}
getImg()

个字符

首先，您当前使用的是Tailwind CSS，而不是Bootstrap。请确保您使用的是最新版本的Tailwind，将<link />替换为：

<script src="https://cdn.tailwindcss.com"></script>

字符串
接下来，要将它们显示在网格中，请使用Tailwind中内置的.grid和.grid-cols类：

<div id="editorChoice" class="grid grid-cols-4">
  <!-- Images go in here -->
</div>

型
要添加图像本身，而不是使用.innerHTML，理想情况下应该使用document.createElement()和document.appendChild()：

async function fetchImage() {
  let img = await fetch(
    "https://pixabay.com/api/?key=12334&editors_choice",
  ).json().hits;

  img.map((item) => {
    let container = document.createElement("div");
  
    let element = document.createElement("img");
    element.src = item.previewURL;
    element.alt = item.tags;

    container.appendChild(element);

    let label = document.createElement("p");
    let labelText = document.createTextNode(item.tags);
    label.appendChild(labelText);    
    
    container.appendChild(label);
    
    document.getElementById("editorChoice").appendChild(container)
  });
}

fetchImage();

型
在这里，我们循环返回的结果，并创建各种元素，使它们都显示在一个4列网格中。
下面是一个使用Lorem Picsum而不是Pixabay的可运行代码片段：

async function fetchImage() {
  let img = [
    {
      previewURL: `https://picsum.photos/1920/1080?random=1`,
      tags: "A Picture",
    },
    {
      previewURL: `https://picsum.photos/1920/1080?random=2`,
      tags: "A Picture",
    },
    {
      previewURL: `https://picsum.photos/1920/1080?random=3`,
      tags: "A Picture",
    },
    {
      previewURL: `https://picsum.photos/1920/1080?random=4`,
      tags: "A Picture",
    },
    {
      previewURL: `https://picsum.photos/1920/1080?random=5`,
      tags: "A Picture",
    },
    {
      previewURL: `https://picsum.photos/1920/1080?random=6`,
      tags: "A Picture",
    },
  ];

  img.map((item) => {
    let container = document.createElement("div");

    let element = document.createElement("img");
    element.src = item.previewURL;
    element.alt = item.tags;

    container.appendChild(element);

    let label = document.createElement("p");
    let labelText = document.createTextNode(item.tags);
    label.appendChild(labelText);

    container.appendChild(label);

    document.getElementById("editorChoice").appendChild(container);
  });
}

fetchImage();

<script src="https://cdn.tailwindcss.com"></script>
<h3>Editor's Choice</h3>
<div id="editorChoice" class="grid grid-cols-4">
  <!-- Images go in here -->
</div>

Vanilla js bootstrap布局问题

1条答案

相关问题

热门标签

最新问答