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

2021-07-22 326
查看演示
下载不了?请联系网站客服提交链接错误!
增值服务:

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

郑重承诺丨新科源码提供安全交易、信息保真!
增值服务:
源码教程
安装指导
环境配置
模板安装
网站建设
二次开发
¥ 0 金币 开通VIP尊享优惠特权
立即下载 查看演示 升级会员
详情介绍

这是一款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();

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

资源下载此资源仅限注册用户下载,请先
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:1、本站资源均来源于用户上传和网络传播,因此不包含技术服务,请大家谅解!2、本站所有资源仅可用于学习交流,若有商业用途之需,请购买正版,否则产生的一切后果将由下载用户本人自行承担。3、本站资源均来源于用户上传和网络传播,如侵犯您的权益,请务必联系客服(E-mail: 469663672@qq.com)删除。4、本站不保证所提供资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!5、本站资源均来源于用户上传和网络传播,仅供学习交流、参考和研究,请理解这个概念,所以不能保证每个细节都符合您的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款,请知悉后再支付下载!

新科源码 网页素材 jQuery带图片过滤功能的Masonry瀑布流图片画廊 https://www.xinke123.net/208.html

常见问题
  • 因为源码、模板和插件等资源具有可复制性、可传播性,仅用于学习研究,不可商用,订单一旦生效,不支持退换,所以请您务必看清楚后再购买。
查看详情
  • 我们承诺资源均和演示效果图一样,如有不同,全额退款,并且我们的源码和模板都没有留后门,请放心使用。
查看详情

相关文章

评论
暂无评论