Just recently, I noticed something pretty cool at Google Images: When you resize your browser, search results are hidden/shown, depending if it makes a full row. It does really have a big advantage: you'll never have any "empty spots" on your website. The grid is always fully filled and results that don't fit in the grid, are simply hidden.

I wanted to recreate this technique using jQuery. Just like Google Images, it check how many images fit in each row and hides the one that fall off (depending on the browser size).

The difference between my HTML and the one Google, is that Google uses a table to display the image. My version uses floating images (but essentially, they work the same). Just make sure to check out the demo.

  

Now let's take a deeper look at the problem, the solution and how you create your own browser size aware content scaling.

The problem

Here's a reference image to display the problem:

As you can see, the nice square / grid (all rows are filled) breaks depending on the browser size. When the user has another resolution than you, or resizes the browser, new items might be pushed down, creating another row. When this row isn't fully filled, you'll get loads of empty space.

If you don't want this empty space, we'll need to find a solution for this problem.

The solution

The solution is pretty simple: Hide all the items that are on a row, but don't make a complete/full row. Check out the following reference image:

To make this work, jQuery kicks in. I've added comments in the source code to explain what it does.

 
google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
   // Detect browser resize and re-calculate
   $(window).bind("resize", calculateContent);
   
   // Calculate the content on load
   calculateContent();
});
 
/**
* Function that calculates on how the content should behave.
**/
function calculateContent( e ) {
   // Show all items in case they were hidden
   $("#content img").show();
   
   // Since we know the width each image takes (100px + 40px + 40px + 2px + 2px = 184px)
   // We can calculate how many rows are showed
   var imageWidth = 184;
   var contentAreaWidth = $("#content").width();
   var itemsPerRow = Math.floor(contentAreaWidth / imageWidth);
   
   // Retrieve the total number of images
   var totalNrOfItems = $("#content img").length;
   
   // Calculate how many full rows can be showed
   var fullRows = Math.floor(totalNrOfItems / itemsPerRow);
   
   // Calculate how many images fell off
   var itemsToHide = totalNrOfItems - fullRows * itemsPerRow;
   
   // Hide the images by counting backward (from the last item)
   for(var i = totalNrOfItems; i > totalNrOfItems - itemsToHide; i--) {
      // The "eq()" is zero-based, we'll need to substract one
      var remover = i - 1;
      $("#content img:eq("+remover+")").hide();
   }
}

A little bit about the 184 width:

1. Each image is 100px wide
2. Each image has a margin of 40px left and right
3. Each image has a border of 2px left and right

That's all there is to it! In the demo, you'll also find some debug information.

Conclusion and Download

This technique is pretty great to show items in a complete row. Just keep in mind that this is only effective when it isn't fully nescessary that the user views all the images. As you could have seen, some of the images are hidden by the script. If it's essential that the user sees all the items, this technique isn't very useful.

  

What do you think of this script? Any room for improvement, or do you like it so much that you're going to use it? Feel free to share.

Interested in this topic? You might enjoy another article I've written called

• jQuery quickie: Slot machine navigation
• jQuery quickie: Unlimited Scroll using the Twitter API
• jQuery quickie: Colourful rating system with CSS3
• jHTML-Ipsum: HTML Ipsum using a jQuery plugin
• Advanced jQuery background image slideshow

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:

Comments

Add New Search RSS

Gaya`   2009-10-26 09:18:50 Very cool Marco, good idea! Looks kinda choppy sometimes, but the main thing (filtering images) is done very well! Will keep this in mind if I ever need something similar. Good job Marco! Reply | Quote

Marco - Thanks man!   2009-10-26 09:36:43 Thanks a lot for your kind words mate - really appreciate it. There is always room for improvement and if you want to, feel free to dig in the source to make it even better ! Reply | Quote

Chris Coyier - ---   2009-10-26 13:47:20 Nice! It took me a second to get what was happening, but then I saw. Full rows! I like how it pulls them off the end, not off the sides of each. So theoretically if it was paginated you could pass the number of the last shown object so the next page starts with the first hidden image. Reply | Quote

Marco - Great!   2009-10-26 14:23:21 Haha - you're right Chris. It was pretty hard to describe it in words, but when you see it, it's really cool. You're absolutely right about passing the number of hidden objects - it might be the same thing Google is doing (only they use Tables). Thanks for your comment mate! Reply | Quote

e11world - Multimedia designer and developer   2009-10-26 18:12:20 Thanks for the script and the explanation. This will come in handy in the future. I just can't believe this hasn't been there (used) that much until recently. Reply | Quote

weston deboer - Awesome   2009-10-26 19:54:08 totally awesome, i just ran into this the other actually too. I was trying to do something similar that changes how many images are displayed dynamically but evenly in a way. But on my side no images are hidden, but I could see how to use that in the future. I used the masonry jquery you can see the example at http://hangthis.net Reply | Quote

Marco - Cool!   2009-10-27 12:57:52 That looks pretty cool! I thought Google was the only one using this technique, but I see them popping up more and more. Yours is well implemented - well done! Reply | Quote

Janko   2009-10-26 20:00:40 Great idea! I didn't have a problem recognizing what is it about because I really like this feature. Although I'd agree with Chris that the ID of the last image shown would be enough for the next page, I think there is one more important aspect o this functionality when used with pagination. If users resize the window, page number could change, and this should be handled somehow. I don't know what would be the best solution, but I am sure that pulling data from the database on resize isn't the best thing to do. Reply | Quote

Marco - You're right   2009-10-27 12:57:00 You're right there Janko - Google Images has the advantage that it normally loads/finds so many images, that the pagination doesn't have any kind of "numeric value" (just a "next" page). That works. But if you indeed have a numeric value (page 1 of 20 etc.), you'll need to update that too. Thanks for your input! Reply | Quote

BebopDesigner - Brilliant!   2009-10-26 23:46:00 Wow! This looks really really cool. Reply | Quote

Read more...
Name:
Email:	do not notifynotify Gravatar enabled.
Website:
Title:
UBBCode:	-color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge

Unsubscribe from e-mail notifications.