瀑布流布局

最新推荐文章于 2024-09-09 12:23:47 发布

原创最新推荐文章于 2024-09-09 12:23:47 发布 · 260 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#瀑布流布局

js 同时被 2 个专栏收录

52 篇文章

订阅专栏

html+css

29 篇文章

订阅专栏

本文介绍如何使用jQuery封装的Masonry插件实现响应式网格布局。通过引入jQuery和Masonry插件，设置容器样式和图片宽度，利用imagesLoaded和masonry方法，实现图片自动填充网格，适用于各种屏幕尺寸。

1.使用jquery封装的masonry插件

代码：

分别引入jquery跟masonry插件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script src="masonry-docs.min.js"></script>
    <title>Document</title>
    <style>
        .container-fluid {
            padding: 20px;
            /* background: pink; */
        }

        .box {
            margin-bottom: 20px;
            float: left;
            width: 220px;
        }

        .box img {
            max-width: 100%
        }

    </style>
</head>

<body>
    <div id="masonry" class="container-fluid">
        <div class="box"><img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201211/2012111719294197.jpg"></div>
        <div class="box"><img src="http://img5.duitang.com/uploads/item/201411/07/20141107164412_v284V.jpeg"></div>
        <div class="box"><img src="http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg"></div>
        <div class="box"><img src="http://pic33.photophoto.cn/20141022/0019032438899352_b.jpg"></div>
        <div class="box"><img src="http://img.bimg.126.net/photo/ZZ5EGyuUCp9hBPk6_s4Ehg==/5727171351132208489.jpg"></div>
        <div class="box"><img src="http://img.besoo.com/file/201807/17/sl4fdwg35th.jpg"></div>
        <div class="box"><img src="http://img3.imgtn.bdimg.com/it/u=3882345105,2021628688&fm=200&gp=0.jpg"></div>
        <div class="box"><img src="http://img1.imgtn.bdimg.com/it/u=789661362,2109010345&fm=200&gp=0.jpg"></div>
        <div class="box"><img src="http://img1.3lian.com/img013/v2/85/d/63.jpg"></div>
        <div class="box"><img src="http://pic34.photophoto.cn/20150123/0011024021074610_b.jpg"></div>
        <div class="box"><img src="http://pic3.16pic.com/00/56/91/16pic_5691110_b.jpg"></div>
        <div class="box"><img src="http://img15.3lian.com/2015/a1/13/d/22.jpg"></div>
        <div class="box"><img src="http://img0.imgtn.bdimg.com/it/u=2462265827,536086291&fm=200&gp=0.jpg"></div>
        <div class="box"><img src="http://www.th7.cn/d/file/p/2017/12/22/186628f8527318c5f748b84d9ae0e9ca.jpg"></div>
        <div class="box"><img src="http://img2.3lian.com/2014/f5/60/d/19.jpg"></div>
        <div class="box"><img src="http://img05.tooopen.com/images/20150411/tooopen_sy_118003224313.jpg"></div>
        <div class="box"><img src="http://pic33.photophoto.cn/20141028/0038038006886895_b.jpg"></div>
        <div class="box"><img src="http://pic55.nipic.com/file/20141212/17961491_091040824000_2.jpg"></div>
        <div class="box"><img src="http://img1.imgtn.bdimg.com/it/u=152255795,1844389802&fm=26&gp=0.jpg"></div>
        <div class="box"><img src="http://b-ssl.duitang.com/uploads/item/201605/01/20160501001344_Q4nfH.jpeg"></div>
        <div class="box"><img src="http://img05.tooopen.com/images/20150325/tooopen_sy_83454692177.jpg"></div>
        
        <div class="box"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547888043&di=a660abfaf0cfe48033e65e64f2fdbccb&imgtype=jpg&er=1&src=http%3A%2F%2Fpic8.nipic.com%2F20100706%2F4391871_081626106367_2.jpg"></div>
        <div class="box"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547293245929&di=430c0f33b13475b1b9c3a9dd8145d680&imgtype=0&src=http%3A%2F%2Fpic15.nipic.com%2F20110715%2F7935001_120846634125_2.jpg"></div>
        <div class="box"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547293245929&di=bbdb40ae4e6df5992f4a93b0d3ea78b7&imgtype=0&src=http%3A%2F%2Fpic21.nipic.com%2F20120519%2F5454342_154115399000_2.jpg"></div>


    </div>
</body>
<script>
    $(function () {
        var $container = $('#masonry');       //绑定的元素
        $container.imagesLoaded(function () {
            $container.masonry({
                itemSelector: '.box',         //里面的元素
                gutter: 20,                   //每个元素间的间隔
                isAnimated: true,             //是否显示动画
            });
        });
    });
</script>

</html>