Question

以下代码将在我的网页中显示myarray []中包含的图像集。通过检查它们将被放置的div的宽度和高度，div将被分页以根据访问者的分辨率在需要时容纳图像。

图像具有相同的尺寸（115x120像素），并且从左到右放置。一切都很棒，直到这里，但图像处置是一个非常沉闷，我想把它们放在这个绘图显示的方式： http://217.116.9.130/imagesLayout.jpg

我该怎么做？有线索吗？

非常感谢！

<script type="text/javascript">
jQuery(document).ready(function(){
    setTimeout ( "execMainFunction()", 1000 );
});

function execMainFunction(){

    var myarray = new Array(26)

myarray[0]='images/1.png';
myarray[1]='images/2.png';
myarray[2]='images/3.png';
myarray[3]='images/4.png';
myarray[4]='images/5.png';
myarray[5]='images/6.png';
.
.
myarray[25]='images/26.png';


var nofImages = myarray.length; 


    var docheight = jQuery('#content').height();   
    var docwidth = jQuery('#content').width();

    var he = Math.floor((docheight/120)); // images height
    var wi = Math.floor((docwidth/115)); // images width
    var total = (he*wi);

var imagesPerDiv = total;

        var theContent = "";
        theContent +="<ul id='slide'>";
        for (var i=0;i<nofImages;i++) {

            theContent +="<li class='item'><img src='"+myarray[i]+"'></li>";

        } 

        theContent +="</div><br><div style='display:block;'></div>";
        $("#slidesContainer").html(theContent);

// the following pluging paginates the images if they number is too big for the page's resolution 
    $(function(){
       $("#slide li").quickpaginate({ perpage: imagesPerDiv, pager : $("#slidesContainer") });
    });


}
</script>

如何根据分辨率在网页中订购一组图像

0 个答案: