web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
图像/媒体
jQuery带图片过滤功能的Masonry瀑布流图片画廊
分类:
图像/媒体
日期:
2024-05-14
点击(3)
评论(0)
演 示
免费下载
简介
##### HTML结构 该Masonry瀑布流图片画廊插件的HTML结构非常简单,真正的特效是在js中完成的。使用一个id为#galler的div作为整个包裹容器。 ```javascript
``` 在包裹容器中的#gallery-heade用于放置屏幕切换按钮和图片过滤按钮。 ```javascript
All Galleries
All
Studio
Landscapes
``` 接下来是#gallery-content,它用于放置图片,里面在使用一个#gallery-content-cente的div来使内容居中。整个瀑布流插件是通过图片的class的关联来进行分类过滤的,可以为一张图片设置多个分类class,但是不能为同一张图片设置相同的class。 ```javascript
...
``` ##### 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('
'); } if(size==1){ $("#gallery-content-center").addClass(full_size_class); $("#gallery-header-center-left-icon").html('
'); } $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(); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告