瀑布流布局 

<!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">
    <title>Document</title>
</head>
<style>
    #geid {
        width: 1000px;
        margin: auto;
    }
    
    [class^=geid] {
        width: 200px;
        float: left;
    }
    
    .a {
        height: 150px;
        background-color: aqua;
    }
    
    .b {
        height: 160px;
        background-color: rgb(25, 0, 255);
    }
    
    .c {
        height: 170px;
        background-color: rgb(55, 71, 71);
    }
    
    .d {
        height: 180px;
        background-color: rgb(226, 41, 133);
    }
    
    .e {
        height: 190px;
        background-color: rgb(114, 117, 114);
    }
    
    .f {
        height: 200px;
        background-color: rgb(9, 209, 209);
    }
    
    .o {
        height: 210px;
        background-color: rgb(12, 27, 17);
    }
    
    .p {
        height: 220px;
        background-color: rgb(214, 236, 201);
    }
    
    .q {
        height: 230px;
        background-color: rgb(19, 17, 18);
    }
</style>

<body>
    <div id="geid">
        <div class="geid-tie a"></div>
        <div class="geid-tie b"></div>
        <div class="geid-tie c"></div>
        <div class="geid-tie d"></div>
        <div class="geid-tie e"></div>
        <div class="geid-tie f"></div>
        <div class="geid-tie o"></div>
        <div class="geid-tie p"></div>
        <div class="geid-tie q"></div>
        <div class="geid-tie a"></div>
        <div class="geid-tie b"></div>
        <div class="geid-tie c"></div>
        <div class="geid-tie d"></div>
        <div class="geid-tie e"></div>
        <div class="geid-tie f"></div>
        <div class="geid-tie o"></div>
        <div class="geid-tie p"></div>
        <div class="geid-tie q"></div>
        <div class="geid-tie a"></div>
        <div class="geid-tie b"></div>
        <div class="geid-tie c"></div>
        <div class="geid-tie a"></div>
        <div class="geid-tie b"></div>
        <div class="geid-tie c"></div>
        <div class="geid-tie d"></div>
        <div class="geid-tie e"></div>
        <div class="geid-tie f"></div>
        <div class="geid-tie o"></div>
        <div class="geid-tie p"></div>
        <div class="geid-tie q"></div>
        <div class="geid-tie d"></div>
        <div class="geid-tie e"></div>
        <div class="geid-tie f"></div>
        <div class="geid-tie o"></div>
        <div class="geid-tie p"></div>
        <div class="geid-tie q"></div>
    </div>
<--jquery的版本都不差太多都可以使用-->
    <!-- 引入js，jquery-1.11.3，masonry.pkgd -->
    <script src="../../js/jquery-1.11.3.min.js"></script>
    <script src="../../js/masonry.pkgd.min.js"></script>
    <script>
window.onload = function(){
var nian = new Masonry('#geid', {
            itemSelector: '.geid-tie',
            columnWidth: 200
        });

}
        
    </script>
</body>

</html>

　　

posted @ 2022-03-16 09:40  33的男孩  阅读(49)  评论(0)    收藏  举报