当前位置：首页 > 网页特效 > 其他

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

分类：其他日期：2024-05-14 点击(6) 评论(0)

简介

##### HTML结构
其中一个项目的html结构如下：

```html
<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模板：

```html

<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>
      </div>
    </div>
  </div>
</script>
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果