Masonry images overlapping above each other

Question

I am working on a masonry layout for an image gallery. But masonry most of the time displays images overlapped on one another. Rest of the time its ok and sometimes some image divs overflow onto the div below their enclosing div.

How to contain these images in and not prevent overlap. imagesLoaded method has been deprecated I think.

ok here is my code:

Example of the image in the partial. There will be many

<div class="container span3" >
        <div class="image">
            <div class="content">
                <a href="/issues/<%= image.id %>"></a>
                <%= image_tag(image.photo.url(:medium)) %>
            </div>
        </div>
        <div class="title">
            <h2><a href="/images/<%= image.id %>"><%= truncate(image.title, :length => 20, :omission => '...') %></a></h2>
        </div>
    </div>

Enclosing code:

<div class="images-grid">
  <div class="row" id="images_container">
    <%= render :partial => 'shared/images' %>
  </div>
</div>

CSS:

.images-grid .container .image {
    overflow:hidden;
    position:relative;
}

.images-grid .container .image img {
    height:auto;
    width:100%;
}

.images-grid .container {
    display:inline-block;
    background-color:#fff;
    margin-bottom:30px;
    padding-bottom:10px;
    position:relative;
}

JQuery:

$(document).ready(function() {
    var $container = $('#images_container');
    // initialize
    $container.masonry({
      columnWidth: 150,
      itemSelector: '.property',
      isAnimated: true,
      isFitWidth: true
    });
});

score 24 · Accepted Answer · edited May 30 '16 at 18:17

24

First use imagesLoaded :

// with jQuery
var $container = $('#container');

// initialize Masonry after all images have loaded  
$container.imagesLoaded( function() {
     $container.masonry();
});

then, if you can, specify the image width/height attributes on image tag

<img src="...." width="200" height="200" />

imagesLoaded is not deprecated:

http://masonry.desandro.com/layout.html#imagesloaded

edited May 30 '16 at 18:17

Michael Tunnell

215
2
12

answered Jul 17 '13 at 10:36

grigno

3,128
4
35
47

I am getting this : `Object [object Object] has no method 'imagesLoaded'` WHen id use imagesLoaded. – Steve Robinson Jul 17 '13 at 10:57
Sorry didnt included imagesloaded.js. Thank you but now the three column has become two column. Ill try fiddling with the css. You have any solutions? – Steve Robinson Jul 17 '13 at 11:01
Hi.. can check this out? http://stackoverflow.com/questions/17698922/jquery-masonry-loading-over-each-other-after-ajax-div-refresh – Steve Robinson Jul 18 '13 at 04:33
I was struggling with this same issue despite using imagesLoaded, and then realized that the Google fonts I was embedding were loading after the images, and would thus throw Masonry off. Nice solution: http://stackoverflow.com/questions/16783015/jquery-masonry-not-working-with-google-fonts. – tinymachine Jun 29 '15 at 02:31
This helped me solve the issue, it was happening in tablets. But what did the trick was adding 'layout' to masonry, like this: $container.masonry('layout'); – rafael.js Mar 14 '20 at 21:29

Masonry images overlapping above each other

1 Answers1

Linked

Related