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 Mobile First Look: Book review and Giveaway
• jQuery quickie: Unlimited Scroll using the Twitter API
• jHTML-Ipsum: HTML Ipsum using a jQuery plugin
• Nostalgia: Dragging the Windows XP error dialog
• jQuery 1.3 and PHP: Book review and Giveaway

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

Spread the word and submit to: