masonry 瀑布流布局插件使用说明

最新推荐文章于 2025-04-25 22:23:31 发布

转载最新推荐文章于 2025-04-25 22:23:31 发布 · 1.3k 阅读

标签

#class #div #function #callback #scroll

Web前端技术专栏收录该内容

6 篇文章

订阅专栏

本文介绍Masonry布局插件的使用方法，包括初始化配置、动态加载内容及更新布局等关键步骤。通过示例展示了如何实现图片div的网格布局，并提供了滚动加载更多图片的完整代码。

参数名	参数说明
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中移除项目

演示

$(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="<div class='itemPic'><div class='pic'><img src='images/1.jpg' height='187' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/2.jpg' height='378' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/3.jpg' height='393' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/4.jpg' height='276' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/5.jpg' height='435' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/6.jpg' height='387' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/7.jpg' height='387' /></div></div>";
$container.append(html).masonry("reload");
jLoading.hide();
}


});

来自： http://www.0773linji.com/jquery_plugs/jq_Masonry/