Question

我现在正在使用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。它包括jquery和isotope通过cdnjs.com：http://codepen.io/monsto/pen/qlKLg

我的问题是......

我在设置中错过了什么？显然我错过了什么。
无论我错过了什么，如果指出，我在文档中哪里错过了？
是否有测试或回调等，我可以让同位素吐出一些对页面的确认？我的意思是，只是因为装载并不意味着它正在射击。

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

Answer 1

首先，您在加载页面之前定义$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]

jquery同位素不会启动

1 个答案: