放這個圖片是因為, 里面的姑娘都挺好看, 哈哈
20170822164246.jpg
之前做的瀑布流
可以拽下代碼: 之后按照 md文件中 的步驟裝個本地服務器 查看下加載效果
git clone https://github.com/kingdujiabo/Pubuliu.git
拽下代碼后如果想查看效果可以執行下面的命令,
-
安裝本地服務器, 已安裝的跳過
npm install http-server -g全局安裝本地服務器 -
啟動服務器
http-server啟動服務器
HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>阿杜的瀑布流</title>
<link rel="stylesheet" href="css/pubu.css" />
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
</div>
<script type="text/javascript" src="js/pubu1.js"></script>
</body>
</html>
CSS
*{margin:0;padding:0;}
#main{position:relative;}
.box{
padding:15px 0 0 15px;
float:left;
}
.pic{
padding:10px;
border:1px solid #ccc;
border-radius:5px;
box-shadow:0 0 5px #ccc;
background:#FFF;
}
.pic img{
width:236px;
height:auto;
opacity: 1;
}
.pic:hover img{opacity:0.7;}
JS
// 1: window.onload時 把現在加載 的圖片排序一次
var loading = false; // 如果沒有加載,就可以加載
window.onload = function () {
// 排序
waterfall('main','box');
//滾輪加載, 符合條件時, 當滾輪滾到最后一個div 的一半時執行ajax請求, 請求新的數據
window.onscroll = function () {
if (getMore()) {
// 這里是 ajax 請求, 如果沒有加載,就可以加載, 加載完成后就設置為false未加在狀態
if (!loading) {
loading = true;
console.log('發起請求, 加載更多');
// 模擬加載完成,后設置狀態為false
// setTimeout(function() {
// loading = false ;
// console.log('加載完成')
// },3000)
putDate(); // 請求數據
}
}
}
waterfall('main','box');
}
// 排序方法
// 獲取大盒子. 獲取 小盒子
// 計算大盒子里能放 幾列 小盒子
// 計算 哪個盒子所在的位置的 offsetTop 最小
// 獲取這個最小盒子的 offsetTop 加上自己的 offsetHeight 作為下一個盒子的position : top 的值
waterfall = (parent, box) => {
// 獲取大盒子. 獲取 小盒子
let parentBox = document.getElementById(parent);
let theBox = document.getElementsByClassName(box);
// 計算大盒子里能放 幾列 小盒子
let mainWidth = document.documentElement.clientWidth;
let contentWidth = theBox[0].offsetWidth;
let clo = Math.floor(mainWidth/contentWidth);
// 給大盒子設置寬度
parentBox.style.cssText = `width: ${contentWidth*clo}px; margin: 0 auto;`;
/* 計算 哪個盒子所在的位置的 offsetTop 最小
創建一個數組, 把現在屏幕寬度能設置的列數,比如最大時4列, 把前4 個div的高度放進數組中,
然后超過 4 的開始計算,
1: 數組中誰最小,
2: 獲取他的值 作為這個將要定位的div 的 top值, 下標*contentWidth 作為 left的定位
3: 更改數組, 把這個div的 offsetHeight + 最小值 更新這個值
*/
let arr = [];
[...theBox].map((item,index) =>{
if (index < clo ) {
arr.push(item.offsetHeight)
} else {
let getMinNum = Math.min.apply( null, arr); // 獲取最小值
let getMinNumIndex = arr.findIndex(function(item) { return item === getMinNum}) // 獲取最小值所在的Index
theBox[index].style.cssText = `position: absolute; top: ${getMinNum}px; left: ${getMinNumIndex*contentWidth}px`;
arr[getMinNumIndex] += theBox[index].offsetHeight;
}
})
// console.log();
};
// 條件, 當滾動到最后一個 div 的 中間位置, 就加載
// 即 div.offsetTop + div.offsetHeight/2 小于 scrollTop(滾動到上面看不到的距離) + clientHeight (現在可視區域的高度) 時就加載
getMore = () => {
let theBox = document.getElementsByClassName('box');
let len = theBox.length;
let ele = theBox[len - 1 ];
// 獲取div的 offsetTop ,offsetHeight
let divTop = ele.offsetTop + ele.offsetHeight/2 ;
// 獲取 scrollTop(滾動到上面看不到的距離)
let scrollT = document.body.scrollTop || document.documentElement.scrollTop;
//獲取 clientHeight (現在可視區域的高度)
let clitH = document.body.clientHeight || document.documentElement.clientHeight;
return divTop < scrollT + clitH
console.log(clitH)
}
//后臺請求數據
function putDate(){
var xhr = ajaxContent();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200) {
var res = JSON.parse(xhr.responseText);
var oparent = document.getElementById('main');
[...res].map ((item,index) => {
var url = item.src;
var str ='<div class="pic"></div>';
var mdiv = document.createElement('div');
mdiv.setAttribute('class','box')
mdiv.innerHTML = str;
oparent.appendChild(mdiv);
waterfall('main','box'); //請求一次做一次定位
loading = false;
})
}
}
xhr.open('get','../config/data.js',true);
xhr.send();
}
function ajaxContent(){
var xhr= null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObjext('Microsoft.XMLHTTP');
}
return xhr;
}
config/data.js
[{"src":"1.jpg"},{"src":"2.png"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},{"src":"11.jpg"},{"src":"12.jpg"},{"src":"13.png"},{"src":"14.jpg"},{"src":"15.jpg"},{"src":"16.jpg"},{"src":"17.jpg"},{"src":"18.jpg"},{"src":"19.jpg"},{"src":"20.jpg"},{"src":"21.jpg"},{"src":"22.jpg"},{"src":"23.jpg"},{"src":"24.jpg"},{"src":"25.jpg"},{"src":"26.jpg"},{"src":"27.jpg"},{"src":"28.png"},{"src":"29.jpg"},{"src":"30.jpg"}]
