我们要执行的任务是页面起初有一部分图片，我们在底下有一个More Photos的链接，点击后，向当前页面后加载一部分图片，再点击该链接，继续加载，直到将我们列出的页面加载完成，此时该链接也消失了。
首先效果图如下：
这个只截取了最底下的一部分页面。在鼠标悬停在图片上时，还会有文字出现，鼠标移出时文字消失。
我们现在要做的就是点击底下的MorePhotos链接时，再加载一部分数据，然后再点击在加载一部分数据，直到数据加载完。
首先body中代码如下：
<div id = "container">
<h1> Photo Gallery</h1><div id = "gallery">
<div class = "photo">
<img src = "./images/1.jpg">
<div class = "details">
<div class = "description">The Cullin Mountains, Isle of skye ....</div>
<div class = "date">12/24/2000</div>
<div class = "photographer"> Alasdair Dougall</div>
</div>
</div>
<div class = "photo">
<img src = "./images/2.jpg">
<div class = "details">
<div class = "description">The Cullin Mountains, Isle of skye.... </div>
<div class = "date">12/24/2000</div>
<div class = "photographer"> Alasdair Dougall</div>
</div>
</div>
<div class = "photo">
<img src = "./images/3.jpg">
<div class = "details">
<div class = "description">The Cullin Mountains, Isle of skye.... </div>
<div class = "date">12/24/2000</div>
<div class = "photographer"> Alasdair Dougall</div>
</div>
</div>
//若干图片
</div>
<div class = "link"><a id = "more-photos" href = "1.html"> More Photos >></a></div>
</div>
然后在同一根目录下写几个HTML代码片段，用于加载。
如，我这有一个1.html代码如下
<div class = "photo">
<img src = "./images/1.jpg">
<div class = "details">
<div class = "description">The Cullin Mountains, Isle of skye </div>
<div class = "date">12/24/2000</div>
<div class = "photographer"> Alasdair Dougall</div>
</div>
</div> <div class = "photo">
<img src = "./images/2.jpg">
<div class = "details">
<div class = "description">The Cullin Mountains, Isle of skye </div>
<div class = "date">12/24/2000</div>
