首先在页面中引入
- <script src=”jquery-1.7.1.min.js”></script>
- <script src=”jquery.masonry.min.js”></script>
- <script src=”jquery.infinitescroll.js”></script>
排列body中的内容:
- <BODY>
- <div id="container">
- <div>a a a a a a</div>
- <div>a a a a a a</div>
- <div>a a a a a a</div>
- <div>a a a a a a</div>
- </div>
- </BODY>
在js中调用插件:
- <script type="text/javascript">
- $(function(){
- $('#container').masonry({
- // options 设置选项
- itemSelector : '.item',//class 选择器
- columnWidth : 240 ,//一列的宽度 Integer
- isAnimated:true,//使用jquery的布局变化 Boolean
- animationOptions:{
- //jquery animate属性 渐变效果 Object { queue: false, duration: 500 }
- },
- gutterWidth:0,//列的间隙 Integer
- isFitWidth:true,// 适应宽度 Boolean
- isResizableL:true,// 是否可调整大小 Boolean
- isRTL:false,//使用从右到左的布局 Boolean
- });
- });
- </script>
当需要排列图片div时:
需要调用:
- <script>
- var $container = $('#container');
- $container.imagesLoaded(function(){
- $container.masonry({
- itemSelector : '.item',
- columnWidth : 240
- });
- });
- </script>
调用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中移除项目
调用infinitescroll插件:
- $container.infinitescroll({
- navSelector : '#page-nav', //分页导航的选择器
- nextSelector : '#page-nav a', //下页连接的选择器
- itemSelector : '.box', //你要检索的所有项目的选择器
- loading: {
- finishedMsg: 'No more pages to load.',//结束显示信息
- img: 'http://i.imgur.com/6RMhx.gif'//loading图片
- }
- },
- //作为回调函数触发masonry
- function( newElements ) {
- // 当加载时隐藏所有新项目
- var $newElems = $( newElements ).css({ opacity: 0 });
- // 在添加到masonry布局之前保证图片载入
- $newElems.imagesLoaded(function(){
- // 现在可以显示所有的元素了
- $newElems.animate({ opacity: 1 });
- $container.masonry( 'appended', $newElems, true );
- });
- }
- );