All geek questions in one place

JQuery fills the body with images

1) We have <body>it heightand it widthchanges (different permissions).

2) Many blocks with images inside it may contain more than 50 blocks.

3) widthand heightare equal for each block.

How can we fill in with bodyall available images that can be seen in the current resolution and hide others?

There should be no horizontal / vertical scrollbars.

For example, we have 50 blocks inside <body>. 1024x768 can only hold 20, so we show them and hide them. If a person resizes the browser window to 1280, we show more blocks, etc.

In fact, I am not asking you to write a complete script. I need links to some similar scripts that already work.

It is better if the blocks can change themselves (for example, slide shows).

Thank.

+3
source share
2 answers

I am trying to calculate an algorithm:

1) get the width of the container containing the blocks (the container must be relative so that it expands when the window is resized). To get the width, use .widthor.outerWidth

2) divide the width of the container by the width of the block, place it. Now you know how many blocks fit on one line.

3) To calculate the height, it can be difficult, because you can have a heading or navigation, etc., which reduces the vertical space down. So do this:

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

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

3.3) - ( : .., reserverd)

4) ( /) . , .

5) . . , , , .

6) $('.block') $('.block').each(function(index) { ... }); , . , , !

7) $(window).resize(function() { })

+2

, CSS: . , , . .

0

Source: https://habr.com/ru/post/1764229/

More articles:


All Articles