瀑布流布局 grid实现（三）

最新推荐文章于 2023-11-15 17:23:07 发布

ThawingX

最新推荐文章于 2023-11-15 17:23:07 发布

阅读量3k

点赞数 3

分类专栏： CSS Inspiration 文章标签： html 前端 javascript css3 css

本文链接：https://blog.csdn.net/qq_48626600/article/details/123004836

版权

CSS Inspiration 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何利用CSS Grid布局来创建一个静态的瀑布流效果，对比了传统的Flex和Column方法。通过设置不同的grid-row和grid-column，实现了各元素在网格中的定位。此外，还展示了如何生成不同大小的子元素，并给出了相应的SCSS代码示例，以及最终的视觉效果。

摘要由CSDN通过智能技术生成

关键点

通过grid-row 控制每一个item 的大小

相对之前的flex，和column实现瀑布流布局，grid是静态的。

附上之前实现瀑布流的链接

代码

html

<div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
</div>

scss

// 实现瀑布流
.container {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

.item {
  &:nth-child(1) {
    grid-column: 1;
    grid-row: 1/3;
  }
  &:nth-child(2) {
    grid-column: 2;
    grid-row: 1/4;
  }
  &:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
  }
  &:nth-child(4) {
    grid-column: 4;
    grid-row: 1/3;
  }
  // ...类似
  
//
// 生成大小不一的子元素
$count: 10;
@function randomNum($max, $min: 0, $u: 1) {
  @return ($min + random($max)) * $u;
}

@function randomColor() {
  @return rgb(randomNum(255), randomNum(255), randomNum(255));
}

@for $i from 1 to $count + 1 {
  .item:nth-child(#{$i}) {
    position: relative;
    background-color: randomColor();
    margin: 0.5vw;

    &::after {
      content: "#{$i}";
      position: absolute;
      color: #fff;
      font-size: 2vw;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

}