* 瀑布流
* 效果:多列的不规则排列,每一列中有很多内容,每一项内容的高度不定,最后我们按照规则排列,三列之间不能相差太多高度
*
* 实现:首先获取需要展示的数据(假设有50条,共三列),把50条数据中的前三条依次插入到三列中(目前有的列高有的列低),接下来在拿出三条数据,但是本次插入不是依次插入,而是需要先把当前三列按照高矮进行排序,哪个最矮,先给哪个插入内容,以此类推,把50条数据都插入即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>珠峰培训-瀑布流</title>
<link rel="stylesheet" href="css/reset.min.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<ul class="flowBox clearfix">
<li>
<!--<a href="#">
<div><img src="img/13.jpg" alt=""></div>
<span>泰勒·斯威夫特(Taylor Swift),1989年12月13日出生于美国宾州,美国歌手、演员。2006年出道,同年发行专辑《泰勒·斯威夫特》,该专辑获得美国唱片业协会的白金唱片认证</span>
</a>-->
</li>
<li>
</li>
<li>
</li>
</ul>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
html, body {
background: #F4F4F4;
overflow-x: hidden;
}
.flowBox {
margin: 20px auto;
width: 1000px;
}
.flowBox li {
float: left;
margin-right: 20px;
width: 320px;
}
.flowBox li:nth-last-child(1) {
margin-right: 0;
}
.flowBox li a {
display: block;
margin-bottom: 10px;
padding: 10px;
background: #FFF;
box-shadow: 3px 3px 10px 0 #666; /*CSS3设置盒子阴影:(inset) X Y 阴影模糊度 阴影模糊半径 阴影的颜色*/
}
/*.flowBox li a div {*/
/*background: url("../img/default.gif") no-repeat center center #EEE;*/
/*}*/
.flowBox li a div img {
display: block;
width: 100%;
}
.flowBox li a span {
display: block;
margin-top: 10px;
font-size: 12px;
color: #555;
line-height: 20px;
}
$(function () {
//=>当HTML结构加载完成才会执行这里的代码(闭包)
//1.获取需要的数据
//真实项目中,我们第一页加载完成,当用户下拉到底部,开始获取第二页的内容。服务器端会给我们提供一个API获取数据的地址,并要求客户端把获取的是第几页的内容传递给服务器,服务器依照这个原理把对应不同的数据返回“分页技术”
let page = 0,
imgData = null;
let queryData = () => {
page++;
$.ajax({
url: `json/data.json?page=${page}`,
method: 'get',
async: false,//=>同步请求(真实项目中使用的是异步)
dataType: 'json',//=>把从服务器端获取的JSON字符串转化为对象(我们这样设置后,JQ内部会帮我们转换)
success: result => {
//=>result:就是我们从服务器端获取的结果
imgData = result;
}
});
};
queryData();
//2.数据绑定
//=>传递一个对象进来,返回对应的结构字符串
let queryHTML = ({id, pic, link, title} = {}) => {
return `<a href="${link}">
<div><img src="${pic}" alt=""></div>
<span>${title}</span>
</a>`;
};
let $boxList = $('.flowBox > li'),
boxList = [].slice.call($boxList);
// console.log($boxList.get());//=>把JQ类数组对象转换为数组(GET不能传参,传参数就是获取类数组中的某一项了)
for (let i = 0; i < imgData.length; i += 3) {
//=>分别获取每三个为一组,一组中的三个内容(存在的隐性风险:当前数据总长度不是3的倍数,那么最后一次循环的时候,三个中的某一个会不存在,获取的ITEM值是UNDEFINED)
let item1 = imgData[i],
item2 = imgData[i + 1],
item3 = imgData[i + 2];
//=>我们接下来要把获取的ITEM依次插入到每一个LI中,但是绝对不是按照顺序插入,我们需要先按照每一个LI的现有高度给LI进行排序(小->大),按照最新的顺序依次插入即可
boxList.sort((a, b) => a.offsetHeight - b.offsetHeight);
if (item1) {
boxList[0].innerHTML += queryHTML(item1);
}
if (item2) {
boxList[1].innerHTML += queryHTML(item2);
}
if (item3) {
boxList[2].innerHTML += queryHTML(item3);
}
}
});
$(function () {
//1.获取数据
let page = 0,
imgData = null,
isRun = false;
let queryData = () => {
page++;
$.ajax({
url: `json/data.json?page=${page}`,
method: 'get',
async: false,
dataType: 'json',
success: result => {
imgData = result;
}
});
};
queryData();
//2.数据绑定
let bindHTML = () => {
let $boxList = $('.flowBox > li');
for (let i = 0; i < imgData.length; i += 3) {
$boxList.sort((a, b) => {
return $(a).outerHeight() - $(b).outerHeight();
}).each((index, curLi) => {
let item = imgData[i + index];
if (!item) return;
let {id, pic, link, title} = item;
$(`<a href="${link}">
<div><img src="${pic}" alt=""></div>
<span>${title}</span>
</a>`).appendTo($(curLi));
});
}
isRun = false;
};
bindHTML();
//3.当滚动到页面底部的时候,加载下一页的更多数据
$(window).on('scroll', () => {
let winH = $(window).outerHeight(),
pageH = document.documentElement.scrollHeight || document.body.scrollHeight,
scrollT = $(window).scrollTop();
if ((scrollT + 100) >= (pageH - winH)) {
if (isRun) return;
isRun = true;
if (page > 5) {
alert('没有更多数据了');
return;
}
queryData();
bindHTML();
}
});
});
$(window).on('scroll', () => {
let winH = $(window).outerHeight(),
pageH = document.documentElement.scrollHeight || document.body.scrollHeight,
scrollT = $(window).scrollTop();
//=>卷去的高度 大于 真实高度-一屏幕高度:距离底下还有100PX,我们让其开始加载更多的数据
if ((scrollT + 100) >= (pageH - winH)) {
//隐性问题:认为操作滚动,这个在同一个操作内会被触发N次,也就是同一个时间段,获取数据会被执行N次,此时我们需要做“重复操作限定”
if (isRun) return;
isRun = true;//=>开始进行新一轮处理了
if (page > 5) {
alert('没有更多数据了');
return;
}
queryData();
bindHTML();
}
});