学习javascript/jQuery:如何在可用的窗口空间中放置一些元素

Question

使用javascript/jQuery：

我有一个包含图像的数组，我需要在我的网页上显示它们。图像的数量将有所不同。根据屏幕分辨率可用的宽度和高度，我将显示x行和y列，以填充空间。所有的图像都是width=115px和height=120px

当图像行脱离视图(垂直滚动显示)时，我需要将它们放在一个新的div (id=‘幻灯片’)中。我将使用这个新的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>
.

。

对如何进行有什么想法吗？

非常感谢!

Answer 1

在容器中加载图像。当您调整窗口大小时，图像将相应调整。不需要做任何宽度或高度计算。

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;
}

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

检查http://jsfiddle.net/38D6f/1/上的工作示例

Answer 2

好吧，我会用CSS来做这个

浮动:左；在图像上，它们将自动调整到宽度。

溢出:隐藏；在幻灯片容器上

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

来源