砌体仅在调整浏览器大小时有效

Question

我有一个砖石结构来展示我的作品集，但是当我在最小宽度的浏览器（例如 400 像素宽度）中加载页面时，图像被覆盖，我必须调整浏览器的大小，然后它们才能适应。

我使用的是从网上下载的 3 个 js 石工主要的 isotope.pkgd

Answer 1

确保正确初始化砌体，因为代码仅在发生某些事件（在您的情况下为调整大小事件）时才有效。

Masonry works on a container grid element with a group of child items.

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

初始化为jQuery

您可以将 Masonry 用作 jQuery 插件：$('selector').masonry().

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

来源：https://masonry.desandro.com/

编辑：如果您想使用选择器，请确保您正在传递字符串（在选项中），因为砖石代码只会运行 document.querySelector 用于字符串。

否则，将按原样使用该值。

Answer 2

我找到了解决办法。首先，它不是砌体而是同位素。我用错了 JS。我联系了开发者，他告诉我使用这个功能 imagesloaded

砌体仅在调整浏览器大小时有效

Masonry only works when resizing browser

javascript

jquery-masonry