Home/ Questions/Q 1061069
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T18:25:21+00:00

1) We have <body> , it’s height and width varies (different resolutions). 2) Many

  • 0

1) We have <body>, it’s height and width varies (different resolutions).

2) Many blocks with images inside it, can be more than 50 blocks.

3) width and height are equal for each block.

How can we fill the body with all available images, that can be visible on current resolution, and hide others?

There should be no horizontal/vertical scrollbars.

For example, we have 50 blocks inside <body>. 1024×768 can accommodate only 20, so we show them and hide others. If person changes browser window size to 1280 – we show more blocks and so on.

Actually I don’t ask you to write the full script. I need the links on some similar scripts that are already work.

Its better if blocks can change themselves (like slideshow).

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m trying to figure out an algorithm:

    1) get the width of container containing the blocks (container should be relative, so that it expands when you resize the window). To get the width use .width or .outerWidth

    2) divide the width of the container by the block’s width, floor it. Now you know how many blocks fit in one row.

    3) To calculate the height, this can be tricky because you may have a header or navigation etc. which cuts the vertical space down. So do this:

    3.1) Get the height of the window $(window).height();

    3.2) Get the container’s top offset $('#container').offset().top

    3.3) Subtract the offset from the window height – now you have the “real” height available
    (note: if you have a footer etc. you have to subtract this reserverd space, too)

    4) Divide the real available vertical space through the block’s height (spend attention on margins/paddings) and floor this number. Now you know how many rows may fit in your space.

    5) multiply max. rows and max. columns we’ve calculated, that’s the maximum amount of blocks that fit in.

    6) Get your blocks like $('.block') and iterate thru it $('.block').each(function(index) { ... }); now if the index is bigger than the max. number of blocks we’ve calculated, hide them!

    7) Attach an event handler to $(window).resize(function() { }) and do the steps above on resize

    • 0