Question

出于某种原因，JQuery Isotope只在一个图像容器中工作。谁能告诉我为什么？

    <div id="container"><div>
        <img class="item" src="./download/file.php?id=77&amp;t=1" alt="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg"  width="200" height="126" />
    </div><div>
        <img class="item" src="./download/file.php?id=80&amp;t=1" alt="gh h gh gjgh h gjjh gk - blog130812_fish.jpg"  width="200" height="133" />
    </div></div>

    <div id="container"><div>
        <img class="item" src="./download/file.php?id=90&amp;t=1" alt="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" title="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" width="200" height="133" />
    </div><div>
        <img class="item" src="./download/file.php?id=92&amp;t=1" alt="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" title="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" width="200" height="126" />
    </div></div>

 <script>
  var $container = $('#container');
  $container.isotope({
    itemSelector: '.item',
    animationEngine : 'jquery',
    animationOptions: {
        duration: 350,
        easing: 'linear',
        queue: false
    },
    masonry: {
        columnWidth: 203
    }
  });
  </script>

Answer 1

问题是您在一个页面上使用了两个相同的ID。 ID必须是唯一的，您必须将所有项目分组到一个特定ID（#container）中，以便将同位素应用于所有.item个节点。我已经澄清了HTML以证明这一点（这将使所有四个项目相互交互）：

<div id="container">
    <img class="item" src="./download/file.php?id=77&amp;t=1" alt="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg"  width="200" height="126" />
    <img class="item" src="./download/file.php?id=80&amp;t=1" alt="gh h gh gjgh h gjjh gk - blog130812_fish.jpg"  width="200" height="133" />
    <img class="item" src="./download/file.php?id=90&amp;t=1" alt="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" title="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" width="200" height="133" />
    <img class="item" src="./download/file.php?id=92&amp;t=1" alt="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" title="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" width="200" height="126" />
</div>

请记住同位素根据#container宽度和高度定位所有元素，因此除非您明确声明两个ID，否则在两个单独的ID中使用.item的可能性可能不会很好。这是一个有两个独立同位素实例的例子：

<div id="container">
    <img class="item" src="./download/file.php?id=77&amp;t=1" alt="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg"  width="200" height="126" />
    <img class="item" src="./download/file.php?id=80&amp;t=1" alt="gh h gh gjgh h gjjh gk - blog130812_fish.jpg"  width="200" height="133" />
</div

<div id="container2">
    <img class="item" src="./download/file.php?id=90&amp;t=1" alt="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" title="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" width="200" height="133" />
    <img class="item" src="./download/file.php?id=92&amp;t=1" alt="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" title="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" width="200" height="126" />
</div>

和JS：

  var $container = $('#container');
  var $container2 = $('#container2');

  $container.isotope({
    itemSelector: '.item',
    animationEngine : 'jquery',
    animationOptions: {
        duration: 350,
        easing: 'linear',
        queue: false
    },
    masonry: {
        columnWidth: 203
    }
  });

  $container2.isotope({
    itemSelector: '.item',
    animationEngine : 'jquery',
    animationOptions: {
        duration: 350,
        easing: 'linear',
        queue: false
    },
    masonry: {
        columnWidth: 203
    }
  });

祝你好运！

同位素仅在一个图像容器中工作

1 个答案: