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

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

作者:xiaosong  日期:06-25

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

一、Masonry介绍

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

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

二、Masonry使用方法 1、简单调用

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

<script type=</script> <script type=</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选择器,默认&rsquo;.item&rsquo; columnWidth:一列的宽度 isAnimated:使用jquery的布局变化,默认true animationOptions:animate属性渐变效果(Object { queue: false, duration: 500 }) gutterWidth:列的间隙 Integer isFitWidth:适应宽度Boolean isResizableL:是否可调整大小 Boolean isRTL:使用从右到左的布局 Boolean 四、常见的调用方法

调用masonry插件的方法格式是:$(&lsquo;#container&rsquo;).masonry( &lsquo;methodName&rsquo;, [optionalParameters] ),例如:

.masonry( &lsquo;appended&rsquo;, $content, isAnimatedFromBottom )//触发添加到container的项目的布局 .masonry( &lsquo;destroy&rsquo; )// 完全移除masonry的功能 返回到元素预初始化状态 .masonry( &lsquo;layout&rsquo;, $items, callback )// 指定项目的布局 .masonry( &lsquo;option&rsquo;, options ) //设置option .masonry( &lsquo;reloadItems&rsquo; ) //重新聚合所有项目以当前的顺序 .masonry( &lsquo;reload&rsquo; ) //用于预先考虑或者插入项目 .masonry( &lsquo;reloadItems&rsquo; )的简化版 .masonry( &lsquo;remove&rsquo;, $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 ); }); } );
web前端|正则|JSP教程|ASP教程|
ajax教程|jquery教程|css教程|服务器|
操作系统|linux系统|SEO优化|网站运维|
织梦cms|javascript教程|html教程|编程开发|
php开发|数据库|Mysql教程|CMS建站教程|
phpcms教程|wordpress|apache服务器|
代码学堂-导航