当前位置: 代码迷 >> JavaScript >> jquery插件masonry.js兑现竖列状图片排列特效
  详细解决方案

jquery插件masonry.js兑现竖列状图片排列特效

热度:21   发布时间:2012-08-25 10:06:20.0
jquery插件masonry.js实现竖列状图片排列特效

?

?

插件配置如下:

$(document).ready(function() {
??? $('.box-163css').masonry({
??????? itemSelector:'.box-163css li',
??????? columnWidth:210
??? });
});

?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 特效,css群:184853157,网站重构设计,div+css网站建设</title>
</head>
<LINK media=screen href="css/163css.css" type=text/css rel=stylesheet>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
</head>
<body>
<h2>163css图片展示</h2>
<ul class="box-163css">
? <li><a href="http://www.163css.com/ylw/log/634338183736472500.html"><img src="images/img01.jpg" /></a></li>
? <li><a href="http://www.163css.net/net163/log/634336414581628750.html"><img src="images/img02.jpg" /></a></li>
? <li><a href="http://www.163css.net/net163/log/634336379971160000.html"><img src="images/img03.jpg" /></a></li>
? <li><a href="http://www.163css.net/net163/log/634336394095378750.html"><img src="images/img04.jpg" /></a></li>
? <li><a href="http://www.163css.net/news/log/634466732388871250.html"><img src="images/img05.jpg" /></a></li>
? <li><a href="http://www.163css.net/news/log/634352600312187500.html"><img src="images/img06.jpg" /></a></li>
? <li><a href="http://www.163css.net/news/log/634352188733750000.html"><img src="images/img07.jpg" /></a></li>
? <li><a href="http://www.163css.net/gdw/log/634633800650933750.html"><img src="images/img08.jpg" /></a></li>
? <li><a href="http://www.163css.com/ylw/log/634346540908094772.html"><img src="images/img09.jpg" /></a></li>
? <li><a href="http://www.163css.com/ylw/log/634348776439817500.html"><img src="images/img10.jpg" /></a></li>
? <li><a href="http://www.163css.com/ylw/log/634360388125126250.html"><img src="images/img11.jpg" /></a></li>
? <li><a href="http://www.163css.com/ylw/log/634338183736472500.html"><img src="images/img01.jpg" /></a></li>
? <li><a href="http://www.163css.net/net163/log/634336414581628750.html"><img src="images/img02.jpg" /></a></li>
? <li><a href="http://www.163css.net/net163/log/634336379971160000.html"><img src="images/img03.jpg" /></a></li>
? <li><a href="http://www.163css.net/net163/log/634336394095378750.html"><img src="images/img04.jpg" /></a></li>
? <li><a href="http://www.163css.net/news/log/634466732388871250.html"><img src="images/img05.jpg" /></a></li>
? <li><a href="http://www.163css.net/news/log/634352600312187500.html"><img src="images/img06.jpg" /></a></li>
? <li><a href="http://www.163css.net/news/log/634352188733750000.html"><img src="images/img07.jpg" /></a></li>
? <li><a href="http://www.163css.net/gdw/log/634633800650933750.html"><img src="images/img08.jpg" /></a></li>
? <li><a href="http://www.163css.com/ylw/log/634346540908094772.html"><img src="images/img09.jpg" /></a></li>
? <li><a href="http://www.163css.com/ylw/log/634348776439817500.html"><img src="images/img12.jpg" /></a></li>
? <li><a href="http://www.163css.com/ylw/log/634360388125126250.html"><img src="images/img11.jpg" /></a></li>
</ul>
<script>
$(document).ready(function() {
??? $('.box-163css').masonry({
??????? itemSelector:'.box-163css li',
??????? columnWidth:210
??? });
});
</script>
</body>
</html>

  相关解决方案