Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Masonry JS Overlapping Items

Tags:

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 ?

like image 972
Jed Avatar asked Sep 17 '13 11:09

Jed


People also ask

What is masonry JS?

What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You've probably seen it in use all over the Internet. Install.

What is jQuery masonry?

Masonry is a Pinterest Style Dynamic Layout jQuery Plugin. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid.


2 Answers

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.
like image 139
Eli Gassert Avatar answered Sep 28 '22 20:09

Eli Gassert


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

like image 22
Zbigniew Ledwoń Avatar answered Sep 28 '22 22:09

Zbigniew Ledwoń