CODEWITHSUNDEEP
jquerycssjquery-masonry
Jed
Jed

Reputation: 1733

Masonry JS Overlapping Items

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 ?

Upvotes: 24

Views: 35837

Answers (8)

Franky
Franky

Reputation: 17

it's most likely because u're importing the js too soon and it doesn't have a target to be executed on, try to add "defer" to the import, u can do like this:

<script type='text/javascript' src='src/js/mensory-min.js' defer></script>

the key is adding defer at the end of the imprort which will make it load after the entire page has loaded.

P.S. giving a height to the grid-item won't solve anything cuz it is in position absolute

Upvotes: 0

93_virus
93_virus

Reputation: 1

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

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

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

Upvotes: -2

sybozz
sybozz

Reputation: 937

Loading masonry after window load works for me.

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

Upvotes: 0

Disapamok
Disapamok

Reputation: 1475

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

.image{ min-height: 250px; }

Upvotes: 2

Zbigniew Ledwoń
Zbigniew Ledwoń

Reputation: 682

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

Upvotes: 17

Carlos Angulo
Carlos Angulo

Reputation: 301

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

Upvotes: 3

Jeff Shain
Jeff Shain

Reputation: 775

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
                });                         
            }

Upvotes: 2

Eli Gassert
Eli Gassert

Reputation: 9763

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.

Upvotes: 70

Related Questions