砌体布局只在页面刷新时打破（图像将重叠）

我在Bootstrap中使用了我的rails项目中的砌体。砌体布局只在页面刷新时打破（图像将重叠）

下面是我使用的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'

来源

2017-04-17 Joshua

如果在砌体视图中使用的图像需要花费一些时间来加载和砖石视图的产生之前，如果未加载图像然后，图像将看起来相互重叠。你必须实现两个方案来解决这个

首先，添加

float:left

到用于砌筑视图股利。

二，setTimeout调用你的石工功能。下面的示例

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

希望这会帮助你。

来源

2017-04-17 06:01:34

砌体布局只在页面刷新时打破（图像将重叠）

回答

相关问题