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

代码

<!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:  auto;}

        #masonry .box{width: 250px; padding: 0px; background: #f00; margin:    10px;}

        #masonry .box img{width: %}

        .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"></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"></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"></div>

        <div class="box"><img src="./images/a02.jpg"></div>

        <div class="box"><img src="./images/a01.jpg"></div>

        <div class="box"></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"></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"></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: , // 盒子间距

                isAnimated: true,

            });

        });

        masonryWidth();

    });

    // 设置masonry 宽度

    function masonryWidth(){

        $browser = document.body.clientWidth;

        $boxWidth = ;         // 盒子宽度

        $boxSpacing = ;        //盒子与盒子之间的间距

        if($browser <= ){

            $("#masonry").css('width',);

        }else{

            $num = ($browser-$boxWidth) / ($boxWidth + $boxSpacing );

            $n = parseInt($num);

            $masonryWidth = $n * ($boxWidth + $boxSpacing) + $boxWidth;

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

        }

        // 浏览器窗口变动

        window.onresize = masonryWidth;

    }

    </script>

</body>

</html>

最新文章

  1. 【翻译八】java-内存一致性错误
  2. GetActiveView 返回 NULL 为 MDI 框架窗口
  3. ab -n -c
  4. AXIS2远程调用WebService示例（Eclipse+AXIS）
  5. log4cxx 使用代码进行配置
  6. java regex possissive relunctant
  7. WinHex数据恢复笔记（二）
  8. java多线程面试题整理及答案（2018年）
  9. Exp6
  10. linux shell 脚本攻略学习18--grep命令详解
  11. PHP:第四章——PHP数组添加，删除，插入，分割，合并，及运算符
  12. MyBatis源码解析之数据源（含数据库连接池简析）
  13. SPOJ Triple Sums(FFT+容斥原理)
  14. EasyUI validType属性
  15. 《利用Python进行数据分析》笔记---第2章--来自bit.ly的1.usa.gov数据
  16. BZOJ5450: 轰炸（水题，Tarjan缩点求最长路）
  17. 认识CSS中布局之文档流、浮动、定位以及叠放次序
  18. Vue-cli 工具 / 通过 Vue-cli 工具重构 todoList
  19. 星际争霸 虚空之遗 人族5BB 操作流程
  20. 用jquery制作一个简单的导航栏

热门文章

  1. [转]layDate显示默认时间
  2. mac OS X中升级php5.5至php5.6 or php7
  3. adi 程序烧写
  4. Django添加防跨站请求伪造中间件
  5. JavaScript（四）：函数
  6. org.thymeleaf.exceptions.TemplateInputException: Error resolving template &quot;/ template might not exist or might not be accessible by any of the configured
  7. 百度Ueditor设置图片自动压缩
  8. hbase分页应用场景及分页思路与代码实现
  9. RootKit
  10. PCB设计与信号完整性