瀑布流加载是一种不错的前端加载方式，用户的体验也还不错。本次尝试中涉及到布局、图片追加、滚动条监控的内容
主要实现步骤：计算获取高度最低列，添加图片到其下，定时器每次添加图片，下拉加载问题
0x01 布局
前端的布局使用到了flex弹性布局
前端显示图片部分的HTML代码：
<div class="gallary">
<!-- 第一列 -->
<div class="imgBox" id="item1">
</div>
<!-- 第二列 -->
<div class="imgBox" id="item2">
</div>
<!-- 第三列 -->
<div class="imgBox" id="item3">
</div>
<!-- 第四列 -->
<div class="imgBox" id="item4">
</div>
</div>
那么在css中这样设置即可：
.gallary{
width: 70%;
margin: 8px auto;
padding: 5px 8px;
background-color: #fff;
display: flex; /*设置felx布局*/
flex-direction: row; /*方向是横向（行）*/
}
.imgBox{
flex: 1; /*占比为1，有四列占比就是1/4*/
padding: 0px;
margin:10px 5px;
width: 250px;
}
.imgBox img{
width: 100%;
margin:4px;
transition: all 0.2s ease-in-out; /*淡入淡出*/
}
.imgBox img:hover{
cursor: pointer;
transform: scale(1.05); /*放大img*/
box-shadow: 1px 1px 2px #777;
}
0x02 Javascript控制
要想获取最低高度的列，那么就需要获取每列的高度并取得最小列，返回其节点。
// 获取最小的列
function getMinDiv(){
var it1 = $('#item1');
var it2 = $('#item2');
var it3 = $('#item3');
var it4 = $('#item4');
var it1Height = calHeight(it1.children());
var it2Height = calHeight(it2.children());
var it3Height = calHeight(it3.children());
var it4Height = calHeight(it4.children()); // 计算函数单独写
var minDiv = Math.min(it1Height, it2Height, it3Height, it4Height);
if(minDiv == it1Height){ return it1; }
else if(minDiv == it2Height){ return it2; }
else if(minDiv == it3Height){ return it3; }
else{ return it4; }
}
// 计算列图片占用高度
function calHeight(imgs){
if(imgs == null || imgs.length == 0 ){
return 0;
}
else{
var Height = 0;
for (var i = 0; i < imgs.length; i++) {
Height += imgs[i].height;
}
return Height;
}
}
添加图片到对应列后：
// 插入图片
function insertImgs(windowHeight){
var counter = 0;
var inter = setInterval(function(){
// console.log(windowHeight < document.documentElement.scrollHeight);
if( windowHeight < document.documentElement.scrollHeight || counter>10){
clearInterval(inter); //清除定时器
}
var div = getMinDiv();
var num = Math.floor((Math.random()*10)+1); // 获取img目录下随机10张图片
div.append('<img src="./img/'+num+'.jpg">');
counter += 1;
}, 100);
}
文档加载，同时监控滚动条高度，来决定是否加载新的图片：
$(function(){
var windowHeight = window.screen.height+500; // 屏幕高度+500，初始化图片加载占用限制高度
var initHeight = windowHeight;
var timer = null; // 节流，防止滚动条多次执行事件
insertImgs(windowHeight); //第一次加载
$(window).scroll(function(){
clearTimeout(timer);
// 已经滚动高度 + 屏幕高度 > 能滚动高度
timer = setTimeout(function () {
if($(document).scrollTop() + window.screen.height > document.documentElement.scrollHeight){
insertImgs(windowHeight+=window.screen.height);
}
}, 1000);
})
})
0x03 完整代码
打包给大家，有兴趣的可以下载参考：
参考
主要参考如下文章：