css实现瀑布流

最新推荐文章于 2024-07-10 13:54:40 发布

Wombat-

最新推荐文章于 2024-07-10 13:54:40 发布

阅读量809

点赞数 9

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/haluodepaopao/article/details/135996286

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <title>Document</title>
  <style>
    .container {
      display: flex;
      flex-flow: column wrap;
      align-content: space-between;
      /* 容器必须有固定高度
      * 且高度大于最高的列高 */
      height: 660px;
      /* 非必须 */
      background-color: #f7f7f7;
      border-radius: 3px;
      padding: 20px;
      width: 60%;
      margin: 40px auto;
      counter-reset: items;
    }

    .item {
      width: 32%;
      /* 非必须 */
      position: relative;
      margin-bottom: 2%;
      border-radius: 3px;
      background-color: #a1cbfa;
      border: 1px solid #4290e2;
      box-shadow: 0 2px 2px rgba(0,90,250,0.05),
        0 4px 4px rgba(0,90,250,0.05),
        0 8px 8px rgba(0,90,250,0.05),
        0 16px 16px rgba(0,90,250,0.05);
      color: #fff;
      padding: 15px;
      box-sizing: border-box;
    }

    /* 仅用于打印数字 */
    .item::before {
      counter-increment: items;
      content: counter(items);
    }

    /* 将内容块重排为3列 */
    .item:nth-child(3n+1) { order: 1; }
    .item:nth-child(3n+2) { order: 2; }
    .item:nth-child(3n)   { order: 3; }

    /* 强制换列 */
    .container::before,
    .container::after {
      content: "";
      flex-basis: 100%;
      width: 0;
      order: 2;
    }

    body { font-family: sans-serif; }
    h3 { text-align: center; }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <div class="item" style="height: 140px"></div>
      <div class="item" style="height: 190px"></div>
      <div class="item" style="height: 170px"></div>
      <div class="item" style="height: 120px"></div>
      <div class="item" style="height: 160px"></div>
      <div class="item" style="height: 180px"></div>
      <div class="item" style="height: 140px"></div>
      <div class="item" style="height: 150px"></div>
      <div class="item" style="height: 170px"></div>
      <div class="item" style="height: 170px"></div>
    </div>
  </div>

  <script>
    const {createApp} = Vue
    createApp({
      data(){
        return {
          list:[
            {
              id: 0,
              content: '出或属及然立物区际团干林品号界织声政自青',
              img: 'https://picsum.photos/200/335?random=58'
            },
            {
              id: 1,
              content: '规社需别至打她南气提现身记指今化油百积体',
              img: 'https://picsum.photos/200/349?random=761'
            },
            {
              id: 2,
              content: '许题状世声程管么物社社同圆了而备公所料青',
              img: 'https://picsum.photos/200/442?random=71'
            },
            {
              id: 3,
              content: '然立物区际团干林品号界织声政自青参从运统',
              img: 'https://picsum.photos/200/322?random=312'
            },
            {
              id: 4,
              content: '团干林品号界织声政自青参从运统类半口识高',
              img: 'https://picsum.photos/200/399?random=460'
            },
            {
              id: 5,
              content: '例导向王活中叫社就江工外以气图专律北多建',
              img: 'https://picsum.photos/200/446?random=898'
            },
            {
              id: 6,
              content: '六思断名过增思复许石查再生斯法派带改叫向',
              img: 'https://picsum.photos/200/495?random=460'
            },
            {
              id: 7,
              content: '可定开京出或属及然立物区际团干林品号界织',
              img: 'https://picsum.photos/200/451?random=389'
            },
            {
              id: 8,
              content: '定开京出或属及然立物区际团干林品号界织声',
              img: 'https://picsum.photos/200/374?random=216'
            },
            {
              id: 9,
              content: '提现身记指今化油百积体量但国参根书为影从',
              img: 'https://picsum.photos/200/339?random=426'
            },
            {
              id: 10,
              content: '问任写主速情及极需和始亲点酸七建红放周养',
              img: 'https://picsum.photos/200/400?random=22'
            },
            {
              id: 11,
              content: '参从运统类半口识高多选石空改流通工来万北',
              img: 'https://picsum.photos/200/468?random=373'
            },
            {
              id: 12,
              content: '习七准导离每见里可求产着影却响百产际片院',
              img: 'https://picsu m.photos/200/442?random=903'
            },
            {
              id: 13,
              content: '划子要步百图引美须成展党复任场走许就素受',
              img: 'https://picsum.photos/200/416?random=874'
            },
            {
              id: 14,
              content: '上是题快而被己老制米制往例导向王活中叫社',
              img: 'https://picsum.photos/200/421?random=219'
            },
            {
              id: 15,
              content: '开京出或属及然立物区际团干林品号界织声政',
              img: 'https://picsum.photos/200/427?random=909'
            }
          ]
        }
      }
    }).mount('#app')
  </script>
</body>
</html>