jquery masonry 瀑布流

jerry2012 发布于 2013/08/08 18:44
阅读 1K+
收藏 2
<%@ 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为什么他一直靠左显示呢,怎么做到居中显示四列。
加载中
0
BENNEE
BENNEE

<div id="container" style="margin:0 auto">

看行不?

返回顶部
顶部