您的位置：首页 > Web前端 > JavaScript

js中masonry与infinitescroll结合

2012-02-09 18:20 411 查看

首先在页面中引入

<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 class="item">a a a a a a</div>

<div class="item">a a a a a a</div>

<div class="item">a a a a a a</div>

<div class="item">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 );

});

}

);

附件：

http://115.com/file/bhrlpaj6#

jquery-1.7.1.min.rar

http://115.com/file/aq59s22l#

jquery.masonry.min.rar

http://115.com/file/dnolqagh#

jquery.infinitescroll.rar

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航