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

代码

<!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. [datatable]排序时指定某列不可排序

    datatable是一个jquery扩展的表格插件.其提供了强大的表格功能. 官方地址:http://www.datatables.net/ 在官方示例中,对于表格的是否可排序是在初始化中设置的一个值 ...

  2. django源码解析之 BooleanField (二)

    class BooleanField(Field): empty_strings_allowed = False default_error_messages = { 'invalid': _(u&q ...

  3. [转]自定义注释@interface的用法

    一.什么是注释     说起注释,得先提一提什么是元数据(metadata).所谓元数据就是数据的数据.也就是说,元数据是描述数据的.就象数据表中的字段一样,每个字段描述了这个字段下的数据的含义.而J ...

  4. 【转】Java中JDK和JRE的区别是什么？它们的作用分别是什么？

    原文地址:http://blog.csdn.net/qq_33642117/article/details/52143824 JDK和JRE是Java开发和运行工具,其中JDK包含了JRE,但是JRE ...

  5. [net]ftp ssh http telnet https服务及端口

    转自:http://blog.csdn.net/qq_34642668/article/details/52116490 FTP服务器,则是在互联网上提供存储空间的计算机,它们依照FTP协议提供服务. ...

  6. PAGED_CODE()

    #if DBG #define PAGED_CODE() \ /*APC_LEVEL*/) { \ VideoPortDebugPrint(, "Video: Pageable code c ...

  7. Java通过JDBC进行简单的增删改查（以MySQL为例）

    Java通过JDBC进行简单的增删改查(以MySQL为例) 目录: 前言:什么是JDBC 一.准备工作(一):MySQL安装配置和基础学习 二.准备工作(二):下载数据库对应的jar包并导入 三.JD ...

  8. 非常有用的15个Linux 服务器监控命令

    如果你想知道你的服务器正在做干什么,你就需要了解一些基本的命令,一旦你精通了这些命令,那你就是一个 专业的 Linux 系统管理员. 有些 Linux 发行版会提供 GUI 程序来进行系统的监控,例如 ...

  9. js 窗口抖动

    <title>窗口抖动</title> <style> body{margin:50px; } #qq{position:relative;} span{paddi ...

  10. 数据框排序 data.frame order

    # sorting examples using the mtcars datasetattach(mtcars) # sort by mpgnewdata <- mtcars[order(mp ...