javascript - 如何在 Isotope.js 的链接点击上触发事件？

Question

我正在尝试将单击事件的函数添加到我的代码中。顺便说一下，这是使用 Isotope.js，一个非常酷的 jQuery 工具。

因此，下面的代码的工作原理如下:单击 <ul> 中的数据过滤器链接发射同位素。这会在页面中填充各种 <li>与数据过滤器参数匹配。一切都好。

但是我有额外的代码可以修改 <li> 的大小所以我需要同位素来在点击任何 <li> 时触发以下操作- Isotope 是一个使用砌体的动态页面布局工具。

.isotope( 'reLayout', callback )

这会重置布局属性并布置每个项目元素。请参阅 - isotope.js relayout

我想我只需要另一段脚本代码，当 <li> 时触发重新布局功能。被点击。

这就是我所拥有的...

<ul><a class="black" href="#" data-filter=".'.$folder.'">'.$folder.'</a> </ul>';

<li><a href="'.$file.'">'.rtrim($name,'.mp3').'</a></li>;

<script>
  $('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $('#container').isotope({ filter: selector });
  return false;
});

$('#container').isotope({
  masonry : {
    columnWidth : 1
  }

 }); 
</script>

Answer 1

      // change size of clicked element
      $container.delegate( '.element', 'click', function(){
        $(this).toggleClass('large');
        $container.isotope('reLayout');
      });

这是代码http://isotope.metafizzy.co/demos/relayout.html当页面完全按照您想要执行的操作时使用。同样的方法应该对您有用。

因此 $container 将是您的 $("#container") 并且 .element 将与容器中的元素相同。这会添加或删除一个类“large”，该类“large”具有 css，该 css 赋予该元素更大的尺寸。然后，正如您所指出的，同位素被“重新布局”调用。