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

PetitQ 瀑布流 2018-10-15 2.11K 0 0

这是一款 jQuery 带图片过滤功能的 Masonry 瀑布流图片画廊特效插件。这个 Masonry 瀑布流图片画廊插件能够根据图片的类型来进行分类过滤，并且还提供了一个宽屏和窄屏切换的功能。

注意：这个 Masonry 瀑布流图片画廊插件需要在支持 CSS3 的浏览器中才能正常工作。

HTML 结构：

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

也想出现在这里？联系我们吧

```
<div id="gallery"></div>
```

在包裹容器中的#gallery-heade 用于放置屏幕切换按钮和图片过滤按钮。

```
<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。

```
<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%的宽度，

```
#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，它们一个浮动到左边，一个浮动到右边。

```
#gallery-header-center{
```
```
  height: 100px;
```
```
  width: 950px;
```
```
  margin-right: auto;
```
```
  margin-left: auto;
```
```
}
```

#gallery-header-center-left 元素中包含切换屏幕的按钮和图标，图标按钮上添加了一些 hover 样式：

```
#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 来动态添加。同时还为每个按钮添加鼠标滑过的样式。

```
#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 来使它们在瀑布流图片分类切换时平滑过渡。

```
#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 选择器。

```
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：

$container.isotope({itemSelector : 'img'});

该瀑布流插件中创建了两个函数：check_button()和 check_size()。check_button()函数用于添加和移除相应的 class，check_size()函数则用于全屏和窄屏之间的切换：

```
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()函数。

$("#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(); });

最后，在页面加载完毕后立刻启动这两个函数：

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

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

已有 527 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

瀑布流

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

HTML 结构：

CSS 样式：

Javascript 部分：

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

相关文章

网格瀑布流布局和打开图片动画特效

jQuery轻量级网格布局瀑布流布局

基于Masonry网格瀑布流特效

发表回复取消回复

热销模板

瀑布流

HTML 结构：

CSS 样式：

Javascript 部分：

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复