javascript - 砌体布局仅在刷新页面时中断(图像会重叠)

我在Bootstrap的Rails项目中使用Masonry。

这是我正在使用的JS：

posts.js

$(function() {
  return $('.masonry-container').imagesLoaded(function() {
    return $('.masonry-container').masonry({
      itemSelector: '.box ',
      columnWidth: function(containerWidth) {
        if ($(window).width() >= 992) {
          return containerWidth / 3;
        }
      }
    });
  });
});

在视图中

posts.html.erb

<div class="container">
  <div class="row masonry-container">
      <div class="box col-sm-4">
        <div class="thumbnail">
          image_tag
          <div class="caption">
          h5
          </div>
        </div>
      </div>
  </div>
</div>

这适用于桌面视图和移动视口。即使单击链接并在站点中四处移动，砌体也始终可以正确加载。但是，仅当刷新页面时，砖石结构才能在移动视口上断开。链接很好，但刷新会破坏砌体布局。知道为什么吗？谢谢你的帮助。

application.js

//= require jquery
//= require jquery_ujs
//= require masonry/jquery.masonry
//= require masonry/jquery.imagesloaded.min
//= require turbolinks
//= require bootstrap-sprockets
//= require selectize
//= require jquery.atwho
//= require cocoon
//= require_tree .

宝石文件

gem 'masonry-rails'

最佳答案

如果在“砌体”视图中使用的图像需要花费一些时间来加载，而在未生成图像的情况下，在生成砌体视图之前，则图像看起来会相互重叠。您必须为此实现两个解决方案

首先，添加


  float:left


到用于砌体视图的div。

其次，setTimeout调用您的砌体函数。下面的例子


  setTimeout（function（）{call_masonry（）;}，2000）;


希望这会帮助你。

关于javascript - 砌体布局仅在刷新页面时中断(图像会重叠)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43444488/