How to dynamically show number of products in a row according to browser size?

In an ecommerce site, I would like to display number of items in a row according to browser width, but minimum will be 4 items. Just like what has been done in Amozon site, if you try to browse amozon.com, try to maximize and shrink your browser, you will find that number of items display in [More Items to Consider] section is according to your browser size. It is smart enough to know when it should fully hide or show an item, no partially visible item forever.

Anyone know what is 开发者_C百科this technology called? Any idea how this can be done? Thanks in advance.

You can do this with float elements in a div with overflow:hidden. I'll jsfiddle a proof of concept for you.

JSFiddle: http://jsfiddle.net/WLEzw/

Make your browser window bigger and smaller and you will see more and less pears.

That is just CSS based.

An example of what you want to accomplish from a friend website redesign

shrink and wide the browser so you can see the effect

You can also use JQuery to moniter whether browser window is resized, through $(window).resize function. And you'll have to call details of the products shown either using Ajax or with iframe by reloading the page within iframe with more products.

The code to be written inside browser's resize method will be as follows.

 $(window).resize(function() {

      //Your code on resizing the browser.

 });