关注前端开发微信微信号web007007

jquery Masonry插件–瀑流式布局的不错选择

作者 管理员 发布时间 2012-06-03 16:11 文章分类 JavaScript, 前端资源 文章评论 抢沙发 阅读次数

近来瀑流式布局越来越普遍,实现瀑流式布局的插件也越来越多。
例如淘宝的KISSY。
不过对我我这种半吊子来说,要熟练的使用KISSY没那么快。
最近在一个项目中hery推荐了一个Masonry插件,
使用起来很简单,插件大小只有6k。简单介绍下。
一般的瀑流式布局,如果有4列的话,很多人会采用一下这种写法:

<div id="main">
<div>
<div></div>
<div></div>
</div>

<div>
<div></div>
<div></div>
</div>

<div>
<div></div>
<div></div>
</div>

<div>
<div></div>
<div></div>
</div>

<div>
<div></div>
<div></div>
</div>
</div>

也就是4列等宽在浮动。因为瀑流式一般每个块的高度都是不固定的,
所以没有办法通过每个块的浮动来实现。
使用插件Masonry就能够解决这个问题。同样的样式用Masonry插件就可以这样写:

<div id="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

简单了许多,插件的原理是通过绝对定位实现的,也就解决了高度不一产生的浮动问题。
这样的写法。后台数据的输出也会更加容易一些。
Masonry的使用方法如下:
引入文件:

在js中调用插件:

<script type="text/javascript">
$(function(){
$(´#main´).masonry({
// options 设置选项
itemSelector : ´.list´,//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>

如果有图片的话,调用如下:

<script>
var $main= $(´#main´);
$main.imagesLoaded(function(){
$main.masonry({
itemSelector : ´.list´,
columnWidth : 240
});
});
</script>

预览网址:http://www.web92.net/dom/2012-06-03-Masonry/
下载地址:jquery插件瀑流布局Masonry插件下载
下载密码:www.web92.net

本文固定链接: http://www.web92.net/247.html | WEB前端开发

该日志由 于2012年06月03日发表在 JavaScript, 前端资源 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: jquery Masonry插件–瀑流式布局的不错选择 | WEB前端开发
关键字: ,