Question

我在我的rails项目中使用Masonry和Bootstrap。

这是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 .

的Gemfile

gem 'masonry-rails'

Answer 1

如果在砌体视图中使用的图像需要一些时间来加载，并且在生成砌体视图之前如果未加载图像，那么图像将看起来彼此重叠。您必须为此

实施两个解决方案

首先，添加

float:left

到用于砌体视图的div。

其次，setTimeout调用你的砌体功能。以下示例

的setTimeout（函数（）{call_masonry（）;}，2000）;

希望这会对你有所帮助。

砌体布局仅在页面刷新时中断（图像将重叠）

1 个答案: