jQuery瀑布流插件 Masonry

所属分类:UI-布局

 399074  607  查看评论 (84)
分享到微信朋友圈
X
jQuery瀑布流插件 Masonry ie兼容6

我们可以使用 jQuery 的 Masonry 插件来实现这种页面形式,下面介绍一下方法。

1,分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用。

加载代码:

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="http://jq22.qiniudn.com/masonry-docs.min.js"></script>


解释:很简单,就是把下载之后的脚本文件嵌入到你想使用瀑布流形式的页面中,注意文件的名称与路径,根据你自己的实际情况修改。


2,页面代码

<div id="masonry" class="container-fluid">
  <div class="box"><img src="http://jq22.com/images/1.jpg"></div>
  <div class="box"><img src="http://jq22.com/images/2.jpg"></div>
  <div class="box"><img src="http://jq22.com/images/3.jpg"></div>
  <div class="box"><img src="http://jq22.com/images/4.jpg"></div>
  <div class="box"><img src="http://jq22.com/images/5.jpg"></div>
  ...
</div>


解释:把每个小内容块放在一个拥有相关类的容器里,然后把所有的内容块放在一个大的容器里,这里我们把内容块图片放在一个拥有 .box 类的 <div> 标签里,然后把他们又使用带有 #masonry ID 的 <div> 里面,一会儿我们会用 #masonry ID 和 .box 类来触发使用瀑布流。


3,样式代码

.container-fluid {
  padding: 20px;
  }
.box {
  margin-bottom: 20px;
  float: left;
  width: 220px;
  }
  .box img {
  max-width: 100%
}

解释:针对第二步的页面代码,我们需要添加一点样式,.box 类我们添加了浮动属性,还设置了他的宽度。


4,在页面中启用瀑布流形式的脚本代码

$(function() {
    var $container = $('#masonry');
    $container.imagesLoaded(function() {
        $container.masonry({
                itemSelector: '.box',
                gutter: 20,
                isAnimated: true,
            });
     });
});

解释:这里我们首先定位想使用瀑布流的大容器是什么,这里就是带有 #masonry ID 的 <div> 标签,在 var $container = $('#masonry'); 这行代码中定义。然后我们还要说明瀑布流里的每个内容块容器上共同的类是什么,这里就是带有 .box 类的 <div> 标签,在itemSelector : '.box', 这行代码中定义。


gutter: 20, 这行代码定义了内容块之间的距离是 20 像素,isAnimated: true, 这行代码可以打开动画选项,也就是当改变窗口宽度的时候,每行显示的内容块的数量会有变化,这个变化会使用一种动画效果。


(感谢网友阿富)提供不居中显示!

我的一个笨方法:

$(function() {
    var $objbox = $("#masonry");
    var gutter = 25;
    var centerFunc, $top0;
    $objbox.imagesLoaded(function() {
        $objbox.masonry({
            itemSelector: "#masonry > .box",
            gutter: gutter,
            isAnimated: true
        });
        centerFunc = function() {
            $top0 = $objbox.children("[style*='top: 0']");
            $objbox.css("left", ($objbox.width() - ($top0.width() * $top0.length + gutter * ($top0.length - 1))) / 2).parent().css("overflow", "hidden");
        };
        centerFunc();
    });
    var tur = true;
    $(window).resize(function() {
        if (tur) {
            setTimeout(function() {
                tur = true;
                centerFunc();
            },
            1000);
            tur = false;
        }
    });
});
相关插件-布局

时尚的多功能Bootstrap模板

一个时尚的多用途响应式网站模板
  布局
 24143  310

简洁美观的后台管理模板SuperAdmin2

jQuery Bootstrap 响应式后台管理模板SuperAdmin2
  布局
 55250  540

now ui 响应式后台管理模板

now UI 设计优美的后台管理系统插件
  布局
 41442  368

一款精美的bootstrap UI 模板

一款精美的bootstrap UI 模板
  布局
 36898  547

讨论这个项目(84)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    谎?惜萱 0
    2021/7/13 16:35:01
    这个插件挺好用的 就是加载比较慢 回复
    aa45911868347 0
    2019/12/19 14:31:25
    数据加载的时候先覆盖在计算 之前的覆盖大家都是怎么解决的
        A0
        2021/2/27 17:44:16
        你好解决了吗 兄弟
    回复
    悲伤戏 0
    2019/6/17 11:32:52
    我的数据重复 是什么原因 回复
    cdylkkcdylkk 0
    2018/11/19 11:42:44
    是左右瀑布流吗?还是上下
    回复
    梦在心中 0
    2018/5/29 23:40:21
    加了左右外边距之后会乱,不会填满每一行,怎么解决
        梦在心中0
        2018/5/29 23:50:26
        已经解决
        A0
        2021/2/27 16:25:50
        您好您的覆盖是什么解决的啊
    回复
    有个名字真好 0
    2018/3/15 19:52:49
    可以使用ajax 加载数据吗? 回复
    那么次毛来劲 0
    2018/3/7 15:50:15
    var $container = $('.carousel_content');
    $container.imagesLoaded(function() {
        $container.masonry({
            itemSelector: '.carousel_contentL',
            columnWidth: 1 //每两列之间的间隙为5像素
        });
    });
    $container.masonry('reload');

    这样测试OK

        那么次毛来劲1
        2018/3/8 10:56:21
        var $container = $('.carousel_content');
        // $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: '.carousel_contentL',
            gutter: 1,
            columnWidth: 1 //每两列之间的间隙为5像素
        });
        // });  
        // $container.masonry('reload'); 
        $container.masonry().append($container).masonry('appended', $container).masonry();

        这样更好!
        js引用

        Aries瑜0
        2020/12/31 16:00:51
        加载更多怎么写啊,我的都叠在一起了
        16.50
        2022/3/15 11:18:25
        为什么这个方法只能执行一次
        💔
    回复
    Sentimental 0
    2017/12/20 13:12:00

    新增的dom 为啥在$container 里面不生效呢   求解

    回复
    几分中意 0
    2017/12/13 16:01:31
    总督sir 0
    2017/11/16 16:07:56
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复