关于对瀑布流布局的思考

来源：互联网发布：火星15洲际导弹知乎编辑：程序博客网时间：2024/05/17 06:34
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no"/>    <title>瀑布流</title>    <link rel="stylesheet" href="css/base.css"/>    <link rel="stylesheet" href="css/common.css">    <script src="js/font.js"></script>    <script src="js/jquery-1.10.2.min.js"></script>    <script src="js/jquery.masonry.min.js"></script></head><style>    .container-fluid {        padding: 10px;        background: url("img/bg.jpg") no-repeat;        background-size: cover;    }    .box {        margin-bottom: 10px;        float: left;        width: 46%;    }    .box img {        max-width: 100%    }</style><body><div id="masonry" class="container-fluid">    <div class="box"><img src="img/1.jpg"></div>    <div class="box"><img src="img/2.jpg"></div>    <div class="box"><img src="img/3.jpg"></div>    <div class="box"><img src="img/4.jpg"></div>    <div class="box"><img src="img/5.jpg"></div>    <div class="box"><img src="img/6.jpg"></div>    <div class="box"><img src="img/7.jpg"></div>    <div class="box"><img src="img/8.jpg"></div>    <div class="box"><img src="img/9.jpg"></div>    <div class="box"><img src="img/10.jpg"></div></div><script>    $(function(){        var $container = $('#masonry');        $container.imagesLoaded( function(){            $container.masonry({                itemSelector : '.box',                isAnimated: true,                gutterWidth:5            });        });    });</script></body></html>
0 0