1.index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./src/css/index.css">
</head>
<body>
<div class="wrapper">
<ul>
<li class="box">
<div class="item">
<div class="cont">
<img src="./src/image/0.png" alt="">
</div>
<p>金饭碗我接发斯蒂芬怕删繁就简扩大</p>
</div>
</li>
<li class="box">
<div class="item">
<div class="cont">
<img src="./src/image/1.png" alt="">
</div>
<p>金饭碗我接发斯蒂芬怕删繁就简扩大</p>
</div>
</li>
<li class="box">
<div class="item">
<div class="cont">
<img src="./src/image/2.png" alt="">
</div>
<p>金饭碗我接发斯蒂芬怕删繁就简扩大</p>
</div>
</li>
<li class="box">
<div class="item">
<div class="cont">
<img src="./src/image/3.png" alt="">
</div>
<p>金饭碗我接发斯蒂芬怕删繁就简扩大</p>
</div>
</li>
</ul>
</div>
<script src="./src/js/ajax.js"></script>
<script src="./src/js/index.js"></script>
</body>
</html>
2.index.js:
ajax('GET', 'http://localhost/web/ajax/waterfall2-1/src/js/data.txt', addDom, 'cpage=2', true);
function addDom(data) {
console.log(JSON.parse(data));
}
1.立即执行函数，封闭作用域
2.入口函数
首先请求ajax
请求的回调函数写到下面
3.addDom处理数据
4.getDate();执行就拿到data
5.注意：
(1)addDom是ajax的形参之一，不过它是函数，然后它写在getDate(){}下面就行了
跟上面比，ajax外面套个getDate(){}
6.循环值 向Dom上添加元素:
循环遍历每个元素，就要向Dom上创建元素
用字符串还是标签
字符串用innerHTML插入，innerHTML是给DOM元素添加文本，文本就是你拼接好的str，
原来所有的东西都会被替换掉
oP.innerText/oP.innerHTML都行
7.生成的元素插入进去
获取到的oLi是4个，要把Item插到最短那列里
每次循环（data），都要重新找最短
8.所以写找最短的Dom元素的函数(getMinList)
把oLi（总共4）传进getMinList，
每次都设第一个最短(minHeight)，让剩下的dom元素和它比较
即使每次都是第一个li长度，这个minHeight也是变的
注意：
(1)dom[0].offsetHeight;
(2)进行了优化：
var minH接收dom[i].offsetHeight，最后再和minHeight比较
不优化，就要计算2次
最后要返回索引(index)，因为是要知道那一列最短
{
index = i;return index;(不要写成return i，i最后肯定是4)
}
【dom.length不是就是4吗】
9.getMinList使用
var minIndex = getMinList(oLi);写在dataList.forEach(function
(ele, index){})一开头，而且只能写在这循环里面，写在.forEach
外面肯定不行
10.监听滚轮事件,滚动到最下面发送ajax请求
首先判断滚轮滚动到底部
滚过的距离+浏览器显示区域的高度（窗口高度）=整个body的高度（文档高度）
11.
这个函数在window上，window.onscroll
滚过的距离 ：document.documentElement.scrollTop||document.body.scrollTop
显示区高度： document.documentElement.clientHeight||document.body.clientHeight
文档高度：oLi[getMinList（oLi）].offsetHeight
判断：4列里有最短的就开始加载 不获取整个wrapper高度，
if(1+2>3),getData();
如果是wrapper（page）高度，那用户先看到空白的高度
12.完善问题(1):
真实情况下，向服务器请求数据要等待，这时如果不停滚动滚轮，那就会
一直发送ajax，要加锁
发送ajax就不能再发送，直到请求回来
flag = false; if(!flag){flag=true;ajax();}
响应成功，flag=false; （加载addDom最后，它都成功插入元素，就是
成功了）
13.修改ajax参数data
原本是"cpage=1",改成"cpage="+num
最开始num=1，每次数据发送完num++;
14.完善问题(2):
刚开始图片没有完全显示，所以这一列是最短的，然后接下来图片就在这列上，然后
这张图片又没有全显示，新的图片又插在这列上，最后图片都显示完全，这列就特别长
（要等每一个图片都加载完再处理要等很长时间）
height/width = h/200 h=height*200/width
————》oImg.height = ele.height*200/ele.width;
为了好改，初始化initWidth = 200;
然后oImg.height = ele.height*initWidth/ele.width;（添加到addDom中）
【ele.height、ele.width是图片本身宽高，initWidth是装图片的容器的宽。思路是已知图片本身宽高比和容器的宽，根据等比
预设出（留）出容器的高。】
15.完善问题(3):
chrome问题：图片请求失败，默认给图片添加黑框，border设为0也不行
css那里：.img{width:100%;————————》200px;}宽度定死
让元素上下左右都往外扩1px，给元素设个border,border默认200*200，跟
chrome带的边框一样大，图片加载失败，让它上下左右都挪1px，
这样就把border藏起来
16.完善问题(4):
刷到第6页没有数据
if(dataList.length > 0),才能给数据forEach循环
css:
body{
background-color: azure;
}
.image-container{
width: 100px;
height: 100px;
overflow: hidden;
display: block;
background-color: orange;
}
.image-container img{
margin: -1px;
}
html:
<span class="image-container">
<img src="path-to-image" alt="I'm Broken :(" width="102" height="102">
</span>
oImg.width = 202
oImg.onerror = function () {
this.style.margin = '-1px';
// 图片加载失败，当前的元素让它margin-1px 估计就是黑框
this.style.width = 202px;
}
img{overflow:hidden;}就能把超出部分border隐藏
//////
// 这里没听明白 //
//////
注意：一定要用data.txt，不然会因为限制，越请求越慢，到最后报错
附加：
一个元素给设置css属性就转了，开始隐藏掉，滚动条滚到地下，执行getDate()发送ajax请求后，让它出现，
（大致在if(!flag){}之后），然后刷新出图片后，flag=false那里让它有隐藏
(function () {
var oLi = document.getElementsByClassName('box'),
flag = false,
num = 1,
initWidth = 200;
function getDate() {
if(!flag){
flag = true;
ajax('GET', 'http://localhost/web/ajax/waterfall2-1/src/js/data.txt', addDom, 'cpage='+num, true);
num++;
}
}
getDate();
function addDom(data) {
var dataList = JSON.parse(data);
console.log(dataList);
// console.log(JSON.parse(data));
dataList.forEach(function (ele, index) {
var minIndex = getMinList(oLi);
var oItem = document.createElement('div'),
oImg = new Image(),
oCont = document.createElement('div'),
oP = document.createElement('p');
oItem.className = 'item';
oCont.className = 'cont';
oItem.src = ele.preview;
oImg.height = ele.height*initWidth/ele.width;
oP.innerText = ele.title;
oLi[minIndex].appendChild(oItem);
oItem.appendChild(oCont);
oCont.appendChild(oImg);
oItem.appendChild(oP);
})
flag = false;
}
function getMinList(dom) {
var minIndex = getMinList(oLi);
var minHeight = dom[0].offsetHeight,
i = 1;
index = 0;
for(; i < dom.length; i++) {
var minH = dom[i].offsetHeight;
if(minHeight < minH) {
minHeight = minH;
index = i;
}
}
return index;
}
window.onscroll = function () {
var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop;
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
var pageHeigh = oLi[getMinList(oLi)].offsetHeight;
if (scrollHeight + clientHeight > pageHeigh) {
getDate();
}
}
})()
3.css:
*{
padding: 0;
margin:0;
list-style: none;
}
.wrapper {
width: 80%;
min-width: 930px;
margin: 0 auto;
border: 1px solid #000;
text-align: center;
}
.wrapper ul{
display: inline-block;
}
.wrapper ul .box{
float: left;
}
.wrapper ul .box .item{
width: 200px;
padding: 10px;
border: 1px solid #ccc;
margin: 0px 5px 10px;
}
.wrapper ul .box .cont{
width: 200px;
overflow: hidden;
}
.wrapper ul .box .item img{
width: 100%;
overflow: hidden;
}
.wrapper ul li .item p{
text-align: left;
}
/*
ul li没设宽度;至于.wrapper:text-align:center;原因
ul没设宽度结果是：占据整个.wrapper
li没设宽度，结果是4个li占据整个ul
li\ul的宽度由.item决定
item宽度200
item和li之间有margin 上0左右5下10
item和img、p有padding10 所以img、p是一个整体
img用div。cont包裹 div。cont和img宽度都是200
p没有宽度 但是要text-align：left
然后img和p没有margin
。wrapper{min-width：930;}
这个930是1个item宽、margin、width、border232 4个928
当wrapper宽度远大于930时 wrapper距离两边和ul有空隙
wrapper设置min-width就是保证它不因为80%而影响4个item展示 保全4个item
展示如果不设置min-width 最后一个容纳不下到下一行
.wrapper ul .box{
float: left;
}
脱离文档流，四个才能顶部对齐
还有.wrapper ul .box .item的margin是后来写的
*/