网站制作之静态页面模拟点击加载更多

　　近期在网站开发过程中遇到了一个需要在静态页面模拟点击加载更多的页面，为了更好的用户体验效果，我们将实现一种无刷新加载的效果，现在来举个例子，页面布局如下：

　　页面整体简洁大方，要实现的功能是：页面打开默认显示六条信息，当用户点击下面的seemore+时，在下面加载三条，当信息全部加载完之后，再点击seemore+的时候seemore+显示为Alreadyshown，别看这一点变化，需要使用到的JS代码还是比较复杂的，例如如何显示正在加载中，如何让内容更好的嵌接在一起显示等问题，都需要通过JS的代码来实现。

　　为此在页面布局上html代码如下：

　　pclass=list

　　pclass=hidden/

　　ul

　　ahref=caseinfo/caseinfo.html

　　pclass=img

　　imgsrc=images/cimg2

　　1.jpg

　　pclass=morespan查看更多+/span/

　　/

　　pclass=tbox

　　pclass=t1重庆陆军军医大学/

　　pclass=t2生物信息学及医学超级计算系统IT基础设施建设/

　　/

　　/a

　　/li

　　ahref=caseinfo/caseinfo.html

　　pclass=img

　　imgsrc=images/cimg2

　　2.jpg

　　pclass=morespan查看更多+/span/

　　/

　　pclass=tbox

　　pclass=t1漯河粮库项目/

　　pclass=t2粮食储备自动化及监控系统IT基础设施建设/

　　/

　　/a

　　/li

　　ahref=caseinfo/caseinfo.html

　　pclass=img

　　imgsrc=images/cimg2

　　3.jpg

　　pclass=morespan查看更多+/span/

　　/

　　pclass=tbox

　　pclass=t1精锐视觉智能科技有限公司/

　　pclass=t2OA系统及CRM系统IT基础设施建设/

　　/

　　/a

　　/li

　　ahref=caseinfo/caseinfo.html

　　pclass=img

　　imgsrc=images/cimg2

　　4.jpg

　　pclass=morespan查看更多+/span/

　　/

　　pclass=tbox

　　pclass=t1采用MRTU的实时油井监测系统/

　　pclass=t2生物信息学及医学超级计算系统IT基础设施建设/

　　/

　　/a

　　/li

　　ahref=caseinfo/caseinfo.html

　　pclass=img

　　imgsrc=images/cimg2

　　5.jpg

　　pclass=morespan查看更多+/span/

　　/

　　pclass=tbox

　　pclass=t1智能水网和泵站监测/

　　pclass=t2粮食储备自动化及监控系统IT基础设施建设/

　　/

　　/a

　　/li

　　ahref=caseinfo/caseinfo.html

　　pclass=img

　　imgsrc=images/cimg2

　　6.jpg

　　pclass=morespan查看更多+/span/

　　/

　　pclass=tbox

　　pclass=t1建设银行灾备中心机房KVM的使用/

　　pclass=t2OA系统及CRM系统IT基础设施建设/

　　/

　　/a

　　/li

　　ahref=caseinfo/caseinfo.html

　　pclass=img

　　imgsrc=images/cimg2

　　5.jpg

　　pclass=morespan查看更多+/span/

　　/

　　pclass=tbox

　　pclass=t1智能水网和泵站监测/

　　pclass=t2粮食储备自动化及监控系统IT基础设施建设/

　　/

　　/a

　　/li

　　ahref=caseinfo/caseinfo.html

　　pclass=img

　　imgsrc=images/cimg2

　　5.jpg

　　pclass=morespan查看更多+/span/

　　/

　　pclass=tbox

　　pclass=t1智能水网和泵站监测/

　　pclass=t2粮食储备自动化及监控系统IT基础设施建设/

　　/

　　/a

　　/li

　　ahref=caseinfo/caseinfo.html

　　pclass=img

　　imgsrc=images/cimg2

　　5.jpg

　　pclass=morespan查看更多+/span/

　　/

　　pclass=tbox

　　pclass=t1智能水网和泵站监测/

　　pclass=t2粮食储备自动化及监控系统IT基础设施建设/

　　/

　　/a

　　/li

　　ahref=caseinfo/caseinfo.html

　　pclass=img

　　imgsrc=images/cimg2

　　5.jpg

　　pclass=morespan查看更多+/span/

　　/

　　pclass=tbox

　　pclass=t1智能水网和泵站监测/

　　pclass=t2粮食储备自动化及监控系统IT基础设施建设/

　　/

　　/a

　　/li

　　/ul

　　/

　　ahref=javascript：;onclick=list.loadMore();class=getmoreseemore+/a

　　这里只是给了10条数据，现在通过js代码判断如下：

　　script

　　var_content=[];

　　varlist={

　　_default：6，//默认显示图片个数

　　_loading：3，//每次点击按钮后加载的个数

　　init：function(){

　　varlis=$(.listli);

　　$(.list).html();

　　for(varn=0;nlist._default;n++){

　　}

　　for(vari=list._default;ilis.length;i++){

　　_content.push(lis.eq(i));

　　}

　　}，

　　varmLis=$(.listli).length;

　　for(vari=0;ilist._loading;i++){

　　vartarget=_content.shift();

　　if(！target){

　　$('.getmore').html(pAlreadyshown/p);//改变点击状态

　　break;

　　}

　　$(.list).append(target);//插入更多的图片

　　}

　　}

　　}

　　/script

　　上述功能就可以基本实现。