A jquery plug-in every day-make a waterfall screen
Make a waterfall screen
It’s the most basic waterfall screen, aha
The effect is as follows
Code part
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做个瀑布屏</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
user-select: none;
}
body,html{
width: 100%;
height: 100%;
}
#div{
width: 100%;
height: 100%;
overflow-x:hidden;
overflow-y: auto;
}
.item,#more{
display: flex;
justify-content: center;
align-items: center;
width: 95%;
height: 100px;
background-color: lightgray;
margin:10px auto;
}
#more:hover{
cursor: pointer;
box-shadow: 0 0 0 1px black;
}
</style>
</head>
<body>
<div id="div">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div id="more">加载更多？</div>
</div>
</body>
</html>
<script>
$(function(){
var flag =true;
//第一种情况-主动点击加载更多
$("#more").click(function(){
addmore();
})
//第二种情况-滑动到底部自动加载更多
//判断条件：nScrollTop + nDivHight >= nScrollHight
$("#div").scroll(function(){
var $that = $(this);
var top = $that.scrollTop();
var height = $that.height();
var sheight = $that[0].scrollHeight;
if(flag&&top+height>=sheight){
flag = false;
addmore(5).then(res=>{
flag = res
});
}
})
//加载更多的方法
function addmore(count){
return new Promise((resolve,reject)=>{
count=count==undefined?3:count;
var index = parseInt($(".item").last().text());
for(var i = 0;i<count;i++){
index++;
var $temp = $("<div class='item'>"+index+"</div>");
$("#more").before($temp);
resolve(true);
}
})
}
})
</script>
Idea explanation
- Just an effect, actively load more, or slide to the bottom to load more
- Then, when our data call comes in, the network request must be delayed, so I imitated the asynchronous structure with promises, and restored the flag after the data came. At this time, the next sliding refresh is allowed.
- Finish, rest