<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Masonry</title>
<style type="text/css">
.list { width:100%; margin:0 auto; list-style:none; }
.list li { float:left; display:inline; margin:0 10px 20px 0; padding:6px; border:1px #DDD solid; }
</style>
</head>
<body>
<ul class="list">
<li><img src="images/1.jpg" alt="" /></li>
<li><img src="images/2.jpg" alt="" /></li>
<li><img src="images/3.jpg" alt="" /></li>
<li><img src="images/4.jpg" alt="" /></li>
<li><img src="images/5.jpg" alt="" /></li>
<li><img src="images/6.jpg" alt="" /></li>
<li><img src="images/7.jpg" alt="" /></li>
<li><img src="images/1.jpg" alt="" /></li>
<li><img src="images/2.jpg" alt="" /></li>
<li><img src="images/3.jpg" alt="" /></li>
<li><img src="images/4.jpg" alt="" /></li>
<li><img src="images/5.jpg" alt="" /></li>
<li><img src="images/6.jpg" alt="" /></li>
<li><img src="images/7.jpg" alt="" /></li>
<li><img src="images/1.jpg" alt="" /></li>
<li><img src="images/2.jpg" alt="" /></li>
<li><img src="images/3.jpg" alt="" /></li>
<li><img src="images/4.jpg" alt="" /></li>
<li><img src="images/5.jpg" alt="" /></li>
<li><img src="images/6.jpg" alt="" /></li>
</ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script>
$(document).ready(function() {
$('.list').masonry({
itemSelector:'.list li',
columnWidth:240
});
});
</script>
</body>
</html>
【jquery插件】瀑流布局Masonry 插件
4星 · 超过85%的资源 需积分: 10 175 浏览量
2012-07-14
17:28:52
上传
评论
收藏 178KB RAR 举报 
Masonry.rar （9个子文件） 
images 
2.jpg 56KB 6.jpg 27KB 1.jpg 18KB 4.jpg 50KB 5.jpg 29KB 7.jpg 25KB 3.jpg 28KB js 
jquery.masonry.min.js 5KB
Masonry.html 2KB资源评论
stonywu2012-10-06可以使用但是可惜的是没有延时载入！- asongni1232012-07-26不错，能使用，还带了例子
- a9202668482014-02-27瀑布流都是写在js里边的，不怎么好用,!
