jquery masonry 瀑布流怎么居中

jerry2012 发布于 2013/08/09 10:32
阅读 1K+
收藏 0

 

<%@ 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="jquery-1.7.2.min.js"></script> 
 <script type="text/javascript" src="js/jquery.masonry.min.js"></script> 
	<script type="text/javascript">
		$(function(){
		  $('#container').masonry({
		    // options
		    itemSelector : '.item',
		    columnWidth : 20,
		    gutterWidth :10,
		  });
		});
	var $container = $('#container');
		$container.imagesLoaded(function(){
		  $container.masonry({
		    itemSelector : '.item',
		    columnWidth :2
		  });
		});
		
	</script>

<style type="text/css">
	.item {
	  width: 220;
	  margin: 5;
	  float: left; 
	  
	}
	img{
		width:220px;
	}
</style>

  </head>
  
  <body>
	<center>
	<div id="container"> 
	  <div class="item"><img src="http://192.168.1.67:80/zsyl04/image/4545/299.jpg"/></div>
	  <div class="item"><img src="http://192.168.1.67:80/zsyl04/image/4545/296.jpg"/></div>
	  <div class="item"><img src="http://192.168.1.67:80/zsyl04/image/4545/301.jpg"/></div>
	  <div class="item"><img src="http://192.168.1.67:80/zsyl04/image/4545/288.jpg"/></div>
	  <div class="item"><img src="http://192.168.1.67:80/zsyl04/image/4545/289.jpg"/></div>
	  <div class="item"><img src="http://192.168.1.67:80/zsyl04/image/4545/299.jpg"/></div>
	  <div class="item"><img src="http://192.168.1.67:80/zsyl04/image/4545/258.jpg"/></div>
	  <div class="item"><img src="http://192.168.1.67:80/zsyl04/image/4545/244.jpg"/></div>
	  <div class="item"><img src="http://192.168.1.67:80/zsyl04/image/4545/266.jpg"/></div>
	  <div class="item"><img src="http://192.168.1.67:80/zsyl04/image/4545/262.jpg"/></div>
	</div>
	</center>
  </body>
</html>

怎么才能让他居中显示,每列显示4列呢

 

加载中
0
徐达峰
pantrick
pantrick
你好,看到你这个插件了,例子很强大,大概浏览一下文档,好像没发现动态加载的例子,能解释一下么!
返回顶部
顶部