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

Question

希望你能帮忙解决这个问题，我不是程序员，但我喜欢玩代码，直到我像现在一样陷入困境。我有一个砖石来显示我的投资组合但是当我在最小宽度浏览器中加载页面（如400像素宽度）时，图像被覆盖，我必须调整浏览器的大小，然后才能容纳。

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

非常感谢先进。

the Site

Answer 1

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

  

砌体使用包含一组子项的容器网格元素。

<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插件：$（＆＃39; selector＆＃39;）。masonry（）。

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

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

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

否则，该值按原样使用。

Answer 2

经过大量的搜索和测试后，我意识到问题不在于js代码Isotope或Masonry，而是在html结构中。我无法想象它，我在Muse中做了整个网站，这个程序生成了自己的div，所以不容易找到问题所在。

Answer 3

我喜欢这个解决方案。首先，它不是砌体而是同位素。我用错了JS。我联系开发人员，他告诉我使用此功能imagesloaded

希望这可以帮助其他人。

最好的