首页 > 代码库 > Masonry插件：内容始终水平居中

Masonry插件：内容始终水平居中

2024-09-13 21:33:05   217人阅读

跟随浏览器框架大小，主题内容居中

代码

<!DOCTYPE html>
 <html>
<head>
    <title>masonry瀑布流插件</title>
    <meta charset="utf-8">
    <script src=http://www.mamicode.com/"./jquery.min.js"></script>
    <script src=http://www.mamicode.com/"./masonry.js"></script>
    <style>
        #masonry{margin: 0 auto;}
        #masonry .box{width: 250px; padding: 0px; background: #f00; margin:  0 0 10px;}
        #masonry .box img{width: 100%}

        .text{text-align:  center;padding:  20px; background: #eee; margin-bottom:  20px;}
    </style>
</head>
<body>
<div class="text">浏览器不管怎么切换 Masonry内容都会居中</div>
<div class="content">
    <div id="masonry">
        <div class="box">111</div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a02.jpg"></div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a01.jpg"></div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a03.jpg"></div>
        <div class="box">343</div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a02.jpg"></div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a01.jpg"></div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a03.jpg"></div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a01.jpg"></div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a03.jpg"></div>
        <div class="box">343</div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a02.jpg"></div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a01.jpg"></div>
        <div class="box">111</div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a02.jpg"></div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a01.jpg"></div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a03.jpg"></div>
        <div class="box">343</div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a02.jpg"></div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a01.jpg"></div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a03.jpg"></div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a01.jpg"></div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a03.jpg"></div>
        <div class="box">343</div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a02.jpg"></div>
        <div class="box"><img src=http://www.mamicode.com/"./images/a01.jpg"></div>
    </div>
</div>
<script type="text/javascript">
    $(function() {
        var $container = $(‘#masonry‘);
        $container.imagesLoaded(function() {
            $container.masonry({
                itemSelector: ‘.box‘,
                gutter: 20, // 盒子间距
                isAnimated: true,

            });
        });

        masonryWidth();
    });

    // 设置masonry 宽度
    function masonryWidth(){
        $browser = document.body.clientWidth;

        $boxWidth = 250;         // 盒子宽度
        $boxSpacing = 20;        //盒子与盒子之间的间距

        if($browser <=500 ){
            $("#masonry").css(‘width‘,250);
        }else{
            $num = ($browser-$boxWidth) / ($boxWidth + $boxSpacing );
            $n = parseInt($num);
            $masonryWidth = $n * ($boxWidth + $boxSpacing) + $boxWidth;

            $("#masonry").css(‘width‘,$masonryWidth);
        }

        // 浏览器窗口变动
        window.onresize = masonryWidth;
    }

    </script>
</body>
</html>

 

Masonry插件：内容始终水平居中


联系
我们