jQuery заполнить тело изображениями

1) У нас есть <body>, это height и width различаются (разные разрешения).jQuery заполнить тело изображениями

2) Многие блоки с изображениями внутри него могут быть более 50 блоков.

3) width и height равны для каждого блока.

Как мы можем заполнить body всеми доступными изображениями, которые могут быть видны с текущего разрешения, и скрыть другие?

Не должно быть горизонтальных/вертикальных полос прокрутки.

Например, у нас есть 50 блоков внутри <body>. 1024x768 может вмещать только 20, поэтому мы показываем их и скрываем. Если человек изменяет размер окна браузера до 1280 - мы показываем больше блоков и так далее.

На самом деле, я не прошу вас писать полный сценарий. Мне нужны ссылки на некоторые похожие скрипты, которые уже работают.

Лучше, если блоки могут изменить себя (например, слайд-шоу).

Спасибо.

источник

2010-09-10 James

Я пытаюсь выяснить алгоритм:

1) получить ширину контейнера, содержащего блоки (контейнер должен быть относительным, так что она расширяется при изменении размера окна). Чтобы получить ширину, используйте .width или .outerWidth

2) разделите ширину контейнера на ширину блока, наденьте его на пол. Теперь вы знаете, сколько блоков вписывается в одну строку.

3) Чтобы вычислить высоту, это может быть сложно, потому что у вас может быть заголовок или навигация и т. Д., Который сокращает вертикальное пространство вниз. Так что это:

3,1) Получить высоту окна $(window).height();

3.2) Получить верх контейнера смещение $('#container').offset().top

3.3) Вычесть смещение от высоты окна - теперь у вас есть «реальный» высота: (примечание: если у вас есть нижний колонтитул и т. д., вы также должны вычесть это пространство для резервного копирования).

4) Разделите реальное доступное вертикальное пространство на высоте блока (обратите внимание на поля/прокладки) и установите пол номер. Теперь вы знаете, сколько строк может поместиться в вашем пространстве.

5) умножить макс. строк и макс. столбцы, которые мы подсчитали, это максимальное количество блоков, которые вписываются.

6) Получите свои блоки как $('.block') и проведите по ней через $('.block').each(function(index) { ... });, если индекс больше макс. количество блоков, которые мы подсчитали, скрыть их!

7) Приложить обработчик событий $(window).resize(function() { }) и сделать шаги выше на размер

источник

2010-09-10 20:47:23 sled

Поместите их внутрь блока, который имеет переполнения CSS: скрытый набор свойств. Таким образом вы можете отображать их все, но использование будет видеть только столько, сколько будет вписываться в блок. Не требуется код.

источник

2010-09-10 21:32:29 Spudley

вы могли видеть часть блоков, которые не вписываются! – sled

@sled - в этом случае небольшое количество Javascript для изменения размера окна до ближайшего кратного известному размеру изображения. Все еще относительно легко. – Spudley

jQuery заполнить тело изображениями

ответ

Смежные вопросы