如何使用 Isotope JS 使图像大小相同

如何解决如何使用 Isotope JS 使图像大小相同

我正在使用 Isotope JS 并且我正在尝试获得均匀分布的比例画廊布局，但我不确定有什么问题。我的代码不与同位素合作。如果有人能帮我弄清楚我做错了什么，我将不胜感激。

如果这也有帮助，我创建了一个代码笔：https://codepen.io/jaytb95/pen/vYxMGqP

$(document).ready(function() {
    $grid = $('.grid').isotope({
        filter: '*',itemSelector: '.grid-item',layoutMode: 'fitRows',percentPosition: true
    });
    $filters = $('.list');
    
    $filters.click(function() {
        $value = $(this).attr('data-filter');
        if ($value == 'all') {
            $grid.isotope({ filter: '*' });
        } else {
          $grid.isotope({ filter: '.' + $value });  
        }
        
    });
});

ul {
            display: flex;
            list-style: none;
            justify-content: center;
            margin-top: 25px;
        }

        ul > li {
            margin-left: 15px;
            cursor: pointer;
            padding: 0.5rem 1rem;
            background-color: crimson;
            color: white;
            font-family: 'Calibri',sans-serif;
        }

.container {
    max-width: 90%;
    margin: 0 auto;
}

.grid {
    columns: 4 25vh;
}

.grid-item img {
    object-fit: cover;
    width: 100%;
    height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3.0.6/dist/isotope.pkgd.min.js"></script>

<ul>
    <li class="list" data-filter="all">All</li>
    <li class="list" data-filter="phone">Phone</li>
    <li class="list" data-filter="camera">Camera</li>
    <li class="list" data-filter="watch">Watch</li>
</ul>
<div class="container">
    <div class="grid">
        <div class="grid-item phone">
            <img src="https://picsum.photos/500/300" alt="" />
        </div>
        <div class="grid-item camera">
            <img src="https://picsum.photos/400/200" alt="" />
        </div>
        <div class="grid-item watch">
            <img src="https://picsum.photos/500/300" alt="" />
        </div>
        <div class="grid-item camera">
            <img src="https://picsum.photos/400/200" alt="" />
        </div>
        <div class="grid-item watch">
            <img src="https://picsum.photos/500/300" alt="" />
        </div>
        <div class="grid-item camera">
            <img src="https://picsum.photos/400/200" alt="" />
        </div>
        <div class="grid-item watch">
            <img src="https://picsum.photos/500/300" alt="" />
        </div>
    </div>
</div>

解决方法

您应该在加载所有图像后初始化 Isotope。这意味着您还必须在代码中包含 imagesLoaded 库。

另外，为了使图片成比例且间隔均匀，将每个.grid-item类的宽度设置为50%，将每个图片的宽度设置为calc(100% - 0.25rem)，并将布局模式更改为{{ 1}}。在此之后，您的“图片库”应该可以正常工作：

masonry

$(document).ready(function() {
  $grid = $(".grid").imagesLoaded(function() {
    $grid.isotope({
      filter: "*",itemSelector: ".grid-item",layoutMode: "masonry",percentPosition: true
    });
  });

  $filters = $(".list");
  $filters.click(function() {
    $value = $(this).attr("data-filter");
    if ($value == "all") {
      $grid.imagesLoaded(function() {
        $grid.isotope({ filter: "*" });
      });
    } else {
      $grid.imagesLoaded(function() {
        $grid.isotope({ filter: "." + $value });
      });
    }
  });
});

ul {
  display: flex;
  list-style: none;
  justify-content: center;
  margin-top: 25px;
}

ul > li {
  margin-left: 15px;
  cursor: pointer;
  padding: 0.5rem 1rem;
  background-color: #dc143c; /* crimson */
  color: #fff; /* white */
  font-family: "Calibri",sans-serif;
}

.container {
  max-width: 90%;
  margin: 0 auto;
}

.grid {
  columns: 4 25vw;
}

.grid-item {
  width: 50%;
}

.grid-item img {
  object-fit: cover;
  -o-object-fit: cover;
  width: calc(100% - 0.25rem);
  height: auto;
}