1、什么是瀑布流
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。
瀑布流布局分为固定列和非固定列。
2、如何实现
原理：每次往最短的Li中添加数据。
3、小实例（小在服务器环境下运行）
1.布局
html代码：
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
可以先往页面中添加一些内容方便布局。
CSS
<style type="text/css">
body {margin: 0;}
#ul1 {width: 1080px; margin: 100px auto 0;}
li { width: 247px; list-style: none; float: left; margin-right: 10px; }
li div {border: 1px solid #000; padding: 10px; margin-bottom: 10px;}
li div img { width: 225px; display: block;}
</style>
2.数据分析
（1）如何获取最短的li
【9,3,5,6,2,4,7】
假如我们要从上面的数字中获取到最小的一个数字所在的位置
那我先定义n=0，min=9
将9与3进行对比，3比9小，我们把n赋值为1（3所在的位置），min=3，以此类推。
获取最短的li同样可以使用此方法
function getShort() {
var index = 0;
var ih = aLi[index].offsetHeight;
for (var i = 1; i < aLen; i++) {
if (aLi[i].offsetHeight<ih) {
index=i;
ih=aLi[i].offsetHeight;
}
}
return index;
}
最后返回的索引值便是我们想得到的最短的那个li
3.初始JS代码如下
<script src="ajax.js"></script>
<script type="text/javascript">
window.onload = function() {
var oUl = document.getElementById('ul1');
var aLi = document.getElementsByTagName('li');
var aLen = aLi.length;
//如何获取最短的LI
function getShort() {
var index = 0;
var ih = aLi[index].offsetHeight;
for (var i = 1; i < aLen; i++) {
if (aLi[i].offsetHeight<ih) {
index=i;
ih=aLi[i].offsetHeight;
}
}
return index;
}
ajax("get","getPics.php","cpage=1",function (data) {
var data = JSON.parse(data);
for (var i = 0; i < data.length; i++) {
_index = getShort();
var oDiv = document.createElement("div");
var oImg = document.createElement("img");
var oP=document.createElement("p");
oImg.src=data[i].preview;
// 下面两句是后加的，其实更好的办法是用递归
oImg.style.width = '225px';
oImg.style.height = data[i].height * ( 225 / data[i].width ) + 'px';
oP.innerHTML = data[i].title;
oDiv.appendChild(oImg);
oDiv.appendChild(oP);
aLi[_index].appendChild( oDiv );
}
});
};
</script>
其实不写宽高数据也可以被正常加载过来，但是这么写的话有一个问题，就是可能到后面所有的图片全都加载在一列，因为图片撑开是需要时间的，在它还没撑开高度前，都会被认为是最短的一列li，for循环会一直进行。
封装的ajax函数
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);
}
}
};
}
现在数据正常加载，图片格式也是正常的，但是拉完一页就到头了，我们还需要让数据能够不停的被加载进来。
4.如何继续加载数据
什么时候加载？
任何一个li的底部进入到可视区范围内，数据就可以加载下一列了。
条件：li的top值+li自身的高<滚动条滚动的值+可视区的高
完整代码：
<script src="ajax.js"></script>
<script>
window.onload = function() {
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var iLen = aLi.length;
var iPage = 1;
var b = true;
//初始化数据处理
getList();
function getList() {
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
var _index = getShort();
var oDiv = document.createElement('div');
var oImg = document.createElement('img');
oImg.src = data[i].preview;
oImg.style.width = '225px';
oImg.style.height = data[i].height * ( 225 / data[i].width ) + 'px';
oDiv.appendChild( oImg );
var oP = document.createElement('p');
oP.innerHTML = data[i].title;
oDiv.appendChild( oP );
aLi[_index].appendChild( oDiv );
}
b = true; //执行完代码之后要记得把开关打开，否则后面的数据就没办法加载了
});
}
window.onscroll = function() {
var _index = getShort();
var oLi = aLi[_index]; //获取到最段的li
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //获取滚动条的高度
if ( getTop( oLi ) + oLi.offsetHeight < document.documentElement.clientHeight + scrollTop ) {
if ( b ) {
b = false;
iPage++;
getList();
}
}
}
function getShort() {
var index = 0;
var ih = aLi[index].offsetHeight;
for (var i=1; i<iLen; i++) {
if ( aLi[i].offsetHeight < ih ) {
index = i;
ih = aLi[i].offsetHeight;
}
}
return index;
}
function getTop(obj) {
var iTop = 0;
while(obj) {
iTop += obj.offsetTop;
obj = obj.offsetParent;
}
return iTop;
}
}
</script>
后果想要做的好看一点的话就加上加载动画~
网友评论