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

代码

<!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>

Masonry插件：内容始终水平居中的更多相关文章

  1. 用 jQuery Masonry 插件创建瀑布流式的页面(转)

    瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...

  2. 用 jQuery Masonry 插件创建瀑布流式的页面

    瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...

  3. Salvattore：CSS 驱动的 jQuery Masonry 插件

    Salvattore 是一个 jQuery 砌体的替代,使用 CSS 驱动的配置.Salvattore 根据您指定的列数组织你的 HTML 元素.容器中的每一个项目会一个接一个被放置在列内,只需要简单 ...

  4. 【CSS基础】实现 div 里的内容垂直水平居中

    方案一: 所有内容垂直水平居中 兼容性:IE8+. 条件:内容宽度和高度可以未知,可以是多行文字.图片.div. 描述:使用table-cell + vertical-align , html代码见文 ...

  5. 使DIV相对窗口大小左右拖动始终水平居中

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  6. masonry插件和infinitescroll插件实现无刷新无分页完美瀑布流

    地址有:http://www.17sucai.com/pins/2657.html 如果你善于发现美,如果你善于观察新鲜的事物,如果你是一名有爱的前端攻城师或设计尸,那么你一定不会对下面图片中的结构感 ...

  7. 在idea中，mavne项目使用mybatis-generator-maven-plugin自动生成实体了的时候，在maven插件里面始终不显示

    最近想学习mybatis的知识,自己搭了个简单的ssm框架,想通过插件自动生成实体类,发现想要的插件一直都没显示出来,着实很郁闷: pom.xm中的配置: <!--mybatis-generat ...

  8. 瀑布流无限加载infinitescroll插件与masonry插件使用

    masonry官网地址http://masonry.desandro.com/,infinitescroll官网地址http://www.infinite-scroll.com/ 无限滚动原理:无限滚 ...

  9. Jquery制作插件---内容切换

    //需求:点击左右导航箭头,实现内容的切换 //代码如下 <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. python. pandas(series,dataframe,index) method test

    python. pandas(series,dataframe,index,reindex,csv file read and write) method test import pandas as ...

  2. 【转】mybatis 自增主键配置

    mybatis自增主键配置(?) mybatis进行插入操作时,如果表的主键是自增的,针对不同的数据库相应的操作也不同.基本上经常会遇到的就是Oracle Sequece 和 MySQL 自增主键,至 ...

  3. 多平台的网站实现单点登录系统(SSO)的开发思路 让你的会员中心更加统一（参考资料）

    单点登录并不是一个新鲜的玩意儿,比较官方的解释是企业业务整合的解决方案之一,通俗来讲SSO就是一个通用的用户中心,国内比较流行的UCenter就是一套单点登录解决方案.而近期以CSDN明文存储用户密码 ...

  4. win7+php5.3.10下安装memcache (转)

    因为升级到了5.3.10,所以之前的dll不能使用了,弄了好久,终于还是在老外的博客上找到了解决方法: (环境是win7+php5.3.10+win32) 1.解压附件memcached到某个目录,本 ...

  5. 设置一个按钮为一个图片，不要border

    //设置一个按钮为一个图片,不要border ImageIcon searchIcon = ImageToolkit.loadImageIcon(/search.png"); ImageIc ...

  6. Drupal 7 配置ckeditor和ckfinder编辑器实现图片上传--不用wysisyg

    注意: 1.这里的ckeditor编辑器是独立模块,不是那个wysiwyg模块. 2.这里的图片上传仅仅为文章内图片,非字段图片.   1.下载文件(1) http://drupal.org/proj ...

  7. mysql 慢查询时间

    只有当一个query执行时间(不包括锁等待的时间)>long_query_time的时候,才会判定会slow log: 但是判定为slow log之后,输出包括Query_time(执行时间+锁 ...

  8. Redis哈希

    Redis的哈希值是字符串字段和字符串值之间的映射,所以他们是表示对象的完美数据类型 在Redis中的哈希值,可存储超过400十亿键值对. 例子 redis 127.0.0.1:6379> HM ...

  9. 【oneday_onepage】——Tastes differ!

    You know Ian and Felton can be really boring sometimes. They're always arguing, like. like children. ...

  10. java transient关键字作用，使用场景。

    java transient关键字作用,使用场景. 2016年08月31日 15:31:10 阅读数:4280 transient的作用及使用方法,官方解释为: Variables may be ma ...