首页 > 代码库 > 瀑布流

瀑布流

就是利用css3中的column-width规定列的宽度

<!DOCTYPE HTML><html><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>瀑布流</title>    <style>        .container {            column-width: 160px;            column-gap: 5px;        }        .waterfall {            border-radius: 5px;            background: #D9D9D9;            border: #CCC 1px solid;            display: inline-block;            width: 100%;            margin-top: 5px;            height: 200px;        }        .spe {            border-radius: 5px;            background: #D9D9D9;            border: #CCC 1px solid;            display: inline-block;            width: 100%;            margin-top: 5px;            height: 66px;        }    </style></head><body><div class="container">    <div class="waterfall"></div>    <div class="waterfall"></div>    <div class="spe"></div>    <div class="waterfall"></div>    <div class="waterfall"></div>    <div class="spe"></div>    <div class="waterfall"></div>    <div class="waterfall"></div>    <div class="spe"></div>    <div class="waterfall"></div>    <div class="spe"></div>    <div class="waterfall"></div>    <div class="waterfall"></div>    <div class="spe"></div>    <div class="waterfall"></div>    <div class="waterfall"></div>    <div class="waterfall"></div>    <div class="spe"></div>    <div class="waterfall"></div>    <div class="waterfall"></div>    <div class="waterfall"></div>    <div class="spe"></div>    <div class="waterfall"></div>    <div class="waterfall"></div>    <div class="waterfall"></div>    <div class="spe"></div>    <div class="waterfall"></div>    <div class="waterfall"></div>    <div class="waterfall"></div>    <div class="waterfall"></div>    <div class="waterfall"></div>    <div class="spe"></div>    <div class="waterfall"></div>    <div class="waterfall"></div></div></body></html>

  

瀑布流