添加了jquery.masonry插件，修改缩略图列表样式

application/default/controllers/DataController.php

@@ -1679,7 +1679,7 @@ class DataController extends Zend_Controller_Action
     	$sum=$row[0]['count'];
     	$select=$this->db->select();
     	$select->from('normalmetadata as m','m.*')
-   	 	->order('m.title desc')->limitPage($page,$this->limit);
+   	 	->order('m.title desc')->limitPage($page,9);
     	$this->view->metadata = $this->db->fetchAll($select);
     	$this->view->page=new Pagination($sum,$page,$this->limit);
     }

application/default/views/scripts/data/thumb.phtml

@@ -8,29 +8,39 @@ $this->breadcrumb('<a href="/">首页</a>');
 $this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
 $this->breadcrumb('缩略图浏览');
 $this->breadcrumb()->setSeparator(' > ');
-$this->headScript()->appendFile('/js/jquery-1.7.min.js');
+$this->theme->AppendPlus($this,'masonry');
-$this->headScript()->appendFile('/js/jquery.colorbox-min.js');
-$this->headLink()->appendStylesheet('/css/colorbox.css');
 ?>
+<style>
 
-<?php echo $this->page->getNavigation(); ?>
+</style>
-<hr />
+<div class="row-fluit">
-<div id="mdlist">
+	<?php echo $this->page->getNavigation(); ?>
-<?php foreach($this->metadata as $md) : ?>
+    <ul class="thumb unstyled" id="container">
- <div class="thumb">
+    <?php foreach($this->metadata as $md) : ?>
- 
+      <li class="items">
- <div class="thumbtitle">
+      		<h4><a href="/data/<?php echo $md['uuid'];?>"><?= $this->escape($md['title']);?></a></h4>
- <a href="/data/view/uuid/<?php echo $md['uuid'];?>"><?php echo $this->escape($md['title']); ?> </a>
+            <a href="/data/<?php echo $md['uuid'];?>" class="thumbnail">
- </div>
+              <img src="/service/thumb/id/<?php echo $md['id'];?>" alt="">
- <a class="colorbox" href="/service/bigthumb/id/<?php echo $md['id'];?>" title="<?php echo $this->escape($md['title']); ?>">
- <img src="/service/thumb/id/<?php echo $md['id'];?>" alt="<?php echo $this->escape($md['title']);?>" title="<?php echo mb_strlen($md['description'])>400?$this->escape(mb_substr($md['description'],0,400,'UTF-8').'...'):$this->escape($md['description']);?>" />
             </a>
+            <div class="caption">
+                <p>
+                    <?php echo mb_strlen($md['description'])>120?$this->escape(mb_substr($md['description'],0,120,'UTF-8').'...'):$this->escape($md['description']);?>
+                </p>
             </div>
-<?php endforeach; ?>
+            <span class="pull-right"><a href="/data/<?php echo $md['uuid'];?>" class="btn"><i class="icon-zoom-in"></i>查看</a></span>
-</div>
+      </li>
-<hr style="clear:left;"/>
+    <?php endforeach; ?>
+    </ul>
 <?php echo $this->page->getNavigation(); ?>
+</div>
 
 <script type="text/javascript" charset="utf-8">
-$(document).ready(function(){$(".colorbox").colorbox({rel:"colorbox",photo:"true",transition:"fade"});});
+$(function(){
+  $('#container').masonry({
+    // options
+    itemSelector : '.items',
+    //columnWidth : 240
+  });
+});
+
 </script>

application/models/Theme.php

@@ -100,6 +100,12 @@ class Theme
 				)
 			),
 			
+			'masonry' => array(
+				$this->ScriptKey => array(
+					'/js/lib/jquery.masonry.min.js'
+				),
+			),
+
 			/*********谷歌地图*********/
 			
 			//Google Map API v3

htdocs/css/water.css

@@ -12,7 +12,6 @@
 /* used in water */
 .PageNavigation{padding-left:30px;}
 hr{border: none 0;border-bottom:1px dashed #ccc;height: 1px;width:100%;margin:0;padding:5px 0 5px 0;}
-li {white-space:nowrap;}
 #mdlist{}
 #mdlist span{width:80%;}
 #mdlist ol li{white-space:normal;}
@@ -30,7 +29,7 @@ ul{list-style-type: none;margin:2px 5px 2px 20px;}
 /* used in search*/
 .mditem{clear:left;text-indext:2em;padding:5px;}
 .mditem hr{clear:both;padding:0;}
-.thumb {float:left;padding-right:5px;height:220px;overflow:hidden;margin-left:5px;}
+/*.thumb {float:left;padding-right:5px;height:220px;overflow:hidden;margin-left:5px;}*/
 
 #search{}
 .float{float:left;}
@@ -104,31 +103,16 @@ ol,ol li{list-style:decimal;margin-left:20px;}
 	font-size:12px;font-weight:bold;color:#00A9FF;white-space: normal;}
 .singleline img{height:20px;vertical-align:middle;}
 
-#tabs-controller {overflow:hidden;padding:5px 0;margin:5px 0px;}
+.row-fluit{overflow:hidden;}
-#tabs-controller ul li{float:left;padding:3px 10px;border:1px solid #93bee2;border-radius:5px;margin:0 5px;}
+.thumb{overflow:hidden;}
-#tabs-controller ul li:hover{background:#f1f8fe;}
+.thumb li {width:320px;float:left; margin:10px 20px; overflow:hidden;border: 1px solid #DDDDDD;
-#tabs-controller ul li.active{background:#e8f4ff;}
+    border-radius: 4px 4px 4px 4px;
-
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
-.bigtitle{font-size:14px;font-weight:bold;line-height:24px;text-indent:14px;background:url(/images/arrow_red_10x10.gif) 0 center no-repeat;}
+    display: block;
-.bigtitle a{color:#004411;}
+    line-height: 20px;
-.box-shadow{
+    padding: 4px;
-	box-shadow:2px 2px 2px #ccc;
+    transition: all 0.2s ease-in-out 0s;}
-	-webkit-box-shadow:2px 2px 2px #ccc;
+.thumb li .thumbnail{width:80%;height:220px; overflow:hidden;display:block; margin:5px auto;padding:2px;border:none;}
-	-moz-box-shadow:2px 2px 2px #ccc;
+.thumb li img{width:100%;}
-	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=125, Color='#cccccc');
+.thumb li h4{ position:relative;top:0;height:40px;}
-	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=125, Color='#cccccc')";
+.thumb li p{word-break:break-all;word-wrap:break-word;}
-}
-.text-shadow{
-	text-shadow:#ccc 2px 2px 2px;
-}
-
-#datalist{overflow:hidden;}
-#datalist h2{margin-left:20px;}
-#datalist ul li{margin:5px 0px;padding:5px 0px;background:#f6f6f6;border:1px solid #FFF;border-radius:3px;}
-#datalist ul li:hover,#datalist ul li:focus{border:1px solid #ccc;background:#fefefe;}
-#datalist ul li a{font-size:12px;}
-#datalist ul li a.title{font-size:14px;}
-#datalist ul li a.more{font-size:12px;}
-#datalist ul li p{text-indent:24px;font-size:12px;line-height:24px;}
-#datalist ul li p img {vertical-align:middle;}
-.search_form{margin-left:20px;float:none;}