• 瀑布流布局2

    要实现瀑布流布局中让图片先排满第一行再排第二行，你可以使用 CSS 的多列布局（CSS multi-column layout）来控制。目前你的布局使用了 column-count 和 column-gap 来定义列数和列之间的间隙，但这会导致在不同列之间平均分布元素。

    要实现你的需求，你可以考虑以下方法：

    • 使用 Flexbox 布局：将容器 #grid-container 的 display 属性设置为 display: flex;，然后将子项 .item 添加到容器中。这样，子项将按照默认的 flex 行为依次排列，先排第一行再排第二行。示例代码如下：

    在上面的示例中，我们使用 Flexbox 布局将子项按照你的要求排列。你可以根据需要进一步调整列数和间隙。

    • 使用 CSS Grid 布局：另一种方法是使用 CSS Grid 布局，通过定义网格行和列来排列元素。这种方法更加灵活，允许你精确控制每个元素的位置。示例代码如下：
       

    这两种方法都可以实现你的需求，你可以根据项目的具体要求选择其中之一。

    案例：实现以下瀑布流布局，并且序号是先横向排列在换行排第二行
            

    代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <style>
    10.     #grid-container {
    11.         display: grid;
    12.         grid-template-columns: repeat(2, 1fr); /* 定义三列网格 */
    13.         grid-gap: 10px; /* 列之间和行之间的间隙 */
    14.         width: 800px;
    15.         border: 2px solid pink;
    16.     }
    17.  
    18.     .item {
    19.         margin-bottom: 10px; /* 行之间的间隙 */
    20.         height: auto; /* 自动计算高度 */
    21.         background-size: cover;
    22.         background-position: center;
    23.         text-align: center;
    24.     }
    25.  
    26.     .item:nth-child(2n) {
    27.         height: 12em;
    28.     }
    29.  
    30.     .item:nth-child(3n) {
    31.         height: 14em;
    32.     }
    33.  
    34.     .item:nth-child(4n) {
    35.         height: 16em;
    36.     }
    37.  
    38.     .item:nth-child(5n) {
    39.         height: 18em;
    40.     }
    41.  
    42.     .item:nth-child(6n) {
    43.         height: 20em;
    44.     }
    45.  
    46.     .item:nth-child(7n) {
    47.         height: 22em;
    48.     }
    49.  
    50.     .item:nth-child(8n) {
    51.         height: 24em;
    52.     }
    53. style>
    54. <body>
    55.     <div id="grid-container">
    56.     div>
    57. body>
    58. <script>
    59.     const gridContainer = document.getElementById('grid-container')  
    60.     for(let i=0;i<7;i++){
    61.         const item = document.createElement('div');
    62.         const textNode = document.createTextNode(`${i}`)
    63.         item.appendChild(textNode)
    64.         item.classList.add("item"); 
    65.         item.style.backgroundImage = `url(https://picsum.photos/800/600?random=${i})`
    66.         gridContainer.appendChild(item)
    67.  
    68.     }
    69. script>
    70. html>

  • 相关阅读:
    java面试题 --- Mybatis&Hibernate
    成都瀚网科技有限公司抖音小店：创新营销引领电商潮流
    为什么vue3要选用proxy，好处是什么？
    微软发现影响 Linux 和 macOS系统的 ncurses 库漏洞
    世界级黑客丨电脑犯罪界的汉尼拔
    Pod控制器-ReplicaSet(RS)
    每日OJ题_二叉树dfs⑥_力扣257. 二叉树的所有路径
    【React】redux和React-redux
    Vue项目后台部分5，ECharts，Home首页的制作，权限管理的菜单权限的相关逻辑
    java毕业设计花漾网在线商城（附源码、数据库）
  • 原文地址：https://blog.csdn.net/T3165919332/article/details/132811811