引导卡堆叠效果答案

【问题标题】：Bootstrap Cards Stacking Effect引导卡堆叠效果
【发布时间】：2021-03-02 20:51:07
【问题描述】：

我正在尝试基于 API 制作电视节目搜索器。功能已全部完成，但我想知道您是否可以帮我将这些 Bootstrap 卡堆叠在一起。我不喜欢字里行间的空白。我有点希望它看起来像 unsplash.com 图片库，其中每张图片都可以堆叠，无论大小。谢谢。

enter image description here

我只创建了一个具有行类的 div，我通过 javascript 添加了 col-4 类的 div，每行有 4 个电视节目。我根据从 API 接收到的数据使用 col-4 类创建 div。下面我有带有代码的 html、css 和 js 文件。

console.log('Connected')
const form = document.querySelector('#searchForm');
const imgs = document.querySelector('#imgsDisplay')
const search = document.querySelector('#searchDisplay')
const row = document.querySelector('#row')

form.addEventListener('submit',async function (e) {
    e.preventDefault();
    row.innerHTML='';
    const searchTerm = form.elements.query.value;
    const config = { params: { q: searchTerm } }
    const res = await axios.get(`http://api.tvmaze.com/search/shows`, config);
    search.textContent = form.elements.query.value
    makeImages(res.data)
    form.elements.query.value = '';
    
})


const makeImages = (shows) => {
    
    for (let result of shows) {
        if (result.show.image) {
            const col = document.createElement('div')
            col.classList.add('col-3', 'h-100')

            const imgDiv = document.createElement('div')
            imgDiv.classList.add('card', 'cardStyle', 'm-0')

            const img = document.createElement('IMG');
            img.classList.add('card-img-top')
            img.src = result.show.image.medium;


            const label = document.createElement('h5')
            label.textContent = result.show.name;
            label.classList.add("card-title")

            const text = document.createElement('p')
            text.classList.add('card-text')
            text.innerHTML = result.show.summary;

            const cardBody = document.createElement('div')
            cardBody.classList.add('card-body')

            const showSite = document.createElement('a')
            showSite.href = result.show.officialSite;
            showSite.textContent = 'Official Website'
            showSite.classList.add('btn', 'btn-outline-success')

            cardBody.append(label)
            cardBody.append(text);
            cardBody.append(showSite)

            imgDiv.append(img);
            imgDiv.append(cardBody);
            col.append(imgDiv);
            row.append(col);
            imgs.append(row);
        }
    }
}

#searchForm{
    width: 40%;
}

.cardStyle{
    width: 18rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TV Show Search</title>
    <link rel="stylesheet" href="app.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</head>

<body>

    <section>
        <div class="container d-flex flex-column align-items-center">
            <h1 class="display-1">TV Show Search</h1>
            <form id="searchForm">
                <div id="inputForm" class="container input-group mb-3">
                        <input id="search" type="text" class="form-control" placeholder="TV Show Title" aria-label="TV Show Title" aria-describedby="button-addon2" name="query">
                        <button class="btn btn-outline-success" id="button-addon2">Search</button>
                </div>
            </form>
            
        </div>
    </section>
    
    <section>
        <div class="container ms-1 mt-5">
            <h1 id='resultsHeader' class="display-3">Results for: <b><span id="searchDisplay"></span></b></h1>
        </div>
    </section>

    <section id="imgsDisplay" class="container mt-5">
        <div id = "row" class="row d-flex">

        </div>
    </section>
  
    
    <script src="app.js"></script>
</body>

</html>

【问题讨论】：

标签： javascript html css api bootstrap-4

【解决方案1】：

使用 overflow:hidden 和 height 修复它会使你的卡片高度相同；如果你得到额外的文字，它会消失；

【讨论】：