应用错误收集

使用MixItUp插件过滤中心图像

时间：2016-11-22 14:24:10

标签： javascript jquery html css

说明

我在this template上使用MixItUp插件。
基本上，我有一个简单但很难（至少对我而言，因为我是网络新手）我怀疑我试图解决没有成功：我想把“过滤后的图像”集中在一起。

代码

您可以在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>

提前致谢，
路易斯。

1 个答案:

答案 0 :(得分：1)

尝试：

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

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