CODEWITHSUNDEEP
javascriptjqueryruby-on-rails
Joshua
Joshua

Reputation: 83

Masonry layout breaks only on page refresh (images will overlap)

I am using Masonry in my rails project along with Bootstrap.

Here's the JS I'm using:

posts.js

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

in the view

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>

This works in both desktop view and mobile viewport. Even when I click the links and move around the site, the masonry always loads correctly. However, the masonry breaks on mobile viewport only when I refresh the page. Links are fine but refreshes ruin the masonry layout. Any idea why? Thanks for your help.

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'

Upvotes: 0

Views: 798

Answers (1)

Krishna Rani Sahoo
Krishna Rani Sahoo

Reputation: 1539

If images used in Masonry view takes some time to load and before the generation of masonry view if images are not loaded then, the images will look overlapped with each other. You have to implement two solutions for this

First, add

float:left

to the div which is used for masonry view.

Second, setTimeout to call your masonry function. Example below

setTimeout(function(){call_masonry();},2000);

Hope this will help you.

Upvotes: 1

Related Questions