Masonry插件：內容始終水平居中

本文轉載自查看原文 2017-04-10 17:41 1872 js與juqery插件效果

跟隨瀏覽器框架大小，主題內容居中

代碼

<!DOCTYPE html>
 <html>
<head>
    <title>masonry瀑布流插件</title>
    <meta charset="utf-8">
    <script src="./jquery.min.js"></script>
    <script src="./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="./images/a02.jpg"></div>
        <div class="box"><img src="./images/a01.jpg"></div>
        <div class="box"><img src="./images/a03.jpg"></div>
        <div class="box">343</div>
        <div class="box"><img src="./images/a02.jpg"></div>
        <div class="box"><img src="./images/a01.jpg"></div>
        <div class="box"><img src="./images/a03.jpg"></div>
        <div class="box"><img src="./images/a01.jpg"></div>
        <div class="box"><img src="./images/a03.jpg"></div>
        <div class="box">343</div>
        <div class="box"><img src="./images/a02.jpg"></div>
        <div class="box"><img src="./images/a01.jpg"></div>
        <div class="box">111</div>
        <div class="box"><img src="./images/a02.jpg"></div>
        <div class="box"><img src="./images/a01.jpg"></div>
        <div class="box"><img src="./images/a03.jpg"></div>
        <div class="box">343</div>
        <div class="box"><img src="./images/a02.jpg"></div>
        <div class="box"><img src="./images/a01.jpg"></div>
        <div class="box"><img src="./images/a03.jpg"></div>
        <div class="box"><img src="./images/a01.jpg"></div>
        <div class="box"><img src="./images/a03.jpg"></div>
        <div class="box">343</div>
        <div class="box"><img src="./images/a02.jpg"></div>
        <div class="box"><img src="./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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 div 水平居中內容居左 div中的內容水平居中顯示如何把由js生成的內容水平居中？ td標簽內容垂直、水平居中 container中的內容垂直-水平居中 td標簽內容垂直、水平居中 css flex 使內容水平居中的方法... LinearLayout水平居中控制 css 實現水平居中如何讓一個div水平居中