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

Question

我正在使用 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>

Answer 1

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

此外，为了使图片成比例且间距均匀，将每个 .grid-item class 的宽度设置为 50%，将每个图像的宽度设置为 calc(100% - 0.25rem)，然后更改布局模式为 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3.0.6/dist/isotope.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.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 JS 使图像大小相同

How to get the images to be the same size using Isotope JS

html

javascript

css

jquery

jquery-isotope