List<Map>类型的JavaScript数组应用范例：图片多样化显示

几乎所有主流网站都提供了浏览图片功能，但给用户感受差别很大，有的网站不错，但也有网站浏览图片从这一张到下一张url会发生变化，显然浏览是通过get方式逐张请求实现的，这种方式，停顿感明显，对服务器请求过于频繁。但把一组待浏览的图片数据通过Ajax请求，将结果保存在数组中，那效果就明显不同了，浏览图片会流畅的多。

将图片数据保存在JavaScript数组中，好处多多。

一、基于数组的图片显示效果图

1、幻灯效果

2、产品索引效果

3、专题广告效果

 

二、产品索引效果不完整示例代码（这里仅以产品索引为例）

1、产品数组
var product_v=new Array();
var m=new Map();
m.put('isfw', false);
m.put('sortnum', '0');
m.put('normal', '0');
m.put('iswm', false);
m.put('jgms', '价格');
m.put('good', '0');
m.put('qy_id', 'stone');
m.put('id', '50');
m.put('iszm', false);
m.put('height', '480');
m.put('grade', '1');
m.put('iscz', false);
m.put('isls', true);
m.put('qymc', '中华奇石');
m.put('width', '640');
m.put('uptime', '2011-09-25 12:06:52.0');
m.put('label_id', '3307');
m.put('label', '鸭嘴兽');
m.put('unit', '件');
m.put('num', '1');
m.put('cplabel', '长江石');
m.put('filename', '1316923598012.jpg');
m.put('numprice', '0');
//...
product_v.push(m);

2、实现方法

function _loadCpsy(uid,list,pWidth){
    var cols=6;
    var rows=3;
    var scaleWidth=parseInt(parseInt((pWidth-8)/cols)-12);
    var scaleHeight=scaleWidth;
    var html="";
    var galleryUid=uid+"gallery";
    var p=new pageObj({//分组对象
        uid:uid,
        list:list,
        numPerPage:(cols*rows),
        numPerOne:20,
        f:function(){
            html="";
            if(p.pageList.length>0){
                for(var a=0;a<p.pageList.length;a=a+cols){
                    html=html+"<ul style='clear:both;margin:0px;padding:0px;'>"
                    for(var b=a;b<a+cols;b++){
                        var m=null;
                        var x=p.pageList.length%cols;
                        if((a+x)<=p.pageList.length)m=p.pageList[b];
                        var id="";
                        var pic="";
                        var jg="面议";
                        var title="";
                        var height=40;
                        if(m!=null){
                            id=m.get("id");
                            if(m.get("price")!=null){
                                jg=m.get("price")+"元";
                            }
                            if(m.get("width")!=null){
                                var id=m.get("id");
                                var ss="<li style='width:"+(scaleWidth-10)+"px;font-size:12px;'>"+m.get("label")+"<br/> &yen;："+jg+"  &nbsp;<span style='color:red;cursor:pointer;' οnclick=window.open('"+pvo.getRoot()+"/app/cpdetail.jsp?id="+m.get("id")+"')>详细</span> </li>";
                                ss="<ul style='margin:0px;padding:0px;'>"+ss+"</ul>";
                                pvo.scale=pvo.scaleWH(m.get("width"),m.get("height"),scaleWidth,scaleHeight);
                                var src=pvo.ROOTPATH+pvo.SUBPATH+"/"+m.get('qy_id')+"/upload/"+m.get("filename");
                                pic="<li style='margin:2px;padding:4px;float:left;width:"+(scaleWidth)+"px;height:"+(scaleHeight+height)+"px;background:#ffffff;'><div style='margin:auto;text-align:center;width:"+pvo.scale.width+"px;height:"+pvo.scale.height+"px;padding-top:"+parseInt((scaleHeight-pvo.scale.height)/2)+"px;padding-bottom:"+parseInt((scaleHeight-pvo.scale.height)/2)+"px;padding-left:"+parseInt((scaleWidth-pvo.scale.width)/2)+"px;padding-right:"+parseInt((scaleWidth-pvo.scale.width)/2)+"px;'><a href='"+src+"' title='"+title+"'><img src='"+src+"' style='border:0px;width:"+pvo.scale.width+"px;height:"+pvo.scale.height+"px;'/></a></div>"+ss+"</li>";
                            }
                        }
                        html=html+pic;
                    }
                    html=html+"</ul>";
                }
            }else{
                html="<ul><li>暂无记录</li></ul>";
            }
            document.getElementById(p.bodyid).innerHTML="<div class='gallery' id='"+galleryUid+"'>"+html+"</div>";
            $('#'+galleryUid+' a').lightBox();
        }
    });
    p.showPage();
}

 

下一篇将介绍实现JavaScript数组分组