jquery实现瀑布流
最近在做我们产品的官网，需要开发一个照片墙展示界面。到网上搜了一下模版，决定用瀑布流的方式展示照片。于是去搜索瀑布流的demo，有很多很好的例子，其中堆糖的瀑布流感觉比较完美，但是太复杂了。继续搜索，最后找到jquery.infinitescroll.js+jquery.masonry.js的例子，觉得简单明了，自己拿来改了一下就可以运行了。
jquery.masonry.js主要是实现瀑布流的布局。查找masonry文档就能知道是级联网格布局的插件包，masonry的使用其实很简单。看一下代码
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<title>monsry使用实例</title>
<style>
.item{width:25%;border:1px solid red;}
.item .w2{width:30%;border:1px solid green;}
</style>
<script type="text/javascript">
function item_masonry(){
$('#container').load(function(){
$('#container').masonry({
//附加选择器,指定那些元素包裹的元素会重新排列
itemSelector: '.item',
//一列网格的宽度,默认是第一个元素浮动外的宽度
columnWidth:100,
//列的间隙宽度 单位px
gutterWidth:15,
//禁用测量每个浮动元素的宽度 如果浮动元素具有相同的宽度则设为true 默认是false
sigleMode:flase,
// 绑定一个 Masonry 访问 用来 窗口 resize时布局平滑流动.
// 默认：true
resizeable:true,
//布局重排动画 默认false
animate:true,
// 一对动画选项，具体参数可以参考jquery .animate()中的options选项
animationOptions: {},
// 附加选择器元素，用来尾部追加内容。
// 在集成infinitescroll插件的情况下使用。
appendedContent: $('.new_content'),
// 默认情况下，Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项
// 默认：true
saveOptions: true
});
});
$('#container').masonry({
itemSelector: '.item',
columnWidth:100,
gutterWidth:15
});
}
$(function(){
item_masonry();
});
</script>
</head>
<body>
<div id="container">
<div class="item">哈哈</div>
<div class="item w2">呵呵</div>
<div class="item">嘻嘻</div>
</div>
</body>
</html>
</html>