关于对瀑布流布局的思考

最新推荐文章于 2023-02-15 19:51:46 发布

原创最新推荐文章于 2023-02-15 19:51:46 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#布局

工作笔记专栏收录该内容

9 篇文章

订阅专栏

<!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>