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>

砌体/同位素布局中的孔

1 个答案: