用于投资组合重新排列以内联显示的过滤库？

Question

我正在使用 Bootstrap 的 3 列投资组合框架创建过滤画廊。投资组合过滤掉所有内容，但它不会重新排列 div 项目以内联显示，它只是删除不具有相同数据关系的项目，而不是删除然后重新排列以便没有空格项目之间。

这是我的代码：

$(function(){
    var selectedClass = "";
    $(".filter").click(function(){
        selectedClass = $(this).attr("data-rel"); 
        $(".work").fadeTo(100, 0.1);
        $(".portfolio-item").not("."+selectedClass).fadeOut().removeClass('scale');
        setTimeout(function(){
            $("."+selectedClass).fadeIn().addClass('scale').sort();
            $(".work").fadeTo(300, 1);
        }, 300); 
    });
});

我尝试添加 .sort 函数，但没有任何改变，所以我假设我把它放在错误的位置或者需要更多代码？

  HTML

        <section class="no-padding" id="portfolio">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">Portfolio</h2>
                <h3 class="section-subheading text-muted">A showcase of my work.</h3>
                <div class="tabs">
                    <button class="btn filter" id="filt" href="" data-rel="all">ALL</button>
                    <button class="btn filter" id="filt" data-rel="web">Web Design</button>
                    <button class="btn filter" id="filt" data-rel="graphics">Graphic Design</button>
                    <button class="btn filter" id="filt" data-rel="branding">Branding</button>
                    <button class="btn filter" id="filt" data-rel="photography">Photography</button>
                    <button class="btn filter" id="filt" data-rel="motion">Motion Graphics</button>

                </div> 
                <br>
            </div>
    <div class="work">    
        <div class="row">
            <div class="col-md-4 portfolio-item web scale tile all">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-4 portfolio-item graphics scale  tile all">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-4 portfolio-item branding scale tile all">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
        </div>
    <!-- /.row -->

        <!-- Projects Row -->
        <div class="row">
            <div class="col-md-4 portfolio-item motion scale tile all">
                <a href="img/portfolio/fullsize/1.jpg">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-4 portfolio-item motion scale tile all">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-4 portfolio-item motion scale tile all">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
        </div>

        <!-- Projects Row -->
        <div class="row">
            <div class="col-md-4 portfolio-item photography scale tile all">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-4 portfolio-item graphics scale tile all">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-4 portfolio-item web scale tile all">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
        </div>
    </div> <!--WORK-->
    <!-- /.row -->
    <hr>
        </div>
    </div>
</section>

Answer 1

当你点击你作品的一个按钮时，它会隐藏所有然后显示所选类别的项目。

示例：点击 "Web Desing" 显示第一项和最后一项。

如果我清楚地理解问题...最后一个应该出现在第一个的右边...而不是在它下面。

那是因为它是 <div class="row"> 的 "prisoneer"。
在这个 CodePen 中，我只删除了你 HTML 中的那些。
这是我所做的唯一改变。
它现在可以 "float" 自由地位于前一个元素的右侧。

是想要的结果吗？

用于投资组合重新排列以内联显示的过滤库？

Filtered Gallery for Portfolio rearranging to display inline?

html

jquery

portfolio