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

代码

<!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. firefox快捷键窗口和标签类

    firefox快捷键窗口和标签类: 关闭标签: Ctrl+W 或 Ctrl+F4关闭窗口: Ctrl+Shift+W 或 Alt+F4向左移动标签: Ctrl+左方向键 或 Ctrl+上方向键向右移动 ...

  2. [转]mysql中的字符串的拼接

    字符串的拼接 1,Mysql 在Java.C#等编程语言中字符串的拼接可以通过加号“+”来实现,比如:"1"+"3"."a"+"b ...

  3. sam9260 adc 头文件

    /* * driver/char/at91_adc.h * * Copyright (C) 2007 Embedall Technology Co., Ltd. * * Analog-to-digit ...

  4. if 语句练习 身高体重问题

    public class d { /** * @param args */ public static void main(String[] args) { // TODO 自动生成的方法存根 int ...

  5. 无线linux应用及配置--wifi配置

    linux下应用wifi,AP侧运行程序hostapd,客户端运行wpa_supplicant.官网:http://w1.fi/. 无线网卡应用 无线网卡的应用服务程序为wpa_supplicant, ...

  6. HTML5游戏引擎排行榜

    个好的游戏引擎,能够大大简化游戏的开发实现,html5gameengine.com网站对国内外所有HTML5游戏引擎进行了排名,排名不仅给出了价格.流行度.分数以及最新发布时间,通过点击引擎名称可以了 ...

  7. Java编程的逻辑 (73) - 并发容器 - 写时拷贝的List和Set

    ​本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...

  8. 一、安装MYSQL

    数据库就是数据的仓库.MYSQL数据库软件它也是一个独立的软件.它是和PHP配合最好的一种数据库.MYSQL数据库也可以作为其它编程语言的数据源. MYSQL的官方网站:http://www.mysq ...

  9. mysql 限制sql执行时间

    mysql 5.7.8开始 max_execution_time applies to read-only SELECT statements. mysql> show variables li ...

  10. JavaScript（四）：函数

    JavaScript中的函数分为两种:系统函数和自定义函数,这里主要讲解自定义函数. 一.自定义函数 1.语法: 注意: 传入的参数是可选的. 例如: <!DOCTYPE html> &l ...