零JS筆記 | Ajax-固定瀑布流布局实例
1、首先，分四列，固定好，每次把div都加进li里，每次加都选最短列li加；
<ul id="ul1">
<li></li> <!-- 一定要有这四个初始li -->
<li></li>
<li></li>
<li></li>
</ul>2、写好后端php接收，得到格式如：
[
{
"id": "539529",
"title": "",
"referer": "https://www.tumblr.com/dashboard",
"url": "http://www.wookmark.com/image/539529",
......
},
{
"id": "539543",
"title": "Épinglé par Scot Woodman sur Bionic Digitism | Pinterest",
......
]3、操作需转换为Object对象 var data = JSON.parse(data)，再调用ajax函数
ajax('get', 'getPics.php', 'cpage=' + ipage, function (data) {
var data = JSON.parse(data)
//后续无数据
if (!data.length) {
return;
}
for (var i = 0; i < data.length; i++) {
//获取每次最短li的下标，可能的值为:0,1,2,3
var _index = getShort()
var _div = document.createElement('div')
var _img = document.createElement('img')
_img.src = data[i].preview;
//修正scroll时图片未加载li总高度计算问题
_img.style.height = data[i].height * (200 / data[i].width) + 'px'
//比例、
var _h3 = document.createElement('h3')
_div.appendChild(_img)
_div.appendChild(_h3)
_h3.innerHTML = data[i].title;
_li[_index].appendChild(_div) //每次都往最短的li里扔东西
}
b = true; //加载完开门
//获取高度最短的li
})所以计算每次最短li方法：
function getShort() {
//找最短列li
var index = 0;
var ih = _li[index].offsetHeight;
for (var i = 1; i < ilen; i++) {
if (_li[i].offsetHeight < ih) { //每次小于第index个，
index = i; //则给index赋值
ih = _li[i].offsetHeight; //重新赋值
}
}
return index; //最后return回去
}
//思路：如数组[5,6,1,4,3]
目的：找出最小值的位置；
位置：0,1,2,3,4
i = 0;iv = 5; index = 0
i = 1;iv = 6;[6>5] index = 0[不变]
i = 2;iv = 1;[1<5] index = 2
i = 3;iv = 4;[4>1] index = 2[不变]
i = 4;iv = 3;[3>1] index = 2[不变]
所以返回index = 2;当滚动条拉到最后一个li时，触发onscroll事件；条件是：li的top值+本身高度 < 当前视窗 + 滚动条距离；
技巧：先设开关b，打开状态时b，当获取时b = false关，什么时候开，请求结束时再开，所以每次ajax加载完时b = true再打开
window.onscroll = function () {
var _index = getShort()
var oli = _li[_index]
var scrolltop = document.body.scrollTop || document.documentElement.scrollTop;
if (getTop(oli) + oli.offsetHeight < document.documentElement.clientHeight + scrolltop) {
if (b) {
ipage++
getList()
b = false; //关门
}
}
}
当前元素的到顶部的距离 ：
function getTop(obj) {
var itop = 0;
while (obj) {
itop += obj.offsetTop;
obj = obj.offsetParent
}
return itop;
}