瀑布流

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

面包多

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

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

HTML 结构:

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

也想出现在这里?联系我们
WordPress 主题
  1. <div id="gallery"></div>

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

  1. <div id="gallery-header">
  2.   <div id="gallery-header-center">
  3.     <div id="gallery-header-center-left">
  4.       <div id="gallery-header-center-left-icon"><span class="iconb" data-icon=""></span></div>
  5.       <div id="gallery-header-center-left-title">All Galleries</div>
  6.     </div>
  7.     <div id="gallery-header-center-right">
  8.       <div class="gallery-header-center-right-links" id="filter-all">All</div>
  9.       <div class="gallery-header-center-right-links" id="filter-studio">Studio</div>
  10.       <div class="gallery-header-center-right-links" id="filter-landscape">Landscapes</div>
  11.     </div>
  12.   </div>
  13. </div>

接下来是#gallery-content,它用于放置图片,里面在使用一个#gallery-content-cente 的 div 来使内容居中。整个瀑布流插件是通过图片的 class 的关联来进行分类过滤的,可以为一张图片设置多个分类 class,但是不能为同一张图片设置相同的 class。

  1. <div id="gallery-content">
  2.   <div id="gallery-content-center">
  3.     <img src="_assets/mm1.jpg" class="all studio"/>
  4.     <img src="_assets/landscape1.jpg" class="all landscape">
  5.     <img src="_assets/mm2.jpg" class="all studio"/>
  6.     ...
  7.   </div>
  8. </div>

CSS 样式:

该瀑布流插件首先要设置#gallery 和#gallery-header 元素为左浮动,并设置它们为 100%的宽度,

  1. #gallery{
  2.   float: left;
  3.   width: 100%;
  4. }
  5. #gallery-header{
  6.   height: 100px;
  7.   width: 100%;
  8.   float: left;
  9. }

#gallery-header-center 元素中的内容居中。在其下右两个 div:#gallery-header-center-left 和#gallery-header-center-right,它们一个浮动到左边,一个浮动到右边。

  1. #gallery-header-center{
  2.   height: 100px;
  3.   width: 950px;
  4.   margin-right: auto;
  5.   margin-left: auto;
  6. }

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

  1. #gallery-header-center-left{
  2.   float: left;
  3.   height: 35px;
  4.   line-height: 35px;
  5.   margin-top: 32px;
  6. }
  7. #gallery-header-center-left-icon{
  8.   float: left;
  9.   height: 35px;
  10.   width: 35px;
  11.   background-color: rgba(63,141,191,1);
  12.   color: rgba(255,255,255,1);
  13.   text-align: center;
  14.   font-size: 20px;
  15.   -webkit-transition: background 0.5s;
  16.   -moz-transition: background 0.5s;
  17.   -o-transition: background 0.5s;
  18.   transition: background 0.5s;
  19. }
  20. #gallery-header-center-left-icon:hover {
  21.   background-color: rgba(63,141,191,0.5);
  22.   cursor: pointer;
  23. }
  24. #gallery-header-center-left-title{
  25.   float: left;
  26.   height: 35px;
  27.   font-size: 25px;
  28.   color: #3f8dbf;
  29.   margin-left: 20px;
  30. }

#gallery-header-center-right 是瀑布流图片分类过滤按钮,它们有两个样式,一个是正常样式,一个是鼠标点击后的样式,鼠标点击后的样式通过 js 来动态添加。同时还为每个按钮添加鼠标滑过的样式。

  1. #gallery-header-center-right{
  2.   float: right;
  3.   height: 35px;
  4.   margin-top: 32px;
  5.   line-height: 35px;
  6. }
  7. .gallery-header-center-right-links {
  8.   color: #333333;
  9.   float: left;
  10.   height: 35px;
  11.   padding-right: 20px;
  12.   padding-left: 20px;
  13.   margin-left: 20px;
  14.   font-size: 16px;
  15.   font-weight: 400;
  16.   -webkit-transition: background 0.5s;
  17.   -moz-transition: background 0.5s;
  18.   -o-transition: background 0.5s;
  19.   transition: background 0.5s;
  20. }
  21. .gallery-header-center-right-links:hover {
  22.   background-color: rgba(63,141,191,1);
  23.   color: rgba(255,255,255,1);
  24.   cursor: pointer;
  25. }
  26. .gallery-header-center-right-links-current {
  27.   color: #FFFFFF;
  28.   background-color: rgba(63,141,191,1);
  29. }
  30. .gallery-header-center-right-links-current:hover {
  31.   background-color: rgba(63,141,191,0.5);
  32. }

最后,为#gallery-content, #gallery-content-cente 和#gallery-content-center img 添加样式。由于有两种屏幕宽度,因此要分别设置两个 class,一个为 950 像素宽,一个为 100%宽度。同时为图片添加 transition 来使它们在瀑布流图片分类切换时平滑过渡。

  1. #gallery-content{
  2.   float: left;
  3.   width: 100%;
  4. }
  5. .gallery-content-center-normal {
  6.   width: 950px;
  7.   margin-right: auto;
  8.   margin-left: auto;
  9. }
  10. .gallery-content-center-full {
  11.   float: left;
  12.   width: 100%;
  13. }
  14. #gallery-content-center img {
  15.   width: 300px;
  16.   margin-bottom: 10px;
  17.   -webkit-transition: all 0.5s;
  18.   -moz-transition: all 0.5s;
  19.   -o-transition: all 0.5s;
  20.   transition: all 0.5s;
  21.   margin-left: 10px;
  22. }

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

  1. var size = 0;
  2. var button = 1;
  3. var button_class = "gallery-header-center-right-links-current";
  4. var normal_size_class = "gallery-content-center-normal";
  5. var full_size_class = "gallery-content-center-full";
  6. var $container = $('#gallery-content-center');

该瀑布流插件中使用了外部依赖插件 isotope。这是 Masonry 作者 David DeSandro 的新作。(注意:isotope 并不是免费的,使用时请请注意相关的协议!)。下面的代码是如何集成 isotope:

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

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

  1. function check_button(){
  2.   $('.gallery-header-center-right-links').removeClass(button_class);
  3.   if(button==1){
  4.     $("#filter-all").addClass(button_class);
  5.     $("#gallery-header-center-left-title").html('All Galleries');
  6.     }
  7.   if(button==2){
  8.     $("#filter-studio").addClass(button_class);
  9.     $("#gallery-header-center-left-title").html('Studio Gallery');
  10.     }
  11.   if(button==3){
  12.     $("#filter-landscape").addClass(button_class);
  13.     $("#gallery-header-center-left-title").html('Landscape Gallery');
  14.     } 
  15. }
  16. function check_size(){
  17.   $("#gallery-content-center").removeClass(normal_size_class).removeClass(full_size_class);
  18.   if(size==0){
  19.     $("#gallery-content-center").addClass(normal_size_class); 
  20. $("#gallery-header-center-left-icon").html('<span data-icon=""></span>');
  21.     }
  22.   if(size==1){
  23.     $("#gallery-content-center").addClass(full_size_class); 
  24. $("#gallery-header-center-left-icon").html('<span data-icon=""></span>');
  25.     }
  26.   $container.isotope({itemSelector : 'img'});
  27. }

当 resize 按钮被点击的时候,瀑布流插件将检查 size 变量的值,如果为 0 则将它修改为 1,为则修改为 0。之后会激活 check_button()函数。

  1. $("#filter-all").click(function() { $container.isotope({ filter: '.all' }); button = 1; check_button(); });
  2. $("#filter-studio").click(function() {  $container.isotope({ filter: '.studio' }); button = 2; check_button();  });
  3. $("#filter-landscape").click(function() {  $container.isotope({ filter: '.landscape' }); button = 3; check_button();  });
  4. $("#gallery-header-center-left-icon").click(function() { if(size==0){size=1;}else if(size==1){size=0;} check_size(); });

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

  1. check_button();
  2. check_size();
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

关键词:
阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!