Masonry JS Overlapping Items

Question

I have a very strange problem in here: [Referral Link Removed]. The first row product items overlapped with the items in the second row.

The masonry items are below the homepage above the footer. As you can see, it looks different with Chrome. In firefox, it looks good.

Here's how it looks in my chrome: http://clip2net.com/s/5LIRko

My jQuery Code is:

jQuery(function($){
var $container = $('.woocommerce ul.products');
    $container.masonry({
          columnWidth:10, 
          gutterWidth: 15,
          itemSelector: '.product-category'
    });
});

Is there any css rule which affects the row output ?

Just curious, what are you using masonry for? They all look to be the same size. Nothing "masonry" about it. If I disable Javascript on the page and refresh, the grid layout looks as expected. — Eli Gassert, Sep 17 '13 at 12:03
Yes but I'm asking why you even need masonry. I see the error, but I don't see what masonry is solving for you over just floating your elements. See my answer below. — Eli Gassert, Sep 17 '13 at 12:08
I used masonry so that it will look good in its responsive part. I just wanna put masonry for the animation feature when resized. — Jed, Sep 17 '13 at 12:09
Ok, fair enough. Then see my responses below for option #2, namely `jQuery(window).on('load'` — Eli Gassert, Sep 17 '13 at 12:11

score 65 · Accepted Answer · edited Jul 13 '15 at 19:53

65

The problem is your images. By the time masonry is called, your images haven't loaded. So it's assuming the height of your elements WITHOUT the height of the image being factored in.

If you refresh your screen after the images are already cached, you'll see that it loads correctly. If you then clear cache and refresh, you'll see they overlap again.

~~Four~~ Five options:

Wait until the images are finished loading (there are plugins that you can wait until all images inside a certain div are loaded, for example)
Wait for the load event instead of the ready event. Instead of using jQuery(function($){ use jQuery(window).on('load', function(){ var $ = jQuery; and you'll see the results.
Re-apply masonry after the images load (Don't like this one... you'd see flicker)
My favorite, don't use masonry here! Disable JS on your page and look at the layout. It's what you want. All the divs are even heights and even widths. There's not really a reason to use masonry here. Just float your elements and let them display in the grid naturally.
EDIT: another option. Specify a height of the divs so the height doesn't depend on the images it's loading.

edited Jul 13 '15 at 19:53

The_Black_Smurf

5,041
14
50
66

answered Sep 17 '13 at 12:07

Eli Gassert

9,338
3
24
37

i think thats the problem. Because there are times, when I reload, it loads successfully. – Jed Sep 17 '13 at 12:15
how can will i write it correctly? Im not very good in javascript. – Jed Sep 17 '13 at 12:16
11

I added a fifth option. And how to write it, I already said. Replace `jQuery(function($){` that line with `jQuery(window).on('load', function($){` that line that wraps around your masonry call (the code you posted in your Q) – Eli Gassert Sep 17 '13 at 12:18
An error appeared when I applied the second option, it says: "Uncaught TypeError: object is not a function." – Jed Sep 17 '13 at 12:26
Yea sorry, bad copy paste on my part. I've updated my answer. That first line should be `jQuery(window).on('load', function(){ var $ = jQuery;` – Eli Gassert Sep 17 '13 at 12:29
2

terrific! This worked perfectly: "Wait for the load event instead of the ready event. Instead of using jQuery(function($){ use jQuery(window).on('load', function(){ var $ = jQuery; and you'll see the results." – user2513846 Aug 10 '16 at 16:05

score 13 · Answer 2 · edited May 30 '16 at 18:31

13

You need to initiate Masonry after all images are loaded. If you are using jQuery try:

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

for other options see Masonry docs - http://masonry.desandro.com/layout.html#imagesloaded

edited May 30 '16 at 18:31

Michael Tunnell

215
2
12

answered Oct 16 '14 at 15:54

Zbigniew Ledwoń

622
1
6
16

score 2 · Answer 3 · answered Nov 06 '15 at 21:12

I've solved this issue with a settimeout function. By allowing a second or so to pass (depending on the # and file size of the images being downloaded) you can download the images first then apply masonry.

                $(document).ready(function(){                                                                                                                   
                setTimeout(function() { masonry_go();masonry_go2();}, 1000);                                                                    
            });     
            $(window).resize(function() 
            {
                // jQuery
                $('.grid').masonry( 'destroy')
                $('.grid2').masonry( 'destroy')                 
                setTimeout(function() { masonry_go();masonry_go2();}, 1000);                                                                    
            });                 
            function masonry_go(){
                $('.grid').masonry({
                  // options
                  itemSelector: '.grid-item',
                  columnWidth: 300
                });                         
            }       
            function masonry_go2(){
                $('.grid2').masonry({
                  // options
                  itemSelector: '.grid-item2',
                  gutter: 15,
                  columnWidth: 200
                });                         
            }

masonry('destroy') is an effective solution before loading second time. — Vijay Kumar Kanta, Jan 28 '19 at 07:51
Thanks your solution works after replacing document.ready with jQuery(window).on('load', function(){ — ziaprog, May 29 '15 at 13:15

score 2 · Answer 4 · answered Apr 28 '16 at 04:36

2

Use the ImagesLoaded library, is made specially to reorganize the blocks when each image is loaded.

You can download it from:

https://github.com/desandro/imagesloaded

answered Apr 28 '16 at 04:36

Carlos Angulo

251
3
9

can you add more details on how it is used. – JGallardo Jul 20 '16 at 23:21

score 1 · Answer 5 · answered Apr 10 '19 at 07:33

1

Add minimum height for images with CSS. That would fix the issue.

.image{ min-height: 250px; }

answered Apr 10 '19 at 07:33

Disapamok

1,083
2
16
23

score 0 · Answer 6 · edited May 06 '19 at 03:06

0

Loading masonry after window load works for me.

jQuery(window).on('load', function(){
    //masonry init and options
    // .. codes
}

edited May 06 '19 at 03:06

cela

2,059
3
19
37

answered Jul 30 '18 at 08:21

sybozz

540
5
7

score -1 · Answer 7 · answered May 03 '20 at 16:35

-1

$(window).on('load',function(){ });

$(window).on('load',function(){
//code
});

//use load event instead of document.ready starting of jquery

answered May 03 '20 at 16:35

93_virus

1

Masonry JS Overlapping Items

7 Answers7

Linked