砌體/同位素佈局中的孔

Question

我不明白爲什麼我的同位素佈局不起作用？ 佈局中有洞，當不應該是？ 我在做什麼錯？

http://isotope.metafizzy.co/options.html#percentposition

$(document).ready(function() { 

var $grid = $('.portfolio').isotope({ 
       percentPosition: true, 
    layoutMode: 'masonry', 
       itemSelector: '.item', 

       masonry: { 
       columnWidth: '.grid-sizer' 
       } 
      }) 

}); 

見codepen：http://codepen.io/ifeltblankk/pen/LxqXVW

爲什麼，用相同的代碼，它適用於codepen，而不是在網站上... http://clients.studio24-24.com/veronika/isotope/

Answer 1

$(document).ready(function() { 
 
    var $grid = $('.portfolio').isotope({ 
 
    layoutMode: 'masonry' 
 
    }) 
 
});

.portfolio .item img { 
 
    width: 100%; 
 
    display: block; 
 
} 
 

 
.item { 
 
    width: 24%; 
 
    background: #e6e5e4; 
 
} 
 

 
.grid-sizer, 
 
.item { 
 
    width: 24%; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="//npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script> 
 
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> 
 
<div class="portfolio"> 
 

 
    <div class="n1 item"> 
 
    <img class="w-20 p-10" src="http://clients.studio24-24.com/veronika/isotope/images/Daniel-Peace-x-Lusty-Ice-x-Effy-Nails-03.jpg" alt=""> 
 
    </div> 
 
    <div class="n2 item"> 
 
    <img class="w-20 p-10" src="http://clients.studio24-24.com/veronika/isotope/images/Henrike-Stahl-The-Forumist-02.jpg" alt=""> 
 
    </div> 
 
    <div class="n3 item"> 
 
    <img class=" w-30 p-10" src="http://clients.studio24-24.com/veronika/isotope/images/Henrike-Stahl-The-Forumist-09.jpg" alt=""> 
 
    </div> 
 
    <div class="n1 item"> 
 
    <img class="w-40 p-10" src="http://clients.studio24-24.com/veronika/isotope/images/Wilkosz&Way-SLEEK-Magazine-01.jpg" alt=""> 
 
    </div> 
 
    <div class="n1 item"> 
 
    <img class="w-30 p-10" src="Par-hasard-studio-paris-design-graphique-logo-05.jpg" alt=""> 
 
    </div> 
 
    <div class="n2 item"> 
 
    <img class=" w-30 p-10" src="http://clients.studio24-24.com/veronika/isotope/images/Joana-Krawczyk-Eclectic-&-Less-Magazine-14.jpg" alt=""> 
 
    </div> 
 
    <div class="n2 item"> 
 
    <img class="w-30 p-10" src="http://clients.studio24-24.com/veronika/isotope/images/Par-hasard-studio-paris-design-graphique-logo-03.jpg" alt=""> 
 
    </div> 
 
    <div class="n2 item"> 
 
    <img class="w-30 p-10" src="http://clients.studio24-24.com/veronika/isotope/images/Joana-Krawczyk-Eclectic-&-Less-Magazine-01.jpg" alt=""> 
 
    </div> 
 
    <div class="n1 item"> 
 
    <img class="w-20 p-10" src="http://clients.studio24-24.com/veronika/isotope/images/Daniel-Peace-x-Lusty-Ice-x-Effy-Nails-03.jpg" alt=""> 
 
    </div> 
 
    <div class="n2 item"> 
 
    <img class="w-20 p-10" src="http://clients.studio24-24.com/veronika/isotope/images/Henrike-Stahl-The-Forumist-02.jpg" alt=""> 
 
    </div> 
 
    <div class="n3 item"> 
 
    <img class=" w-30 p-10" src="http://clients.studio24-24.com/veronika/isotope/images/Henrike-Stahl-The-Forumist-09.jpg" alt=""> 
 
    </div> 
 
    <div class="n1 item"> 
 
    <img class="w-40 p-10" src="http://clients.studio24-24.com/veronika/isotope/images/Wilkosz&Way-SLEEK-Magazine-01.jpg" alt=""> 
 
    </div> 
 
    <div class="n1 item"> 
 
    <img class="w-30 p-10" src="http://clients.studio24-24.com/veronika/isotope/images/Lucio-Aru-&-Franco-Erre-Eclectic Magazine-07.jpg" alt=""> 
 
    </div> 
 
    <div class="n2 item"> 
 
    <img class=" w-30 p-10" src="http://clients.studio24-24.com/veronika/isotope/images/Joana-Krawczyk-Eclectic-&-Less-Magazine-14.jpg" alt=""> 
 
    </div> 
 
    <div class="n2 item"> 
 
    <img class="w-30 p-10" src="http://clients.studio24-24.com/veronika/isotope/images/Joana-Krawczyk-Eclectic-&-Less-Magazine-09.jpg" alt=""> 
 
    </div> 
 
    <div class="n2 item"> 
 
    <img class="w-30 p-10" src="http://clients.studio24-24.com/veronika/isotope/images/Joana-Krawczyk-Eclectic-&-Less-Magazine-01.jpg" alt=""> 
 
    </div> 
 

 
</div>