【jquery插件】masonry瀑布流布局插件使用说明

【jquery插件】masonry瀑布流布局插件使用说明

【写在前面】

Masonry是一个用来布局的jQuery插件,可是实现目前最流行的瀑布流布局。

官方地址：/

【演示地址】

/

【插件参数】

itemSelector class选择器,默认'.item'

columnWidth 一列的宽度

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

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

gutterWidth 列的间隙Integer

isFitWidth 适应宽度Boolean

isResizableL 是否可调整大小Boolean

isRTL 使用从右到左的布局Boolean

【特别说明】

当需要排列图片div时

需要调用

var $container = $('#container');

$container.imagesLoaded(function(){

$container.masonry({

itemSelector : '.item',

columnWidth : 240});

});

调用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中移除项目

如果想加入延时加载功能，那img标签需要加上指定的height,不然计算瀑布流布局的时候每个元素的高度就会计算错误。

【实例】

HTML

loading

CSS

.itemPic{float:left; margin:10px; margin-bottom:0px;margin-right:0px;width:160px;border:1px solid #e0e0e0; background-color:#f0f0f0; padding:10px; zoom:1; overflow:hidden; display:inline;}

.itemPic .pic{overflow:hidden;width:160px;}

#loading{text-align:center; display:none; color:#F00;}

javascript

$(function(){

var $container = $('#containerPic'),sTimer;

$container.imagesLoaded(function(){

$container.masonry({

itemSelector: '.itemPic',

columnWidth: 200

});

});

$(window).scroll(function scrollHandler(){

clearTimeout(sTimer);

sTimer = setTimeout(function() {

if(window.loaded == 1){$(window).unbind("scroll", scrollHandler);}

var c=document.documentElement.clientHeight || document.body.clientHeight, t=$(document).scrollTop();

if(t+c >= $container.offset().top+$container.height()){loadMore();}

}, 100);

});

var jLoading = $('#loading');

function loadMore()

{

var html="

";

html+="

";

html+="

";

html+="

";

html+="

";

html+="

";

html+="

";

$container.append(html).masonry("reload");

jLoading.hide();

}

});