masonry 瀑布流说明
来源:互联网 发布:淘宝如何设置免运费 编辑:程序博客网 时间:2024/05/17 08:13
Masonry是一 个用来布局的jQuery插件,可是实现目前最流行的瀑布流布局。
官方地址:http://masonry.desandro.com/
【演示地址】
http://masonry.desandro.com/
【插件参数】
itemSelector class选择器,默认'.item'
columnWidth 一列的宽度
isAnimated 使用jquery的布局变化,默认true
animationOptions animate属性渐变效果(Object { queue: false, duration: 500 })
gutterWidth 列的间隙 Integer
isFitWidth 适应宽度Boolean
isResizableL 是否可调整大小 Boolean
isRTL 使用从右到左的布局 Boolean
e.g
var $container = $('#container');$container.masonry({ itemSelector : '.item', columnWidth : 20, // 一列的宽度 isAnimated : !Modernizr.csstransitions, isFitWidth:true, isResizableL:true });
【特别说明】
当需要排列图片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中移除项目
e.g
var itemsJsWalls = [], item;
//ajax加载出来的 $.each(data.items, function(i, datum) {item = '<div class="item example"><img src="${path}/'+datum.filePath+'"></br>' + datum.title + '</div>';itemsJsWalls.push(item); }); var $itemsJsWall = $(itemsJsWalls.join('')); $itemsJsWall.imagesLoaded(function() {$container.masonry('remove', $loadingItem).masonry();$container.append($itemsJsWall);$container.masonry('appended', $itemsJsWall, true); });
关于下一页的说明:下一页不一定非要是2.html的格式,a.html?id=2之类的页面都可以,但一定是要从2开始,之后的每次请求回自动变成3.html, 4.html或者a.html?id=3, a.html?id=4.
- masonry 瀑布流说明
- masonry,瀑布流
- jquery.masonry瀑布流
- Query瀑布流插件 Masonry
- Masonry实现JS瀑布流
- jQuery瀑布流插件 Masonry
- avalon搭配masonry实现MVVM瀑布流
- bootstrap+masonry.js写瀑布流
- Masonry + Ajax 实现无限刷新瀑布流
- masonry瀑布流布局
- 【JQ】瀑布流排版-jquery.masonry.min.js使用说明
- jquery.masonry瀑布流插件的4个使用步骤
- jQuery带图片过滤功能的Masonry瀑布流插件
- jquery.masonry瀑布流插件的4个使用步骤
- infinite scroll和masonry实现的json类型瀑布流
- Masonry瀑布流式布局库(中文翻译)
- Vue jquery.masonry 滑动自动加载 瀑布流
- Masonry实现瀑布流布局
- 常用的图片处理
- Three js入门教程
- <Linux Network 2.6.38> "where_to_go"
- LIB和DLL的区别与使用
- String和StringBuffer的区别
- masonry 瀑布流说明
- bitmap大图片内存溢出问题
- Win7设置虚拟wifi配置工具(批处理)
- LPTSTR、LPCSTR、LPCTSTR、LPSTR的来源及意义
- eclipse运行程序出现android Installation error: INSTALL_FAILED_CONFLICTING_PROVIDER
- 【笨木头Cocos2dx 041】战争迷雾效果 第4章_真正的迷雾来了!
- sharepoint2010 webservice增加和删除列表Itme
- Newtonsoft.Json序列化和反序列
- Linux用户模式和内核模式