jquery同位素赢得't启动

jquery isotope won't start

本文关键字：启动 同位素 jquery      更新时间：2023-09-26

我现在正在使用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">

chromeinspector告诉我，isotope.js加载没有错误，但什么都没有，我的意思是页面上什么都没有发生。

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

我的问题是。。。

  1. 我在设置中错过了什么？很明显我错过了什么
  2. 无论我错过了什么，如果有人指出，我在哪里错过了文档中的内容
  3. 有没有一个测试或回调之类的东西，我可以让同位素向页面吐出一些ACK？我的意思是，仅仅因为它在装货并不一定意味着它在开火

更新看来我在理解安装同位素到底需要做什么方面有严重的不足。即使在下面的例子中，它也不起作用（我想我很特别）。上面列表中的问题#1和#2是最重要的。

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

相关文章：