纯css 利用多栏布局实现瀑布流简略版

最新推荐文章于 2024-07-24 15:34:54 发布

cjFrontEnd

最新推荐文章于 2024-07-24 15:34:54 发布

阅读量348

点赞数

分类专栏： html 文章标签：瀑布流多栏布局

本文链接：https://blog.csdn.net/cjFrontEnd/article/details/88063685

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

由于工作需要，今天尝试用纯css实现了一下瀑布流的布局，实现的原理是利用多栏布局配合break-inside属性，此种方式的实现代码非常简单，也不需要依赖任何插件，下面先看一下实现的效果图：

下面贴上实现代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>瀑布流</title>
       <style type="text/css">
           * {
               margin: 0px;
               height: 0px;
           }
           .flow-box{
               column-count:4;
               column-gap: 15px;
               width: 100%;

           }
           div {
               width: 300px;
               float: left;
               break-inside: avoid;
               box-sizing: border-box;
               margin: 10px;
           }
           #div1 {
               background: #4682B4;
               height: 100px;
           }
           #div2 {
               background: #4452B4;
               height: 350px;
           }
           #div3 {
               background: #4696B4;
               height: 250px;
           }
           #div4 {
               background: #4232B4;
               height: 180px;
           }
           #div5 {
               background: #7882B4;
               height: 100px;
           }
           #div6 {
               background: #4656B4;
               height: 250px;
           }
           #div7 {
               background: #4082B4;
               height: 300px;
           }
           #div8 {
               background: #468267;
               height: 120px;
           }
           #div9 {
               background: #463454;
               height: 180px;
           }
           #div10 {
               background: #8982B4;
               height: 220px;
           }

       </style>
   </head>
   <body>
       <section class="flow-box">
           <div id="div1">1</div >
           <div id="div2">2</div >
           <div id="div3">3</div >
           <div id="div4">4</div >
           <div id="div5">5</div >
           <div id="div6">6</div >
           <div id="div7">7</div >
           <div id="div8">8</div >
           <div id="div9">9</div >
           <div id="div10">10</div >
       </section>

   </body>
</html>