砌體佈局只在頁面刷新時打破（圖像將重疊）

我在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

砌體佈局只在頁面刷新時打破（圖像將重疊）

回答

相關問題