大学本科毕业生实习报告

一、互联网传输技术应用：异步请求技术

(1)完成基于LNMP架构服务器的搭建

(2)编写及调试瀑布流布局的源代码

(3)测试验证异步网页加载的效果

报告正文（可以续表）：

（异步请求技术部分报告可以黑白打印）

1. 完成基于LNMP架构服务器的搭建

（要求：虚拟机截图要求截出整个VMware界面）

1.1 服务器运行状态

服务器运行状态截图

1.2 虚拟机网络配置

虚拟机网络配置截图

1.3 网站目录下的内容

网站目录下的内容截图

2.编写及调试瀑布流布局的源代码

2.1 HTML代码

<meta charset="utf-8"/>

<div id="col1"style="width:500px;display:inline-block;vertical-align:top;">

<div id="col2"style="width:500px;display:inline-block;vertical-align:top;">

h1=0;

h2=0;

picnum=1;

getpic()

function getpic(){

$.get("gugu.php",function(data){

obj=JSON.parse(data);

pic=obj.pic;

w=obj.w;

h=obj.h;

for(i=0;i

console.log(pic[i]);

new_h=h[i]/w[i]*500;

if(h1<=h2){colnum=1;

h1+=new_h;}

else{

colnum=2;

h2+=new_h;

}

$('#col'+colnum).append('

picnum++;

}}

);

}

$(window).scroll(function()

{

console.log($(window).scrollTop(),$(document).height(),$(window).height());

console.log($(window).scrollTop()+$(window).height());

if($(window).scrollTop()+$(window).height()+3>$(document).height())

getpic();

});

</script>

2.2 PHP代码

<?php

class imgobj{

var $pic;

var $w;

var $h;

}

for($i=0;$i<5;$i++){

$pic[$i]=rand(1,10).".jpg";

$img_info=getimagesize("img/".$pic[$i]);

$w[$i]=$img_info[0];

$h[$i]=$img_info[1];

}

$obj=new imgobj();

$obj->pic=$pic;

$obj->w=$w;

$obj->h=$h;

echo json_encode($obj);

?>

3. 测试验证异步网页加载的效果

3.1 网页异步加载效果

加载前网页截图

加载后网页截图

3.2 瀑布流

单栏瀑布流效果截图

双栏瀑布流效果截图