放这个图片是因为, 里面的姑娘都挺好看, 哈哈
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"}]
