解析javascript瀑布流原理實現圖片滾動加載
編輯：關於JavaScript
先科普下瀑布流吧
瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊並附加至當前尾部。最早采用此布局的網站是Pinterest，逐漸在國內流行開來。國內大多數清新站基本為這類風格，像美麗說、淘寶網都有使用。
這是我實現的一個效果，就是怎麼滾動都加載不玩。就跟瀑布一樣流啊流！
這裡的實現方式我們只說Js實現方法
實現原理：
對容器中已有數據塊元素進行第一次計算1 容器總寬度 2 列寬度 3 最小列數 ，得到列數後，用一個數組存放盒子所有高度，找出最小高度。之後根據序列號更新高度；看著有些拗口，實現起來就很簡單了。
對於滾動加載：即滾動到哪個高度後，需要去加載數據，其實這個就是列的最小高度值，這樣當前滾動值和最小高度值比較一下即可判斷出來，是否要觸發加載數據；就是寫一個函數，用來判斷是否達到加載圖片條件，如果達到，就開始加載。比如獲得最後一張圖片的offsetTop,可視區高度,滾動距離,也就是當圖片的offsetTop小於可視區高度和滾動距離之和的情況下，此時就應該加載了，不過條件可以隨便定，也可以等滾動到圖片的一半時候在觸發加載條件,如圖所示:
先上HTML CSS代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>waterfall</title>
<script src="script.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: yellow;
}
#container {
}
#container .pin {
padding-left: 15px;
padding-top: 15px;
float: left;
}
#container .div-box {
float: left;
border: 1px solid #ccc;
box-shadow: 0 0 5px #bbb;
background: #fff;
padding: 12px;
border-radius: 9px;
}
#container .div-box img {
width: 300px;
}
#container .div-box p {
text-align: center;
font-size: 20px;
font-weight: bold;
color: red;
}
</style>
<script>
</script>
</head>
<body>
<div id="container">
<div class="pin">
<div class="div-box">
<img src="img/1.jpg" alt="">
<p>白超華-博客園</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/2.jpg" alt="">
<p>白超華-博客園</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/3.jpg" alt="">
<p>白超華-博客園</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/4.jpg" alt="">
<p>白超華-博客園</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/5.jpg" alt="">
<p>白超華-博客園</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/6.jpg" alt="">
<p>白超華-博客園</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/7.jpg" alt="">
<p>白超華-博客園</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/8.jpg" alt="">
<p>白超華-博客園</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/9.jpg" alt="">
<p>白超華-博客園</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/10.jpg" alt="">
<p>白超華-博客園</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/1.jpg" alt="">
<p>白超華-博客園</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/2.jpg" alt="">
<p>白超華-博客園</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/3.jpg" alt="">
<p>白超華-博客園</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/4.jpg" alt="">
<p>白超華-博客園</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/5.jpg" alt="">
<p>白超華-博客園</p>
</div>
</div>
<div class="pin">
<div class="div-box">
<img src="img/6.jpg" alt="">
<p>白超華-博客園</p>
</div>
</div>
</div>
</body>
</html>
JS代碼，每行都有注釋
window.onload = function(){
var data = { //模擬後台數據 的一個JSON格式的文件
"data":[
{"src":"1.jpg"},
{"src":"2.jpg"},
{"src":"3.jpg"},
{"src":"4.jpg"},
{"src":"5.jpg"},
]
};
window.onscroll = function(){
if(checkScroll()){ //判斷是否具備滾動加載得條件
var oParent = document.getElementById('container');
for(var i=0; i<data.data.length; i++){
var div1 = document.createElement('div'); //創建div元素
div1.className = 'pin'; //設置class
oParent.appendChild(div1);
var div2 = document.createElement('div');//創建div元素
div2.className = 'div-box';
div1.appendChild(div2);
var imgs = document.createElement('img');//創建img元素
imgs.style.width = '300px';
imgs.src = 'img/'+data.data[i].src; //設置讀取路徑
div2.appendChild(imgs);
var p = document.createElement('p');//創建p元素
p.innerHTML = '白超華-博客園';
div2.appendChild(p);
}
waterfall('container','pin'); //--注意 別忘了這句，當滾動時候就執行
}
}
waterfall('container','pin');
}
function waterfall(parent, box){
var oParent = document.getElementById(parent);//獲取父級對象
var aBox = getByClass(oParent,box);//獲取所有class為pin的盒子的集合
var boxWidth = aBox[0].offsetWidth;//獲取一個盒子的寬
var pageWidth = document.body.clientWidth||document.documentElement.clientWidth;//獲取可視區寬
var cols = Math.floor(pageWidth/boxWidth);//獲得列數
var arrH = [];//用於存放盒子的高
for(var i=0; i<aBox.length; i++){
if(i<cols){//當小於第一列個數的時候
arrH.push(aBox[i].offsetHeight);
} else {
var minH = Math.min.apply(null,arrH);//得到數組中盒字的最小高度minH;
var index = getMinIndex(arrH,minH);
aBox[i].style.position = 'absolute';//設置絕對定位
aBox[i].style.top = minH+'px';//設置top，就是最小高度
aBox[i].style.left = aBox[0].offsetWidth*index+'px';//設置left，就是一個盒子的寬*index索引數
arrH[index]+=aBox[i].offsetHeight; //更新新添加盒字後的列高
}
}
}
//通過父級獲取class
function getByClass(parent, classname){
var aClass = parent.getElementsByTagName('*');
var arr = [];
for(var i=0; i<aClass.length; i++){
if(aClass[i].className == classname){
arr.push(aClass[i]);
}
}
return arr;
}
//最小值的索引index
function getMinIndex(arr,val){
for( i in arr){
if(arr[i] == val){
return i;
}
}
}
//
function checkScroll(){
var oParent = document.getElementById('container');
var aBox = getByClass(oParent,'pin');
var lastBoxHeight = aBox[aBox.length-1].offsetTop;// 當滾到到這個距離時候就開始加載
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//兼容的滾動距離
var documentHeight = document.documentElement.clientHeight; //頁面高度
if(lastBoxHeight<scrollTop+documentHeight){
return true;
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助。
小編推薦
熱門推薦