search

desandro / masonry

:love_hotel: Cascading grid layout plugin
https://masonry.desandro.com
16.44k stars 2.11k forks source link

Layout breaks with percent comma values like (8.333333333333%) #500

Closed themesociety closed 10 years ago

themesociety commented 10 years ago

Hi desandro,

At the moment i work with a fluid 12 column layout, but whenever i use a layout like 3x4Column where the column width is 33.333333333333% it sometimes breaks, sometimes not. I created a fiddle to showcase this. (just resize the browser and please ignore all the inline styles and classes, its the code generated from my wordpress theme).

When i use 4x3 for example (25%) it works great.

http://jsfiddle.net/RuA89/9/

On another note: (i know this is not a support forum so in case just ignore it) When i use imagesLoaded to load all the images in the masonry container sometimes it takes a long time (10+ images) to load so the images are hidden before that. Is there a way to preload and fade in image after image? I saw that on your own page but was not able to reconstruct how you done it. :(

Thanks a lot in advanced desandro. mike

desandro commented 10 years ago

:confetti_ball::balloon::tada::dancers::confetti_ball::balloon::tada::dancers::confetti_ball::balloon::tada::dancers:

Congratulations!! You have opened Masonry issue number 500!

:confetti_ball::balloon::tada::dancers::confetti_ball::balloon::tada::dancers::confetti_ball::balloon::tada::dancers:

Now then, I took a look, but I wasn't able to reproduce in Chrome. See http://codepen.io/desandro/pen/Hcyzw Could you be looking at this on Safari? If so, you might be running to #475.

As for your other request, this is a valid request that has come up befor -- Revealing items when each item has its image loaded. I've opened a separate issue #501 to track that.

themesociety commented 10 years ago

Hmm you are right on chrome is all good, on firefox i got the break BUT not with your example. I try to limit the number to 3 digits after the comma.

Thanks a lot desandro, and happy 500th birthday. :)

desandro commented 10 years ago

Double check your version of Masonry is updated (v3.1.4 is latest). This issue was improved in v3.1.3

themesociety commented 10 years ago

It's the latest, but now with 4 digits after the comma ( 'width: 66.6667%' and so on ) it works perfectly. Thanks again for your help desandro. :)

smeetd commented 10 years ago

I tried using ihover with divs layed out with masonry. While the page loads everything works fine but when resized the lay out gets crippled...it seem like the off-canvas transition elements affects the box size calculation, I tried overflow hidden but couldn't get it working..