zoukankan      html  css  js  c++  java
  • Masonry插件:内容始终水平居中

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

    代码

    <!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{ 250px; padding: 0px; background: #f00; margin:  0 0 10px;}
            #masonry .box img{ 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>
  • 相关阅读:
    洛谷1113 杂务
    MySQL中的各种引擎
    剑指offer第3题:从尾到头打印链表
    向一个GitHub repository添加协作者
    String、StringBuffer与StringBuilder之间区别
    java与C语言在字符串结束符上的区别
    git 查看远程分支、本地分支、创建分支、把分支推到远程repository、删除本地分支
    Git问题Everything up-to-date解决
    Mybatis 数据库物理分页插件 PageHelper
    时间序列分析发展史
  • 原文地址:https://www.cnblogs.com/wesky/p/6690104.html
Copyright © 2011-2022 走看看