在图像库中使用MixItUp插件

标记(HTML):

<div class="controls">
    <div class="control-group">
        <div class="control-label">Filter:</div>
            <button class="filter" data-filter="all">All</button>
            <button class="filter" data-filter=".cat-1">Category 1</button>
    <button class="filter" data-filter=".cat-2">Category 2</button>
        </div>
    </div>
</div>

<div class="your-container">
    <div class="box mix cat-1">
        <div class="boxInner">
            <a href="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" data-lightbox="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" title="Category-1"><img src="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" /></a>
        <div class="titleBox">Category-1</div>
        </div>
    </div>
    <div class="box mix cat-1">
        <div class="boxInner">
            <a href="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" data-lightbox="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" title="Category-1"><img src="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" /></a>
        <div class="titleBox">Category-1</div>            
        </div>
    </div>
    <div class="box mix cat-1">
        <div class="boxInner">
            <a href="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" data-lightbox="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" title="Category-1"><img src="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" /></a>
        <div class="titleBox">Category-1</div>            
        </div>
    </div>
    <div class="box mix cat-2">
        <div class="boxInner">
            <a http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" data-lightbox="http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" title="Category-2"><img src="http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" /></a>
        <div class="titleBox">Category-2</div>            
        </div>
    </div>
    <div class="box mix cat-2">
        <div class="boxInner">
            <a http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" data-lightbox="http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" title="Category-2"><img src="http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" /></a>
        <div class="titleBox">Category-2</div>            
        </div>
    </div>
    <div class="box mix cat-2">
        <div class="boxInner">
            <a http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" data-lightbox="http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" title="Category-2"><img src="http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" /></a>
        <div class="titleBox">Category-2</div>            
        </div>
    </div>
    <div class="box mix cat-3">
        <div class="boxInner">
            <a href="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" data-lightbox="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" title="Category-3"><img src="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" /></a>
        <div class="titleBox">Category-3</div>            
        </div>
    </div>
    <div class="box mix cat-3">
        <div class="boxInner">
            <a href="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" data-lightbox="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" title="Category-3"><img src="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" /></a>
        <div class="titleBox">Category-3</div>            
        </div>
    </div>
    <div class="box mix cat-3">
        <div class="boxInner">
            <a href="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" data-lightbox="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" title="Category-3"><img src="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" /></a>
        <div class="titleBox">Category-3</div>            
        </div>
    </div>
    <div class="gap"></div>
</div>

您的fiddle缺少了过滤控件(非常重要!),并且奇怪地缺少了“gap”div(s)和javascript来运行整个程序。

Javascript(jQuery):

<script type="text/javascript">
    $(function(){
        $('.your-container').mixItUp();
    });
</script>

此外,您需要将要过滤的项目包装在另一个容器中,并使用“display:none”将其设置为隐藏;这将是MixItUp用于动画和布局项目的包装。最后,删除你的box类(我注释了你的所有样式,绝对定位打破了MixItUp),让插件使用“内联块”自动重新排列所有内容:

样式表(CSS):

<style type="text/css">
    .your-container .mix {display:none;}
</style>

希望这对你有所帮助。仔细阅读MixItUp文档: https://mixitup.kunkalabs.com/learn/tutorial/get-started/

我是MixItUp的忠实粉丝,发现它神奇地易于开箱即用。如果你只需要一些简单的东西,那么比同位素要好得多。

您甚至可以使用多媒体资料的弹出窗口:

html格式

<div id="Container" class="container>
<li class="mix category-1"><img src="/image/1.jpg" longdesc="#1" onclick="jQuery_modal(this)" alt=""></li>
<li class="mix category-1"><img src="/image/2.jpg" longdesc="#2" onclick="jQuery_modal(this)" alt=""></li>
.….
</ul>
</div>

jQuery_modal.js

function jQuery_modal(obj){
if ( 0 == jQuery(obj).attr('longdesc').indexOf('#') ){
jQuery(jQuery(obj).attr('longdesc')).dialog({ height: 600, width: 700, modal: true });
}
else{
jQuery("#dialog-modal").text(jQuery(obj).attr('longdesc'));
jQuery("#dialog-modal").dialog({ height: 240, modal: true });
}
}

Demo, take a look