瀑布流
- 瀑布流这个效果以前很流行，常见于图片站,电商站或者艺术类网站
- 比如最早的蘑菇街,蘑菇街最早的定位模式在于"逛"这个含义,增加页面的PV值
- 现在基本上艺术类网站或者图片站用的比较多。主要还是利用AJAX
- 当用户滚动到页面的底部以后，它会接收数据，然后创建节点
- 具体见下图(具体看右边滚动条)
1213.gif
瀑布流原理
-
瀑布流必须要放到模拟服务器端执行，纯静态无法测试!
- 瀑布流充分利用了AJAX特性,AJAX是它的核心
- 瀑布流是宽度一样，但是高度不一样.
- 其次最重要的就是找到最短的那个列
- 我这个效果是列规定死了就4列,
- 有的可以随着浏览器的变化而改变列数
- 最重要的还是对数据的处理
代码
- 代码我封装好了。改改CSS数值还有宽度即可。
- 注释全,简单明了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>封装瀑布流</title>
<script src="js/ajax.js"></script>
</head>
<style>
*{margin:0px;padding:0px;}
#main{width:1040px;margin:100px auto;}
li{width:247px;list-style-type: none;float:left;margin-right:10px;}
li div{border:1px solid #000;padding:10px;margin-bottom:10px;overflow: hidden;}
li div img{ width:225px;display: block;}
</style>
<body>
<ul id="main">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
//使用方法参数调用最外面的框子即可
waterfall(document.getElementById("main"));
//代码开始都封装好了放在了waterfall里面
// 瀑布流核心就是找到高度最小的LI然后把节点插入到里面,所以最关键的是找到最小的li
function waterfall(obj){
var LiAll = obj.getElementsByTagName("li"); //获取到容器下面所有的列
var length = LiAll.length; //获取到个数
var page = 1; //设置页数
var flag = true; //开关
/*第一步找到高度最小的LI*/
function getShort(){
var index = 0 ; //获取到序号
var firstHeight = LiAll[index].offsetHeight; //获取到第一个高度
//思路利用冒泡排序。就是凡是都和第一个比。当后面的要是比第一个大则不考虑，要是比第一个小，则变成第一个，序号数值全变。然后和后面比较
for(var i=1;i<length;i++)
{
if(LiAll[i].offsetHeight<firstHeight)
{
index = i ; //赋值index
firstHeight = LiAll[index].offsetHeight; //赋值高度index
}
}
return index; //返回最小的序号
}
/*第二部接受数据插入节点*/
function getContent(){
var url = "getPics.php?cpage="+page; //接口地址。可以更改
ajax({
type:"get", //请求方式get
url: url, //请求地址
//data:"",这里我就不发送了,只接受就可以了
before:function(){
console.log("发送前进行的操作")
},
error:function(status,statusText){ //如果出现错误后，第一个表示错误的状态 第二个表示错误的原因
console.log(status+"||"+statusText);
},
success:function(data){
var data = JSON.parse(data); //因为获取到的是字符串，所以转别了格式
for(var i=0;i<data.length;i++)
{
var index = getShort(); //找到最短的LI准备插入数据
var oDiv = document.createElement("div"); //创建DIV节点
var oImg = document.createElement("img"); //创建IMG节点
var oP = document.createElement("p"); //创建P节点
oImg.src = data[i].image; //赋值地址
//这里因为是FOR循环，可能等不到页面加载完就执行下去了，页面就变形了，所以先撑开
oImg.style["width"] = "225px";
oImg.style["height"] = data[i].height*(225/data[i].width)+"px";
oP.innerHTML = data[i].title; //P节点赋值内容
oDiv.appendChild(oImg); //插入节点
oDiv.appendChild(oP); //插入P节点
LiAll[index].appendChild(oDiv); //在最短的那个li里面插入节点
flag = true ; //都插入完以后开关打开
}
}
})
}
getContent(); //开始执行。获取数据初始化
//下面是配合滚动轴实现流的效果
//思路他要是想下滚，肯定就是最小的li的高度+它距离顶端的距离<页面所见的高度+滚动的高度,只有这样用户才会滚动
//第一步获取高度最小的LI距离顶端的距离
function getTop(){
var Top = 0 ;
while(obj)
{
Top += obj.offsetTop; //累加
obj = obj.offsetParent; //我这里是每加一回，对象就变成了他的父元素，最后找到BODY,然后就结束
}
return Top;
}
//开始绑定滚动
window.onscroll = function(){
var index = getShort(); //找到最小的序号
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //获取到滚动条的距离
if(LiAll[index].offsetHeight+getTop(LiAll[index])<document.documentElement.clientHeight+scrollTop)
{
if(flag) //当开关打开执行。开关要是关闭就不执行
{
flag = false; //开关关闭
page++; //页码加1
getContent(); //然后开始执行插入内容
}
}
}
}
</script>
</html>
