个人中心
gpt4 book ai didi

javascript - 使用 MixItUp 插件过滤中心图像

转载 作者：太空宇宙 更新时间：2023-11-04 09:31:33 27 4
gpt4 key购买 nike

解释

我正在研究 this template使用 MixItUp
基本上，我有一个简单但困难的(至少对我来说，因为我是网络开发新手)怀疑我试图解决但没有成功:我想集中“过滤图像”。

enter image description here

代码

您可以在 CodePen here 访问它(出于某种原因，CodePen 不会加载第二张图像以外的图像，因此 CodePen 上的所有 6 张图像都是相同的)。
也可以下载here .


    $(document).ready(function() {
    
        /* ======================================================================== */
        /*	Filtering
        /* ========================================================================= */
    
        $(".project-wrapper").mixItUp();
    
    });
    /*=========================================
    	Basic Style
    ==========================================*/
    
    body {
        line-height: 21px;
        font-size: 13px;
    }
    
    ol, ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    a, a:focus, a:hover {
        text-decoration: none;
    }
    
    body>section, .footer {
        padding: 70px 0;
    }
    
    
    /*=========================================
    	Mix
    ==========================================*/
    
    .work-filter {
        margin-bottom: 35px;
    }
    
    .work-filter ul li {
        display: inline-block;
    }
    
    .work-filter ul li a {
        color: #062033;
        display: block;
        padding: 5px 17px;
    }
    
    .work-filter ul li a:hover, .work-filter ul li a.active {
        background-color: rgba(31, 107, 76, 1);
        color: #fff;
    }
    
    .mix {
        display: none;
    }
    
    .work-item {
        float: left;
        width: 25%;
        position: relative;
    }
    
    .work-item>img {
        display: block;
        height: 100%;
        width: 100%;
    }
    
    
    
    /*=========================================
    	Media Queries
    ==========================================*/
    
    
    
    /*============================================================
    	For Small Desktop
    ==============================================================*/
    
    @media (min-width: 980px) and (max-width: 1150px) {
    
    /* work */
    
    }
    
    
    /*============================================================
    	Tablet (Portrait) Design for a width of 768px
    ==============================================================*/
    
    @media (min-width: 768px) and (max-width: 979px) {
    
    /* work */
    
    .work-item {
      float: left;
      width: 33%;
    }
    
    }
    
    
    /*============================================================
    	Mobile (Portrait) Design for a width of 320px
    ==============================================================*/
    
    @media only screen and (max-width: 767px) {
    
    /* work */
    
    .work-item {
      float: left;
      left: 5% !important;
      width: 90%;
    }
    
    }
    
    
    /*============================================================
    	Mobile (Landscape) Design for a width of 480px
    ==============================================================*/
    
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    
    /* work */
    
    .work-item {
      left: inherit !important;
      width: 50%;
    }
    
    }
    <!DOCTYPE html>
    <html lang="en" class="no-js">
    
    <head>
        <!-- meta charec set -->
        <meta charset="utf-8">
        <!-- Page Title -->
        <title>MixItUp</title>
    
        <!--=========================================
            CSS
            =========================================-->
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
        <!-- Main Stylesheet -->
        <link rel="stylesheet" href="css/main.css">
    
    
        <!--=========================================
            Essential jQuery Plugins
            =========================================-->
        <!-- Main jQuery -->
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <!-- jquery.mixitup.min -->
        <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
        <!-- Custom Functions -->
        <script src="js/custom.js"></script>
    </head>
    
    <body id="body">
    
        <section>
            <div class="container">
                <div class="row">
    
                    <div class="work-filter">
                        <ul class="text-center">
                            <li><a href="javascript:;" data-filter="all" class="active filter">All</a></li>
                            <li><a href="javascript:;" data-filter=".mix1" class="filter">Mix1</a></li>
                            <li><a href="javascript:;" data-filter=".mix2" class="filter">Mix2</a></li>
                            <li><a href="javascript:;" data-filter=".mix3" class="filter">Mix3</a></li>
                            <li><a href="javascript:;" data-filter=".mix4" class="filter">Mix4</a></li>
                            <li><a href="javascript:;" data-filter=".mix5" class="filter">Mix5</a></li>
                            <li><a href="javascript:;" data-filter=".mix6" class="filter">Mix6</a></li>
                        </ul>
                    </div>
    
                </div>
            </div>
    
            <div class="project-wrapper">
    
                <figure class="mix work-item mix1">
                    <img src="http://imgur.com/KZfjrVT.jpg" alt="">
                </figure>
    
                <figure class="mix work-item mix2">
                    <img src="http://imgur.com/GB54YZR.jpg" alt="">
                </figure>
    
                <figure class="mix work-item mix3">
                    <img src="http://imgur.com/afatbzS.jpg" alt="">
                </figure>
    
                <figure class="mix work-item mix4">
                    <img src="http://imgur.com/GvjT75d.jpg" alt="">
                </figure>
    
                <figure class="mix work-item mix5">
                    <img src="http://imgur.com/KJ9MaK6.jpg" alt="">
                </figure>
    
                <figure class="mix work-item mix6">
                    <img src="http://imgur.com/w3ZFVnq.jpg" alt="">
                </figure>
    
            </div>
    
        </section>
    
    </body>
    
    </html>


提前致谢，
路易斯。

最佳答案

尝试:

.project-wrapper {
    text-align:center;
}

.work-item {
    float: none;
    width: 33%;
    position: relative;
}

关于javascript - 使用 MixItUp 插件过滤中心图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40744374/

27 4 0
文章推荐： linux - Android Studio 卡在执行 Gradle 任务
文章推荐： python - 如何在 View 中显示月份？ (Odoo11)
文章推荐： python - 获取 "AttributeError: ' float'对象没有属性 'replace'“替换字符串时出错
文章推荐： python - 在 utf8 中迭代两个数据帧的列和 str.encode
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com