实现jQuery同位素 [英] Implementing jQuery isotope

查看：87
本文介绍了实现jQuery同位素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在尝试实施真棒同位素插件 http://isotope.metafizzy.co/index .html



我正面临一个过滤器的问题，目前无法找到解决方法：



发生的情况是当单击全部过滤器链接时，所有项目都会显示，但是当其他过滤器链接单击时，所有项目都会消失。我真的很感谢一些帮助：）



我已经设置了一个 JSFiddle



以下是代码：

HTML： 

 < div class =large-12 columns> 
< ul id =portfolio-filter> 
< li>< a href =＃data-filter =*> ALL< / a>< / li> 
< li>< a href =＃data-filter =。website> WEBSITE< / a>< / li> 
< li>< a href =＃data-filter =.logos> LOGOS< / a>< / li> 
< li>< a href =＃data-filter =。illustrations> ILLUSTRATIONS< / a>< / li> 
< li>< a href =＃data-filter =。brand> BRAND< / a>< / li> 
< li>< a href =＃data-filter =。ui> UI< / a>< / li> 
< li>< a href =＃data-filter =。icons>图标< / a>< / li> 
< / ul> 
< div id =portfolio-container> 
< ul class =small-block-grid-2> 
< li>< div class =website>< a href =＃>< img src =img / portfolio / small-01.jpgalt => < / A>< / DIV>< /锂> 
< li>< div class =logos>< a href =＃>< img src =img / portfolio / small-02.jpgalt => < / A>< / DIV>< /锂> 
< li>< div class =illustrations>< a href =＃>< img src =img / portfolio / small-03.jpgalt => < / A>< / DIV>< /锂> 
< li>< div class =brand>< a href =＃>< img src =img / portfolio / small-04.jpgalt => < / A>< / DIV>< /锂> 
< li>< div class =ui>< a href =＃>< img src =img / portfolio / small-05.jpgalt => < / A>< / DIV>< /锂> 
< li>< div class =icons>< a href =＃>< img src =img / portfolio / small-06.jpgalt => < / A>< / DIV>< /锂> 
< li>< div class =website>< a href =＃>< img src =img / portfolio / small-07.jpgalt => < / A>< / DIV>< /锂> 
< li>< div class =logos>< a href =＃>< img src =img / portfolio / small-08.jpgalt => < / A>< / DIV>< /锂> 
< li>< div class =illustrations>< a href =＃>< img src =img / portfolio / small-09.jpgalt => < / A>< / DIV>< /锂> 
< li>< div class =brand>< a href =＃>< img src =img / portfolio / small-10.jpgalt => < / A>< / DIV>< /锂> 
< li>< div class =ui>< a href =＃>< img src =img / portfolio / small-11.jpgalt => < / A>< / DIV>< /锂> 
< li>< div class =icons>< a href =＃>< img src =img / portfolio / small-12.jpgalt => < / A>< / DIV>< /锂> 
< li>< div class =website>< a href =＃>< img src =img / portfolio / small-13.jpgalt => < / A>< / DIV>< /锂> 
< li>< div class =logos>< a href =＃>< img src =img / portfolio / small-14.jpgalt => < / A>< / DIV>< /锂> 
< li>< div class =illustrations>< a href =＃>< img src =img / portfolio / small-15.jpgalt => < / A>< / DIV>< /锂> 
< li>< div class =brand>< a href =＃>< img src =img / portfolio / small-16.jpgalt => < / A>< / DIV>< /锂> 
< / ul> 
< / div><！ -  / portfolio-container  - > 
< / div><！ -  / large-12 columns  - >

JavaScript： 

 < code $ $（document）.ready（function（）{
 
 // cache container 
 var $ container = $（'＃portfolio-container'）; 
 //初始化同位素
 $ container.isotope（{
 // options ... 
}）; 
 
 //单击过滤器链接时过滤项目
 $（'＃portfolio-filter li a'）。click（function（）{
 var selector = $（this）.attr（'data-filter'）; 
 $ container.isotope（ {filter：selector}）; 
 return false; 
}）; 
}）;


解决方案


  1. 应用选择器类直接到< ul class =small-block-grid-2> 内的< li> >并清除图像周围的div。

  2. 确保所有img标签都已正确关闭，< img ..... /> 。

  3. 将同位素应用于< ul class =small-block-grid-2> / li>



HTML 



 < div ID = 组合容器 > 
< ul class =small-block-grid-2> 
< li class =website>< a href =＃>< img src =img / portfolio / small-01.jpgalt =/><一个>< /锂> 
 ... 
< / ul> 
< / div>



javascript 



  var $ container = $（'。small-block-grid-2'）; 
 //初始化同位素
 $ container.isotope（{
 // options ... 
}）; 
 
 //单击过滤器链接时过滤项目
 $（'＃portfolio-filter li a'）。on（'click'，function（）{
 var selector = $（this）.data（'filter'）; 
 $ container.isotope（{
 filter：selector 
}）; 
 return false; 
}）;

更新小提琴


I've been trying to implementing the awesome isotope plugin http://isotope.metafizzy.co/index.html

I am facing a problem with a filter and am not able to find a workaround for it so far:

What is happening is that when "ALL" filter link is clicked, all items are displayed but when any other filter link is clicked, all the items disappear. I would really appreciate some help:)

I have set up a JSFiddle

And here's the code:

HTML:

<div class="large-12 columns">
    <ul id="portfolio-filter">
        <li><a href="#" data-filter="*">ALL</a></li>
        <li><a href="#" data-filter=".website">WEBSITE</a></li>
        <li><a href="#" data-filter=".logos">LOGOS</a></li>
        <li><a href="#" data-filter=".illustrations">ILLUSTRATIONS</a></li>
        <li><a href="#" data-filter=".brand">BRAND</a></li>
        <li><a href="#" data-filter=".ui">UI</a></li>
        <li><a href="#" data-filter=".icons">ICONS</a></li>
    </ul>
    <div id="portfolio-container">
        <ul class="small-block-grid-2">
            <li><div class="website"><a href="#"><img src="img/portfolio/small-01.jpg" alt=""></a></div></li>
            <li><div class="logos"><a href="#"><img src="img/portfolio/small-02.jpg" alt=""></a></div></li>
            <li><div class="illustrations"><a href="#"><img src="img/portfolio/small-03.jpg" alt=""></a></div></li>
            <li><div class="brand"><a href="#"><img src="img/portfolio/small-04.jpg" alt=""></a></div></li>
            <li><div class="ui"><a href="#"><img src="img/portfolio/small-05.jpg" alt=""></a></div></li>
            <li><div class="icons"><a href="#"><img src="img/portfolio/small-06.jpg" alt=""></a></div></li>
            <li><div class="website"><a href="#"><img src="img/portfolio/small-07.jpg" alt=""></a></div></li>
            <li><div class="logos"><a href="#"><img src="img/portfolio/small-08.jpg" alt=""></a></div></li>
            <li><div class="illustrations"><a href="#"><img src="img/portfolio/small-09.jpg" alt=""></a></div></li>
            <li><div class="brand"><a href="#"><img src="img/portfolio/small-10.jpg" alt=""></a></div></li>
            <li><div class="ui"><a href="#"><img src="img/portfolio/small-11.jpg" alt=""></a></div></li>
            <li><div class="icons"><a href="#"><img src="img/portfolio/small-12.jpg" alt=""></a></div></li>
            <li><div class="website"><a href="#"><img src="img/portfolio/small-13.jpg" alt=""></a></div></li>
            <li><div class="logos"><a href="#"><img src="img/portfolio/small-14.jpg" alt=""></a></div></li>
            <li><div class="illustrations"><a href="#"><img src="img/portfolio/small-15.jpg" alt=""></a></div></li>
            <li><div class="brand"><a href="#"><img src="img/portfolio/small-16.jpg" alt=""></a></div></li>
        </ul>   
    </div><!-- /portfolio-container -->
</div><!-- /large-12 columns -->

JavaScript:

$(document).ready(function(){

  // cache container
  var $container = $('#portfolio-container');
  // initialize isotope
  $container.isotope({
    // options...
  });

  // filter items when filter link is clicked
  $('#portfolio-filter li a').click(function(){
    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    return false;
  });
});

解决方案

  1. Apply the selector classes directly to the <li> elements inside <ul class="small-block-grid-2"> and purge the divs from around the images.
  2. Make sure all the img tags are properly closed, <img ..... />.
  3. Apply isotope to <ul class="small-block-grid-2">

HTML

<div id="portfolio-container">
    <ul class="small-block-grid-2">
        <li class="website"><a href="#"><img src="img/portfolio/small-01.jpg" alt="" /></a></li>
        ...
    </ul>
</div>

javascript

var $container = $('.small-block-grid-2');
// initialize isotope
$container.isotope({
    // options...
});

// filter items when filter link is clicked
$('#portfolio-filter li a').on('click', function() {
    var selector = $(this).data('filter');
    $container.isotope({
        filter: selector
    });
    return false;
});

Updated fiddle

这篇关于实现jQuery同位素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆