同位素僅在一個圖像容器中工作

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 
    } 
    }); 

祝你好運！