jquery masonry 瀑布流
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript">
$(function(){
$('#container').masonry({
// options
itemSelector : '.item',
columnWidth : 240,
gutterWidth :1,
isResizableL:true,
isAnimated : false,
isRTL : false
});
});
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 1
});
});
</script>
<style type="text/css">
.item {
width: 200px;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<center>
<div id="container">
<div class="item"><img src="http://192.168.1.67:80/zsyl04/image/upload_pic/299.jpg"/></div>
<div class="item"><img src="http://192.168.1.67:80/zsyl04/image/upload_pic/296.jpg"/></div>
<div class="item"><img src="http://192.168.1.67:80/zsyl04/image/upload_pic/255.jpg"/></div>
<div class="item"><img src="http://192.168.1.67:80/zsyl04/image/upload_pic/251.jpg"/></div>
<div class="item"><img src="http://192.168.1.67:80/zsyl04/image/upload_pic/257.jpg"/></div>
<div class="item"><img src="http://192.168.1.67:80/zsyl04/image/upload_pic/259.jpg"/></div>
<div class="item"><img src="http://192.168.1.67:80/zsyl04/image/upload_pic/258.jpg"/></div>
<div class="item"><img src="http://192.168.1.67:80/zsyl04/image/upload_pic/244.jpg"/></div>
<div class="item"><img src="http://192.168.1.67:80/zsyl04/image/upload_pic/266.jpg"/></div>
<div class="item"><img src="http://192.168.1.67:80/zsyl04/image/upload_pic/262.jpg"/></div>
<div class="item"><img src="http://192.168.1.67:80/zsyl04/image/upload_pic/263.jpg"/></div>
<div class="item"><img src="http://192.168.1.67:80/zsyl04/image/upload_pic/252.jpg"/></div>
<div class="item"><img src="http://192.168.1.67:80/zsyl04/image/upload_pic/279.jpg"/></div>
<div class="item"><img src="http://192.168.1.67:80/zsyl04/image/upload_pic/275.jpg"/></div>
<div class="item"><img src="http://192.168.1.67:80/zsyl04/image/upload_pic/277.jpg"/></div>
</div>
</center>
</body>
</html>请问jquery masonry为什么他一直靠左显示呢，怎么做到居中显示四列。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论