利用css实现简单的瀑布流样式

最新推荐文章于 2024-09-09 12:23:47 发布

铁锅小菜炖大鹅

最新推荐文章于 2024-09-09 12:23:47 发布

阅读量245

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_63477921/article/details/125721785

版权

css部分代码

 <div class="shell">
      <div class="image"><img src="./image/1.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/10.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/11.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/12.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/13.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/14.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/2.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/3.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/3.png" alt=""></div>
      <div class="image"><img src="./image/4.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/4.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/4.png" alt=""></div>
      <div class="image"><img src="./image/5.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/6.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/6.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/7.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/7.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/8.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/9.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/13.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/10.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/3.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/13.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/5.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/7.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/12.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/4.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/7.png" alt=""></div>
      <div class="image"><img src="./image/13.jpg.jpg" alt=""></div>
      <div class="image"><img src="./image/6.jpg.jpg" alt=""></div>
   </div>

css部分代码

   body{
      background-color: rgba(130, 140,250, 0.2);
      display: flex;
      justify-content: center;
   }
   .shell{
     max-width: 1300px;
      column-count: 5;
    column-gap: 15px;
   }
   .image{
      margin-bottom: 15px;
   
   }
   .image  img{
      width: 100%;
   }
   @media(max-width:1200px){
      .shell{
         column-count: 4;
      }
   }
   @media(max-width:850px){
      .shell{
         column-count: 3;
      }
   }
   @media(max-width:600px){
      .shell{
         column-count: 2;
      }
   }