Изучение javascript / jQuery: как разместить несколько элементов в доступном пространстве окна - PullRequest
Новая
       32

Изучение javascript / jQuery: как разместить несколько элементов в доступном пространстве окна

0 голосов
/ 31 марта 2011

Использование javascript / jQuery:

У меня есть массив с изображениями, и мне нужно отобразить их в моей сети.Количество изображений будет варьироваться.В зависимости от ширины и высоты, доступной из-за разрешения экрана, я буду отображать x строк и y столбцов, чтобы заполнить пространство.Все изображения имеют ширину = 115px и высоту = 120px

Когда ряды изображений выходят из поля зрения (вертикальная прокрутка показывает) Мне нужно поместить их в новый div (id = 'slide').Этот новый div я буду использовать для создания слайда и показа второго / третьего .. набора изображений нажатием стрелки.

Я вычисляю размеры доступного пространства, используя: 

function Resize(){
    var docheight = jQuery('.main_insidem').height();    
    var docwidth = jQuery('.main_insidem').width();
    jQuery('.main_insidem').html(docheight+' '+docwidth);
}

И все содержится в 

<div id="slidesContainer"></div>

Мне нужно получить что-то вроде:

<div id='slide'><img src='image1.jpg'><img src='image2.jpg'><img src='image3.jpg'><img src='image4.jpg'><img src='image5.jpg'>..</div>

<div id='slide'><img src='imagex+1.jpg'><img src='imagex+2.jpg'><img src='imagex+3.jpg'><img src='imagex+4.jpg'><img src='imagex+5.jpg'>..</div>

<div id='slide'><img src='imagey+1.jpg'><img src='imagey+2.jpg'><img src='imagey+3.jpg'><img src='imagey+4.jpg'><img src='imagey+5.jpg'>..</div>
.

.

Есть идеи, как поступить?

Большое спасибо!

Ответы [ 2 ]

0 голосов
/ 31 марта 2011

Изображения загружаются в контейнер.При изменении размера окна изображения будут корректироваться соответствующим образом.Нет необходимости делать какие-либо вычисления ширины или высоты.

jQuery 

$("img").each(function(index) {
    $(this).delay(400 * index).fadeIn(300);
});

CSS 

.wrap{
    height:400px;
    border:1px solid red;
}
img{
    display:none;
    margin:5px 5px 0 0;
    float:left;
}

HTML 

<div class="wrap">   
    <img ...>
    <img ...>
    ..
</div>

Проверьте рабочий пример на http://jsfiddle.net/38D6f/1/

0 голосов
/ 31 марта 2011

Ну, я бы использовал CSS для этого

Поплавок: слева; на изображениях, и они будут автоматически подстраиваться под ширину.

переполнение: скрыто; на контейнере для слайдов 

$("#SliderContainer").resize(Resize());

Источник

...