当前位置：首页 > 网页特效 > 图像/媒体

jQuery带图片过滤功能的Masonry瀑布流图片画廊

分类：图像/媒体日期：2024-05-14 点击(3) 评论(0)

简介

##### HTML结构
该Masonry瀑布流图片画廊插件的HTML结构非常简单，真正的特效是在js中完成的。使用一个id为#galler的div作为整个包裹容器。

```javascript
<div id="gallery"></div>        
```  
在包裹容器中的#gallery-heade用于放置屏幕切换按钮和图片过滤按钮。

```javascript
<div id="gallery-header">
  <div id="gallery-header-center">
    <div id="gallery-header-center-left">
      <div id="gallery-header-center-left-icon"><span class="iconb" data-icon=""></span></div>
      <div id="gallery-header-center-left-title">All Galleries</div>
    </div>
    <div id="gallery-header-center-right">
      <div class="gallery-header-center-right-links" id="filter-all">All</div>
      <div class="gallery-header-center-right-links" id="filter-studio">Studio</div>
      <div class="gallery-header-center-right-links" id="filter-landscape">Landscapes</div>
    </div>
  </div>
</div>   
```             
接下来是#gallery-content，它用于放置图片，里面在使用一个#gallery-content-cente的div来使内容居中。整个瀑布流插件是通过图片的class的关联来进行分类过滤的，可以为一张图片设置多个分类class，但是不能为同一张图片设置相同的class。

```javascript
<div id="gallery-content">
  <div id="gallery-content-center">
    <img src="_assets/mm1.jpg" class="all studio"/>
    <img src="_assets/landscape1.jpg" class="all landscape">
    <img src="_assets/mm2.jpg" class="all studio"/>
    ...
  </div>
</div>    
```           
#####  CSS样式
该瀑布流插件首先要设置#gallery和#gallery-header元素为左浮动，并设置它们为100%的宽度，

```javascript
#gallery{
  float: left;
  width: 100%;
}
#gallery-header{
  height: 100px;
  width: 100%;
  float: left;
}         
```
gallery-header-center元素中的内容居中。在其下右两个div:#gallery-header-center-left和#gallery-header-center-right，它们一个浮动到左边，一个浮动到右边。

```javascript
#gallery-header-center{
  height: 100px;
  width: 950px;
  margin-right: auto;
  margin-left: auto;
}
```
gallery-header-center-left元素中包含切换屏幕的按钮和图标，图标按钮上添加了一些hover样式：

```javascript
#gallery-header-center-left{
  float: left;
  height: 35px;
  line-height: 35px;
  margin-top: 32px;
}
#gallery-header-center-left-icon{
  float: left;
  height: 35px;
  width: 35px;
  background-color: rgba(63,141,191,1);
  color: rgba(255,255,255,1);
  text-align: center;
  font-size: 20px;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
}
#gallery-header-center-left-icon:hover {
  background-color: rgba(63,141,191,0.5);
  cursor: pointer;
}
#gallery-header-center-left-title{
  float: left;
  height: 35px;
  font-size: 25px;
  color: #3f8dbf;
  margin-left: 20px;
}      
```      
gallery-header-center-right是瀑布流图片分类过滤按钮，它们有两个样式，一个是正常样式，一个是鼠标点击后的样式，鼠标点击后的样式通过js来动态添加。同时还为每个按钮添加鼠标滑过的样式。

```javascript
#gallery-header-center-right{
  float: right;
  height: 35px;
  margin-top: 32px;
  line-height: 35px;
}
.gallery-header-center-right-links {
  color: #333333;
  float: left;
  height: 35px;
  padding-right: 20px;
  padding-left: 20px;
  margin-left: 20px;
  font-size: 16px;
  font-weight: 400;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
}
.gallery-header-center-right-links:hover {
  background-color: rgba(63,141,191,1);
  color: rgba(255,255,255,1);
  cursor: pointer;
}
.gallery-header-center-right-links-current {
  color: #FFFFFF;
  background-color: rgba(63,141,191,1);
}
.gallery-header-center-right-links-current:hover {
  background-color: rgba(63,141,191,0.5);
}      
```          
最后，为#gallery-content， #gallery-content-cente和#gallery-content-center img添加样式。由于有两种屏幕宽度，因此要分别设置两个class，一个为950像素宽，一个为100%宽度。同时为图片添加transition来使它们在瀑布流图片分类切换时平滑过渡。
```javascript

#gallery-content{
  float: left;
  width: 100%;
}
.gallery-content-center-normal {
  width: 950px;
  margin-right: auto;
  margin-left: auto;
}
.gallery-content-center-full {
  float: left;
  width: 100%;
}
#gallery-content-center img {
  width: 300px;
  margin-bottom: 10px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  margin-left: 10px;
}   
```             
#####  JAVASCRIPT
插件的js文件中创建了一些变量，size和button变量用于跟踪resize按钮和过滤按钮是否被点击。button_class变量用于当前被点击的过滤按钮添加样式。normal_size_class和full_size_clas用于宽屏和窄屏的切换class。

当size变量的值为0的时候，#gallery-content-center被添加class.gallery-content-center-normal，同时移除class .gallery-content-center-full。插件中有三种分类过滤状态，所以button变量的值可以设置为1、2和3。$container变量用于保存图片容器的jquery选择器。

```javascript
var size = 0;
var button = 1;
var button_class = "gallery-header-center-right-links-current";
var normal_size_class = "gallery-content-center-normal";
var full_size_class = "gallery-content-center-full";
var $container = $('#gallery-content-center');      
```          
该瀑布流插件中使用了外部依赖插件isotope。这是Masonry作者David DeSandro的新作。（注意：isotope并不是免费的，使用时请请注意相关的协议！）。下面的代码是如何集成isotope：

```javascript
$container.isotope({itemSelector : 'img'});    
```            
该瀑布流插件中创建了两个函数：check_button()和check_size()。check_button()函数用于添加和移除相应的class，check_size()函数则用于全屏和窄屏之间的切换：

```javascript
function check_button(){
  $('.gallery-header-center-right-links').removeClass(button_class);
  if(button==1){
    $("#filter-all").addClass(button_class);
    $("#gallery-header-center-left-title").html('All Galleries');
    }
  if(button==2){
    $("#filter-studio").addClass(button_class);
    $("#gallery-header-center-left-title").html('Studio Gallery');
    }
  if(button==3){
    $("#filter-landscape").addClass(button_class);
    $("#gallery-header-center-left-title").html('Landscape Gallery');
    } 
}
function check_size(){
  $("#gallery-content-center").removeClass(normal_size_class).removeClass(full_size_class);
  if(size==0){
    $("#gallery-content-center").addClass(normal_size_class); 
$("#gallery-header-center-left-icon").html('<span data-icon=""></span>');
    }
  if(size==1){
    $("#gallery-content-center").addClass(full_size_class); 
$("#gallery-header-center-left-icon").html('<span data-icon=""></span>');
    }
  $container.isotope({itemSelector : 'img'});
} 
```               
当resize按钮被点击的时候，瀑布流插件将检查size变量的值，如果为0则将它修改为1，为则修改为0。之后会激活check_button()函数。

```javascript
$("#filter-all").click(function() { $container.isotope({ filter: '.all' }); button = 1; check_button(); });
$("#filter-studio").click(function() {  $container.isotope({ filter: '.studio' }); button = 2; check_button();  });
$("#filter-landscape").click(function() {  $container.isotope({ filter: '.landscape' }); button = 3; check_button();  });
$("#gallery-header-center-left-icon").click(function() { if(size==0){size=1;}else if(size==1){size=0;} check_size(); });
```                
最后，在页面加载完毕后立刻启动这两个函数：

```javascript
check_button();
check_size(); 
```

web299.com

jQuery带图片过滤功能的Masonry瀑布流图片画廊

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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