I suggested masonry because, well, it's the quickest way to get to something like that. For one, Google's looks more like a grid of floats rather than exploring every but of space (unless I missed it).
About the caveat you mentioned, and I imagine that's probably what you meant but for the sake of clarification, you only need to have images having their dimensions pre-specified (or specified on insertion) because there's no way to determine the image's dimensions until it loads. Any other element would get away with it. Probably wouldn't look good if it's a 800px wide paragraph but it definitely would work. And yeah, it is cool :) On Thursday, August 19, 2010, Chris Lloyd <[email protected]> wrote: > On Aug 18, 2:44 pm, Dylan Fogarty-MacDonald <[email protected]> > wrote: >> You could achieve something like this with CSS and no JavaScript: > > Google's implementation is actually quite a bit more complicated and > subtle than what anybody has suggested so far. I suspect that these > smaller details were why you were blown away with it (as I was). > > Firstly, they don't do the hovers in CSS as when you hover over an > image near the edge of the screen, the tooltip actually pushes away > from the edge. You'd need JS to detect the screen dimensions. They > also have a slight delay on the tooltip so that you don't get an > epileptic fit when you move your mouse across the screen. Again, > something you can't do with cross-browser CSS. > > However, what is most impressive about this is not the client side, > but the processing they are doing on the server. The page isn't using > anything like jQuery masonry[1]. You can test this by resizing the > browser window. If you open up the resource inspector in Safari you'll > notice it makes a HTTP request to get a new set of results whose > relative ratios fill the grid up perfectly. Not only is Google > ordering images based on search relevancy but also how well they fit > in an X by Y grid, together. Their query must also extremely quick > (and obviously must scale) because there is little delay when you > resize a window. > > If they were using something like jQuery masonry, they would be > limited to the results they currently had which would certainly lead > to a less "full" grid. > > As cool as it is, Google must only be playing around because they've > strangely disabled it in Opera. It's a shame that Google's "open > standards" doesn't extend to it's UI. > > Cheers! > > Chris > > PS. Check out this Google search: > http://www.google.no/search?hl=no&client=safari&rls=en&q=opera&aq=f&aqi=g10&aql=&oq=&gs_rfai= > > See the keyboard in the right hand side of the input bar? HOW COOL! > Try typing something and watch the keyboard change! :) > > [1] Ceveat about jQuery masonry. Whilst it is a cool effect, you need > to have all the widths/heights of every element defined either in CSS > or HTML *before* the window:loaded event is fired. If you can't do > that then you get an ugly flash waiting for window:loaded to fire. > Also note that document:loaded is different to window:loaded. > > -- > You received this message because you are subscribed to the Google Groups > "Ruby or Rails Oceania" group. > To post to this group, send email to [email protected]. > To unsubscribe from this group, send email to > [email protected]. > For more options, visit this group at > http://groups.google.com/group/rails-oceania?hl=en. > > -- http://crazyhollywood.org -- You received this message because you are subscribed to the Google Groups "Ruby or Rails Oceania" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/rails-oceania?hl=en.
