html - 在图库中使用 MixItUp 插件

Question

我对此很陌生，如果很明显，我很抱歉!

我拥有的是:一系列方形 div，其中包含图片，形成一个缩略图库。

<div class="category-1" data-myorder="1">
<div class="box">
 <div  class="boxInner">
  <a href="y1p1T.jpg" data-lightbox="y1p1T.jpg" title="y1p1"> <img src="y1p1T.jpg" /></a>
   <div class="titleBox">y1p1</a><br>
   <p id="workCat">Design</p></div>
 </div>

上面的代码适用于构成方形缩略图库的 12 张图像中的一张在顶部，我尝试将其分为 3 类:ALL|Category-1|Category-2

目前情况是这样的:页面加载时突出显示“全部”按钮，并且所有图像均未显示当我点击另一个按钮时，会显示看似随机选择的图像(即在上图中，它忽略了“category-1”类)。

我希望这是有道理的!谢谢

Answer 1

标记(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 缺少过滤控件(非常重要!)，奇怪的是，缺少使整个程序运行的“间隙”div 和 javascript。

Javascript(jQuery):

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

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

样式表 (CSS):

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

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

我是 MixItUp 的忠实粉丝，发现它开箱即用非常简单。如果您只需要精简的东西，那么比 Isotope 好得多。