学习javascript / jQuery：如何在可用的窗口空间中放置许多元素

问题描述

使用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>
.

。

关于如何进行的任何想法？

非常感谢！

图像加载到容器中。 调整窗口大小时，图像将相应调整。 无需进行任何宽度或高度计算。

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>

在查看工作示例