使用 Isotope.js 进行砌体布局时如何删除流氓边距？

Question

我使用 Isotope 和 Vanilla JS 制作了砖石网格画廊布局。一切似乎都工作正常，但在调整大小时，砌体元素上有某种右边距，随着视口尺寸变小，右边距也变大。

一切都会好起来的，但是 Chrome 开发工具中没有任何类型的边距或填充或任何东西的痕迹。

我在砌体元素上制作了蓝色背景，因此该边距可以清晰可见......

这是JSfiddle

的链接

CSS：

:root {
  font-family: "Inter", sans-serif;
  line-height: 1.5;
  font-weight: 400;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  background-color: white;
  scrollbar-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body::-webkit-scrollbar {
  display: none;
}

.masonry-grid {
  margin: 0 auto;
  width: 100%;
  max-width: 1440px;
  background-color: royalblue;
}
.masonry-grid,
.masonry-grid * {
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

.item {
  position: relative;
  width: calc(100% - 10px);
  margin-bottom: 10px;
  /* overflow: hidden; */
  /* overflow: hidden; Ensures the pseudo-element stays within the bounds of .item */
  border-radius: 20px;
  /* object-fit: cover; */
  /* margin: 10px 10px 0 10px; */
}

.item img {
  /* max-width: 100%; */
  width: 100%;
  display: block;
  border-radius: 20px;
  transition: all 0.3s; /* Added transition for the blur effect */
  /* object-fit: cover; */
}

.item-info {
  display: none;
}
/* Responsive breakpoints */
@media (min-width: 600px) {
  .item {
    width: calc(50% - 10px);
  }
}

@media (min-width: 960px) {
  .item {
    width: calc(33.33% - 10px);
  }
}

@media (min-width: 1280px) {
  .item {
    width: calc(25% - 10px);
  }
}

@media (min-width: 1600px) {
  .item {
    width: calc(20% - 10px);
  }
}

JS：

let iso

window.onload = function () {
  const grid = document.querySelector(".masonry-grid")
  const filterButtons = document.querySelectorAll(".filter-buttons button")

  // Initialize Isotope after ensuring images have loaded
  imagesLoaded(grid, function () {
    iso = new Isotope(grid, {
      itemSelector: ".item",
      layoutMode: "masonry",
      containerstyle: null,
      masonry: {
        columnWidth: ".item",
        gutter: 12,
        itemSelector: ".item",
      },
    })
  })

  // Re-layout on window resize

  window.addEventListener("resize", () => {
    iso.layout()
    // grid.style.objectFit = "cover"
  })
}

请帮忙，我正在慢慢变得疯狂:)

谢谢

JR

首先，我删除了 HTML、CSS 和 JS 中的所有其他代码，希望其他一些元素可能会出现问题。我在CSS和JS中尝试了几种解决方案：

• 盒子大小，对象适合
• 尝试在窗口视口大小更改时重新初始化同位素，以在视口更改时“重绘”砌体网格
• 尝试使用 Chrome 和 Firefox 开发工具进行检查
• Google 搜索、ChatGPT、Bard 建议的其他几个解决方案....

没有任何帮助:(

Answer 1

我在左侧和右侧看到的边缘是没有砌体网格的区域。要解决此问题，请将砌体网格设置为消耗 100% 的可用宽度。

在 CSS 中，将

max-width

类中的

masonry-grid

设置为 100%。

.masonry-grid {
  margin: 0 auto;
  width: 100%;
  max-width: 100%;  /* change made here */
  /* 3D effect */

  /* perspective: 1000px; */
  /* overflow: hidden; */
  /* 3D effect END */
  /* object-fit: cover; */
  background-color: royalblue;
}

margin: 0 auto;

使内容居中，因此边距出现在两侧而不是一侧。当最大宽度为 100% 时，现在没有边距。