时间戳

首页 > 解决方案 > 无论连续 div 的最大大小如何，如何在网格中独立平铺 div？

javascript - 无论连续 div 的最大大小如何，如何在网格中独立平铺 div？

问题描述

我想平铺这样的图像：这个 我最终得到的是：这个。
这是我的 HTML、CSS 和 JavaScript 代码：

window.onload = newWindow ;

function newWindow() {
    var data = JSON.parse(phrases);
    console.log(data);

    for (let i = 0 ; i < data.length ; i++) {
        let column = document.createElement("DIV"); 
        column.className = "column";
        let card = document.createElement("DIV");
        var br = document.createElement("br");
        card.className = "card";

        let theme =  `theme : ` + data[i].theme;
        let content = document.createTextNode(theme)
        card.appendChild(content);
        card.appendChild(br);

        var br1 = document.createElement("br");

        let sourceText = `sourceText : ` + data[i].sourceText;
        content = document.createTextNode(sourceText);
        card.appendChild(content);
        card.appendChild(br1);

        var br2 = document.createElement("br");

        let translation = `translation : ` + data[i].translation;  
        content = document.createTextNode(translation);
        card.appendChild(content);
        card.appendChild(br2);

        column.appendChild(card);
        document.getElementById("cards-container").appendChild(column);
    }
}
body {
    font-family: Arial, Helvetica, sans-serif;
}
.row{
    display: grid;
    grid-template-columns: 33% 33% 33%;
}
.column {
    margin: 10px;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 10px;
    text-align: center;
    background-color: #f1f32f;
}
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
<!DOCTYPE html>
<html lang>
    <head>
    <title>Greeting Cards</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
        <script src="./scripts.js"></script> 
        <script type="text/javascript" src="Phrases.json"></script>
    </head>
 
    <body>
    <div id="cards-container" class="row">

    </div>
    </body>
</html>

数据来自JSON我成功解析的外部文件。 如何调整我的 CSS 以便我可以将我div的 s 平铺在列中，而不管div第一张图片中的最大尺寸是多少？
我需要 3 列。
我的问题完全是关于定位第一张图片中的元素。我想要一个原生 JavaScript 和/或 JQuery 和 CSS 和 HTML 的解决方案，而不是像 Bootstrap 这样的任何其他框架。

标签： javascriptjqueryhtmlcss

解决方案

所以我认为最简单的解决方案是 flexbox，尽管更强大的解决方案是 javascript，它的算法可以根据所需的列计算空间。

我无权访问您的 JSON，但在下面您会发现一个与您所拥有的结构非常相似的结构：

<div class="wrapper">
  <div class="card">
    This is a card 01
  </div>
  <div class="card">
    This is a card 01
  </div>
  <div class="card">
    This is a card 01
  </div>
  <div class="card">
    This is a card 01
  </div>
  <div class="card">
    This is a card 01
  </div>
  <div class="card">
    This is a card 02
  </div>
  <div class="card">
    This is a card 03
  </div>
  <div class="card">
    This is a card 04<br />
    Its bigger

  </div>
  <div class="card">
    This is a card 05
    <br />
    Its bigger
    <br />
    Its bigger
    <br />
    Its bigger
  </div>
  <div class="card">
    This is a card 06
    <br />
    Its bigger much bigger
  </div>
  <div class="card">
    This is a card 07
  </div>
  <div class="card">
    This is a card 08
    <br />
    Its bigger
    <br />
    Its bigger
  </div>
  <div class="card">
    This is a card 09
    <br />
    Its bigger
    <br />
    Its bigger
    <br />
    Its bigger
  </div>
</div>

用一点css：

.wrapper {
  width: 100%;
  max-height: 200px;
  display: flex;
  flex-flow: column wrap;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 10px;
    text-align: center;
    background-color: #f1f32f;
    margin: 5px;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

flexbox 将尝试填充垂直空间，当没有空间时，它会水平中断并尝试再次垂直填充，依此类推。所以网格将基于你的包装 div 的高度。您可以在此处找到一个工作示例：

https://jsfiddle.net/rogerssampaio/yp6xqh3a/8/

推荐阅读