css3实现瀑布流布局

作者: 骑代码奔小康 | 来源:发表于2019-11-23 17:26 被阅读0次

瀑布流布局的学习
7. 多列
瀑布流布局_木桶布局
瀑布流布局
瀑布流布局
瀑布流和懒加载结合
「实战」蘑菇街 PC 端首页，瀑布流布局的实现原理与细节技巧
瀑布流布局
瀑布流布局
瀑布流布局_木桶布局

感谢慕课网的老师，在慕课上又学了一个轮子，加深印象同时也方便以后使用，把它记下来，用css中的column多列布局实现一个瀑布流的效果

  <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯CSS3实现的瀑布流</title>
</head>

<style type="text/css">
.container{
    /* 这个是列宽度*/
    /*-webkit-column-width:25%; 
    -moz-column-width: 25%; 
    column-width: 25%; */
    text-align: center;
    -webkit-column-count: 2; /* 有多少列*/
    -moz-column-count: 2; 
    column-count: 2;
    -webkit-column-gap: 0px; /* 列间距 默认是16px */
    -moz-column-gap: 0px;
         column-gap: 0px;
      /*-webkit-column-gap:5px;
      -moz-column-gap:5px;*/
}

/*数据块 砖块*/

.container div{
    width: 100%;
    height: 100%;
}

.container img{
    width: 100%;
    height: 100%;
}
</style>


<body style="margin: 0px; padding: 0px;">
    <div class="container">
        <div><img src="images/P_00.jpg" /></div>
        <div><img src="images/P_01.jpg" /></div>
        <div><img src="images/P_02.jpg" /></div>
        <div><img src="images/P_03.jpg" /></div>
        <div><img src="images/P_04.jpg" /></div>
        <div><img src="images/P_05.jpg" /></div>
        <div><img src="images/P_06.jpg" /></div>
        <div><img src="images/P_07.jpg" /></div>
        <div><img src="images/P_08.jpg" /></div>
        <div><img src="images/P_09.jpg" /></div>
        <div><img src="images/P_010.jpg" /></div>
        <div><img src="images/P_011.jpg" /></div>
        <div><img src="images/P_012.jpg" /></div>
        <div><img src="images/P_013.jpg" /></div>
        <div><img src="images/P_014.jpg" /></div>
        <div><img src="images/P_015.jpg" /></div>
        <div><img src="images/P_016.jpg" /></div>
        <div><img src="images/P_017.jpg" /></div>
        <div><img src="images/P_018.jpg" /></div>
        <div><img src="images/P_019.jpg" /></div>
        <div><img src="images/P_05.jpg" /></div>
        <div><img src="images/P_06.jpg" /></div>
        <div><img src="images/P_07.jpg" /></div>
        <div><img src="images/P_08.jpg" /></div>
        <div><img src="images/P_09.jpg" /></div>
        <div><img src="images/P_010.jpg" /></div>
        <div><img src="images/P_011.jpg" /></div>
        <div><img src="images/P_012.jpg" /></div>
        <div><img src="images/P_013.jpg" /></div>
        <div><img src="images/P_05.jpg" /></div>
        <div><img src="images/P_06.jpg" /></div>
        <div><img src="images/P_07.jpg" /></div>
        <div><img src="images/P_08.jpg" /></div>
        <div><img src="images/P_09.jpg" /></div>
        <div><img src="images/P_010.jpg" /></div>
        <div><img src="images/P_011.jpg" /></div>
        <div><img src="images/P_012.jpg" /></div>
        <div><img src="images/P_013.jpg" /></div>
        <div><img src="images/P_03.jpg" /></div>
        <div><img src="images/P_04.jpg" /></div>
        <div><img src="images/P_05.jpg" /></div>
        <div><img src="images/P_06.jpg" /></div>
        <div><img src="images/P_07.jpg" /></div>
        <div><img src="images/P_08.jpg" /></div>
        <div><img src="images/P_09.jpg" /></div>
    </div>
</body>
</html>

最后实现的效果是这样的，后面怎么去调都OK

image.png