0

我现在正在使用 chrome……我想让同位素在处理特定于浏览器的问题（例如 ffox 中的 flexbox 问题）之前正常工作。

所以我这样称呼同位素：

<head>
<!-- isotope -->
<script src="../javascript/isotope-master/jquery.isotope.min.js"></script>
<script type="text/javascript">
  var $container = $('.content');
  $container.isotope({
    // options
    itemSelector : '.entry',
  });
</script>
</head>

然后后来我在<div class="content">里面<article class="entry">。

chrome 检查器告诉我 isotope.js 正在加载而没有错误，但我的意思是页面上没有发生任何事情。

更新：根据回复，我决定将基础知识放入 codepen。它通过 cdnjs.com 包括 jquery 和同位素：http: //codepen.io/monsto/pen/qlKLg

我的问题是...

  1. 我在设置中错过了什么？显然我错过了一些东西。
  2. 无论我错过了什么，如果指出，我在文档中错过了什么？
  3. 是否有测试或回调或类似的方法可以让同位素向页面吐出某种 ACK？我的意思是，仅仅因为它正在加载并不意味着它正在发射。

更新 看来我在理解安装同位素究竟需要做什么方面存在严重缺陷。即使遵循示例，它也不起作用（我想我很特别）。上面列表中的问题#1 和#2 是最重要的。

4

1 回答 1

0

首先，您$container在加载页面之前进行定义，这将防止同位素附着到元素上；要解决此问题，请执行以下操作。

$(function() {
    var $container = $('.content');
    // ...
});

您可以在此处的示例中看到同位素预期的顺序：https ://github.com/desandro/isotope/blob/master/_posts/demos/2010-12-12-basic.html

现在另外，我遇​​到了未设置 CSS3 过渡的问题，可以通过以下方式完成。

.isotope, .isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
          transition-property:         transform, opacity;
}

[在文档中：http://isotope.metafizzy.co/docs/animating.html#content]

于 2013-07-15T22:40:02.963 回答