jquery.masonry瀑布流插件用法详解

十度 JQuery 2016年01月04日收藏

Masonry是一个瀑布流布局jQuery插件，采用的原理就是利用position: absolute;相对定位，放置每个元素的位置，所以这个插件需要等到网页加载完成以后才能显示效果，本站的瀑布流效果也是采用的这个插件。几天就给大家分享一下关于Masonry瀑布流插件的一些使用方法。

一、Masonry介绍

类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“哇哦” 等等。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 — 瀑布流式布局。

masonry-demo

Masonry是一款很好用的jquery网页布局插件，它可以去掉不同高度div之间的空白，让你的网页看上去更加的整齐、漂亮！

二、Masonry使用方法

1、简单调用

首先要引入jquery.masonry.min.js文件和jquery插件，注意引用文件的顺序。

<script type="text/javascript" src="jquery.min.js"></script>  
<script type="text/javascript" src="jquery.masonry.min.js"></script>

调用Masonry

$(function(){  
    $('#container').masonry({  
        itemSelector : '.item'    
    });  
});

2、使用参数

参数是以json的方式传入到插件函数中，和以往的其他插件的调用方法并没有不同，不过他还有其他的方式去调用，比如：

var container = document.querySelector('#container');
var msnry = new Masonry( container );
container.appendChild( elem );
msnry.appended( elem );
msnry.layout();

更多调用方法请参考：

http://masonry.desandro.com/methods.html

三、参数介绍

itemSelector：class选择器,默认’.item’

columnWidth：一列的宽度

isAnimated：使用jquery的布局变化,默认true

animationOptions：animate属性渐变效果(Object { queue: false, duration: 500 })

gutterWidth：列的间隙 Integer

isFitWidth：适应宽度Boolean

isResizableL：是否可调整大小 Boolean

isRTL：使用从右到左的布局 Boolean

四、常见的调用方法

调用masonry插件的方法格式是：

$(‘#container’).masonry( ‘methodName’, [optionalParameters] )，例如：

.masonry( ‘appended’, $content, isAnimatedFromBottom )//触发添加到container的项目的布局
.masonry( ‘destroy’ )// 完全移除masonry的功能 返回到元素预初始化状态
.masonry( ‘layout’, $items, callback )// 指定项目的布局
.masonry( ‘option’, options ) //设置option
.masonry( ‘reloadItems’ ) //重新聚合所有项目以当前的顺序
.masonry( ‘reload’ ) //用于预先考虑或者插入项目 .masonry( ‘reloadItems’ )的简化版
.masonry( ‘remove’, $items ) //从masonry实例或dom中移除项目

1、关于获取图片高度

使用imagesLoaded.js插件防止获取不到图片的高度

var $container = $('#container');  
 
$container.imagesLoaded( function(){  
    $container.masonry({  
        itemSelector : '.item'  
    });  
});

2、使用JS实现动画

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

3、无限滚动加载

$container.infinitescroll({  
  navSelector  : '#page-nav',    // selector for the paged navigation   
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)  
  itemSelector : '.item',     // selector for all items you'll retrieve  
  loading: {  
      finishedMsg: 'The END!',  
      img: '6RMhx.gif'  
    }  
  },  
  // trigger Masonry as a callback  
  function( newElements ) {  
    // hide new items while they are loading  
    var $newElems = $( newElements ).css({ opacity: 0 });  
    // ensure that images load before adding to masonry layout  
    $newElems.imagesLoaded(function(){  
      // show elems now they're ready  
      $newElems.animate({ opacity: 1 });  
      $container.masonry( 'appended', $newElems, true );   
    });  
  }  
);

4、通过a标签来制定加载内容

<div id="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
<nav id="page-nav">
    <a href="masonry06-2.html"></a>
</nav>

Masonry瀑布流