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

代码

<!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. Redis 密码设置

    如果不加密码,默认只能本机访问,加密码也是为了安全考虑 1.进入Redis 的安装目录,找到redis.conf文件.用vi命令打开文件 输入  / requirepass 进行查找,输入n查找下一个 ...

  2. ios label 简单的长按复制文本信息

    在iOS开发过程中,有时候会用到UILabel展示的内容,那么就设计到点击UILabel复制它上面展示的内容的功能,也就是Label长按复制功能.网上有很多种给Label添加长按复制功能的方法,这里我 ...

  3. 基于jQuery的新浪游戏首页幻灯片

    分享一款基于jQuery的新浪游戏首页幻灯片,带左右箭头,选项卡缩略图,自动轮播切换的jQuery幻灯片代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <br>& ...

  4. 基于jQuery+CSS3实现人物跳动特效

    分享一款基于jQuery+CSS3实现人物跳动特效.这是一款类似gif图片效果的CSS3动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=& ...

  5. [Linux实用工具]Windows下同步Linux文件（Linux安装Samba和配置）

    场景需求: 安装了Ubuntu在虚拟机上,但是代码编辑或者其它更多的操作的时候,还是习惯在windows下进行.如果windows下编辑完再上传到服务器,再编译执行,就太繁琐了.一次两次还好说,这编译 ...

  6. # Writing your first Django app--part 3 about view

    添加更多的view 写actually有用的view 使用模版来设计view 使用模版设计view的捷径:render() 抛出异常404 抛出异常404-快捷方法: get_object_or_40 ...

  7. C语言 · 周期字串

    算法提高 周期字串   时间限制:1.0s   内存限制:256.0MB      问题描述 右右喜欢听故事,但是右右的妈妈总是讲一些“从前有座山,山里有座庙,庙里有个老和尚给小和尚讲故事,讲的什么呢 ...

  8. C语言 · 递归倒置字符数组

    算法提高 递归倒置字符数组   时间限制:1.0s   内存限制:512.0MB      问题描述 完成一个递归程序,倒置字符数组.并打印实现过程 递归逻辑为: 当字符长度等于1时,直接返回 否则, ...

  9. Python urllib2 proxy

    在 正式并入某大公司之后,网络必须设置为统一的proxy,好的方面没看到,但是立即让我一的一个小工具不能工作了.在之前使用urllib2库,无需设置proxy,一切工作正常.在必须使用proxy之后, ...

  10. myeclipse开发安装C++

    经过若干google之后(百度就不用说了),又经过了若干尝试,终于用最简单的步骤配起来了.(一些比较旧的文章写的太繁杂了,随着各个工具的升级,搭建环境很简单了).        前言:写博客不是为了炫 ...