实现一个简单的瀑布流

知识点快速积累：
1 页面元素的绝对位置如何计算
2 ajax如何实现异步请求
3 如何实现图片的分页加载

一 将基于js的ajax进行简单的封装

今天主要学习ajax请求的更深层次的东西，之前一直觉得很抽象，今天自己总结学习了一下，才觉得其实也没有那么复杂，只要后端给定了接口，前端能请求得到数据，再进行相应的操作就可以。

• 创建XMLHttpRequest()对象；

• open方法（确定提交方式，提交地址，异步/同步）

• send 方法。（发送数据请求）

• 请求状态监控。

  • onreadystatechange事件
  • readyState属性
  • statues属性：服务器（请求资源）的状态

• get/post的区别

• get 通过url地址进行传输，post通过浏览器内部进行传输。

• get有数量限制，每个浏览器不同，post理论上是无限制的。
• post的send方法需要发送数据请求，（需要设置请求头的信息）
• 返回的数据处理（服务器返回的数据处理）
  • JSON数据>>>>对象

JSON.parse(data)

• 字符串数据>>>JSON数据

JSON.stringfy(data)

• 以下是对ajax请求的简单封装：

调用方法： ajax（method，url，data，success）

function ajax(method, url, data, success) {
   var xhr = null;
   try {
       xhr = new XMLHttpRequest();
   } catch (e) {
       xhr = new ActiveXObject('Microsoft.XMLHTTP');
   }
   
   if (method == 'get' && data) {
       url += '?' + data;
   }
   
   xhr.open(method,url,true);
   if (method == 'get') {
       xhr.send();
   } else {
       xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
       xhr.send(data);
   }
   
   xhr.onreadystatechange = function() {
       
       if ( xhr.readyState == 4 ) {
           if ( xhr.status == 200 ) {
               success && success(xhr.responseText);
           } else {
               alert('出错了,Err：' + xhr.status);
           }
       }
       
   }
}

稍后要去学习一下jquery中的ajax请求的封装方法，看看jquery是怎么写的。

二 确定页面元素的位置

在请求的时候，需要根据页面的位置以及第一次请求的最后一张图片的位置进行分析判断，所以需要用到页面元素位置的计算方法

传送门（阮一峰大神的计算方法）

快速简记：

• .clientWidth/.clientHeight （计算的是当前浏览器显示的窗口大小。）