0

今のところクロムを使用しています...ブラウザ固有の問題（たとえば、ffoxのフレックスボックスの問題）に対処する前に、アイソトープを一般的に機能させたいと考えています。

だから私はこのように同位体を呼んでいます：

<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">います。

クロムインスペクターは、isotope.jsがエラーなしでロードされていることを私に伝えていますが、ページ上で何も起こらないことを意味します。

更新:応答に基づいて、基本を codepen に入れることにしました。cdnjs.com 経由で jquery と isotope が含まれています: 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 に答える