jQuery Masonry全屏响应式瀑布流网格布局插件

瀑布流 masonry 瀑布流布局 2014-12-21

控件介绍
这是一款使用jQuery Masonry和css3制作的全屏响应式瀑布流网格布局插件。该插件布局采用流行的瀑布流布局,当点击查看更多链接,会切换到该项目的全屏幻灯片模式,在幻灯片模式下可以浏览所有的图片和信息。
浏览器兼容

支持IE9+

演示下载 7049
使用方法

HTML结构

其中一个项目的html结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="item block" data-bgimage="images/1.jpg">
  <div class="thumbs-wrapper">
    <div class="thumbs">
      <img src="images/thumbs/1.jpg"/>
      <img src="images/thumbs/2.jpg"/>
    </div>
  </div>
  <h2 class="title">Personal Works</h2>
  <p class="subline">Concept <span class="fancy">&</span> Design</p>
  <div class="intro">
    <p>
      Some short introduction
      <a href="#" class="more_link">View project</a>
    </p>
  </div>
  <div class="project-descr">
    <p>A longer description...</p>
  </div>
</div>

在全屏模式下我们使用了jQuery模板:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- Fullscreen jQuery template -->
<script id="fullviewTmpl" type="text/x-jquery-tmpl">
  {{html bgimage}}
  <div class="full-view">
    <span class="full-view-exit">Exit full screen view</span>
    <div class="header">
      <h2 class="title">${title}</h2>
      <div class="full-nav">
        <span class="full-nav-prev">Previous</span>
        <span class="full-nav-pages">
          <span class="full-nav-current">${current}</span>/
          <span class="full-nav-total">${total}</span>
        </span>
        <span class="full-nav-next">Next</span>
      </div>
      <p class="subline">${subline}</p>
      <span class="loading-small"></span>
    </div>
    <div class="project-descr-full">
      <div class="thumbs-wrapper">
        <div class="thumbs">{{html thumbs}}</div>
      </div>
      <div class="project-descr-full-wrapper">
        <div class="project-descr-full-content">
          {{html description}}
        </div><!-- project-descr-full-content -->
      </div>
    </div><!-- project-descr-full -->
  </div><!-- full-view -->
</script>

当加载页面完毕后,得到如下图所示的瀑布流布局:

Masonry瀑布流网格布局-1

当我们点击“View Project”链接后,全屏幻灯片模式将被调用:

Masonry瀑布流网格布局-2

本文转载请注明出处:http://www.zhuiye.com/detail_1301.html
评论区
  • 还没有评论,快来抢沙发吧!