westdc-zf1/application/default/views/scripts/data/thumb.phtml

<?php
$this->headTitle($this->config->title->site);
$this->headTitle($this->config->title->data);
$this->headTitle('缩略图浏览');
$this->headTitle()->setSeparator(' - ');
$this->headLink()->appendStylesheet('/css/water.css');
$this->breadcrumb('<a href="/">首页</a>');
$this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
$this->breadcrumb('缩略图浏览');
$this->breadcrumb()->setSeparator(' > ');
$this->theme->AppendPlus($this,'masonry');
$this->theme->AppendPlus($this,'colorbox');
?>
<div class="row-fluit">
	<?php echo $this->page->getNavigation(); ?>
    <ul class="thumb unstyled" id="container">
    <?php foreach($this->metadata as $md) : ?>
      <li class="items">
      		<h4><a href="/data/<?php echo $md['uuid'];?>"><?= $this->escape($md['title']);?></a></h4>
            <a href="/service/bigthumb/uuid/<?= $md['uuid'] ?>" class="thumbnail colorbox">
              <img src="/service/thumb/id/<?php echo $md['id'];?>" alt="">
            </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>
            <span class="pull-right"><a href="/data/<?php echo $md['uuid'];?>" class="btn"><i class="icon-zoom-in"></i>查看</a></span>
      </li>
    <?php endforeach; ?>
    </ul>
<?php echo $this->page->getNavigation(); ?>
</div>

<script type="text/javascript" charset="utf-8">
$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.items',
    //columnWidth : 240
  });
  $(".colorbox").colorbox({photo:"true"});
});

</script>