瀑布流
- 瀑布流這個效果以前很流行瑰抵，常見于圖片站,電商站或者藝術(shù)類網(wǎng)站
- 比如最早的蘑菇街,蘑菇街最早的定位模式在于"逛"這個含義,增加頁面的PV值
- 現(xiàn)在基本上藝術(shù)類網(wǎng)站或者圖片站用的比較多谴分。主要還是利用AJAX
- 當(dāng)用戶滾動到頁面的底部以后田弥，它會接收數(shù)據(jù)摄悯，然后創(chuàng)建節(jié)點
- 具體見下圖(具體看右邊滾動條)
1213.gif
瀑布流原理
-
瀑布流必須要放到模擬服務(wù)器端執(zhí)行，純靜態(tài)無法測試!
- 瀑布流充分利用了AJAX特性,AJAX是它的核心
- 瀑布流是寬度一樣靠抑，但是高度不一樣.
- 其次最重要的就是找到最短的那個列
- 我這個效果是列規(guī)定死了就4列,
- 有的可以隨著瀏覽器的變化而改變列數(shù)
- 最重要的還是對數(shù)據(jù)的處理
代碼
- 代碼我封裝好了。改改CSS數(shù)值還有寬度即可适掰。
- 注釋全,簡單明了
<!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>
//使用方法參數(shù)調(diào)用最外面的框子即可
waterfall(document.getElementById("main"));
//代碼開始都封裝好了放在了waterfall里面
// 瀑布流核心就是找到高度最小的LI然后把節(jié)點插入到里面,所以最關(guān)鍵的是找到最小的li
function waterfall(obj){
var LiAll = obj.getElementsByTagName("li"); //獲取到容器下面所有的列
var length = LiAll.length; //獲取到個數(shù)
var page = 1; //設(shè)置頁數(shù)
var flag = true; //開關(guān)
/*第一步找到高度最小的LI*/
function getShort(){
var index = 0 ; //獲取到序號
var firstHeight = LiAll[index].offsetHeight; //獲取到第一個高度
//思路利用冒泡排序颂碧。就是凡是都和第一個比荠列。當(dāng)后面的要是比第一個大則不考慮，要是比第一個小稚伍，則變成第一個弯予，序號數(shù)值全變。然后和后面比較
for(var i=1;i<length;i++)
{
if(LiAll[i].offsetHeight<firstHeight)
{
index = i ; //賦值index
firstHeight = LiAll[index].offsetHeight; //賦值高度index
}
}
return index; //返回最小的序號
}
/*第二部接受數(shù)據(jù)插入節(jié)點*/
function getContent(){
var url = "getPics.php?cpage="+page; //接口地址个曙⌒饽郏可以更改
ajax({
type:"get", //請求方式get
url: url, //請求地址
//data:"",這里我就不發(fā)送了,只接受就可以了
before:function(){
console.log("發(fā)送前進行的操作")
},
error:function(status,statusText){ //如果出現(xiàn)錯誤后，第一個表示錯誤的狀態(tài) 第二個表示錯誤的原因
console.log(status+"||"+statusText);
},
success:function(data){
var data = JSON.parse(data); //因為獲取到的是字符串垦搬，所以轉(zhuǎn)別了格式
for(var i=0;i<data.length;i++)
{
var index = getShort(); //找到最短的LI準(zhǔn)備插入數(shù)據(jù)
var oDiv = document.createElement("div"); //創(chuàng)建DIV節(jié)點
var oImg = document.createElement("img"); //創(chuàng)建IMG節(jié)點
var oP = document.createElement("p"); //創(chuàng)建P節(jié)點
oImg.src = data[i].image; //賦值地址
//這里因為是FOR循環(huán)呼寸，可能等不到頁面加載完就執(zhí)行下去了，頁面就變形了猴贰，所以先撐開
oImg.style["width"] = "225px";
oImg.style["height"] = data[i].height*(225/data[i].width)+"px";
oP.innerHTML = data[i].title; //P節(jié)點賦值內(nèi)容
oDiv.appendChild(oImg); //插入節(jié)點
oDiv.appendChild(oP); //插入P節(jié)點
LiAll[index].appendChild(oDiv); //在最短的那個li里面插入節(jié)點
flag = true ; //都插入完以后開關(guān)打開
}
}
})
}
getContent(); //開始執(zhí)行对雪。獲取數(shù)據(jù)初始化
//下面是配合滾動軸實現(xiàn)流的效果
//思路他要是想下滾，肯定就是最小的li的高度+它距離頂端的距離<頁面所見的高度+滾動的高度,只有這樣用戶才會滾動
//第一步獲取高度最小的LI距離頂端的距離
function getTop(){
var Top = 0 ;
while(obj)
{
Top += obj.offsetTop; //累加
obj = obj.offsetParent; //我這里是每加一回米绕，對象就變成了他的父元素瑟捣，最后找到BODY,然后就結(jié)束
}
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) //當(dāng)開關(guān)打開執(zhí)行。開關(guān)要是關(guān)閉就不執(zhí)行
{
flag = false; //開關(guān)關(guān)閉
page++; //頁碼加1
getContent(); //然后開始執(zhí)行插入內(nèi)容
}
}
}
}
</script>
</html>
