瀑布流-滚动-延时加载图片内容

最新推荐文章于 2023-02-27 17:09:52 发布

Devil_xkl

最新推荐文章于 2023-02-27 17:09:52 发布

阅读量319

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/Devil_lzh/article/details/79392650

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0; font-size: 12px;}
#container{
padding: 10px;
margin: 0 auto;
}
#container>div{
position: relative;
}
.imageView{
border: 1px solid black;
position: absolute;
padding: 5px 2px;
text-align: center;
box-sizing: border-box; //添加box-sizing 是为了使前面添加padding的数值使窗口保持原来的大小
}
.load-more{
text-align: center;
}
.load-more span{
display: inline-block;
cursor: pointer;
}
.title{
font-weight: bold;
font-size: 14px;
}
.content{
font-style: italic;
height: 30px;
line-height: 30px;
}
.author{
text-align: right;
padding-right: 5px;
}
</style>
</head>
<body>
<div id="container">
<div class="image-container"></div>
<p class="load-more"><span>加载更多</span></p>
</div>
</body>
<script src="js/jquery.min-1.12.4.js"></script>
<script src="js/template-web.js"></script>


<script id="imageView" type="text/html">
<% for(var i = 0;i<data.length;i++){ %>
<div class="imageView">

<div><img src="" lazy-load="http://172.17.12.10:8080/webserver/images/<%=data[i].name%>" width="<%=data[i].width%>" height="<%=data[i].height%>"/></div> // IP地址可以改成你需要的
<div class="title"><%=data[i].title%></div>
<div class="content"><%=data[i].content%></div>
<div class="author"><%=data[i].author%></div>
</div>
<% } %>
</script>


<script>
/*
在第一行按顺序排好所有的图片(每张图片宽度一样，高度不一样)，以五张图片为例
从第二开始，从五列当中找出高度最小的一列，把新的图片加在这列上，然后列的的
高度需要加上新图片的高度。重复这个过程
*/

// 加载获取图片数据
/*
http://172.17.12.10:8080/webserver/image?p=1&s=10
p 页面码
s 每页获取到的记录数量
*/

var page = 1; //页码
var size = 30; //每次获取到的数据图片数

function loadData(){
$.ajax({
url: 'http://172.17.12.10:8080/webserver/image', //写存图片的IP地址
data: {p:page, s:size},
type: 'get',
dataType: 'jsonp',
success: function(data){
if (data.statusCode == 0) { // 检查服务器返回的状态码是否为正确的状态码
appendImageViewsToDOM(data);

}else{
alert('获取的数据异常');
}
},
error: function(error){
console.log('连接服务器出现异常');
}
});
}

/**
* 把获取到数据生成节点并添加到DOM树中
* @param data 获取到图片数据数组
* */

function appendImageViewsToDOM(data){
//使用模板生成标签字符串数据
var html = template('imageView',data);
//将字符串追加到图片节点中
var container = $('.image-container');
container.html(container.html() + html);
resize();
}


//获取容器的宽度
var contaninerWidth = $('#container').width();
//保存每一列的高度
var heights;
/**
* 对所有的图片进行位置的定位
* */

function resize(){
var views = $('.imageView'); //获取所有图片所有div
//获取第一个view的宽度，后面所有的view的宽度以这个作为标准
var viewWidth = views[0].offsetWidth;
//计算每一行能放多少个view
var cols =Math.floor(contaninerWidth / viewWidth);
heights= [];

var tmp,left; //如果在循环里声明，当循环结束时会被回收，下次循环又会重
//新创建，所以在外面声明可以减少这个过程，提高效率
for(var i = 0;i<views.length;i++){ //获取每个view对位置进行设置
tmp = views[i];

//对前clos个view的位置进行摆放
if(i<cols){
left = viewWidth * i + 12 * i;
$(tmp).css({
'top':0,
'left':left + 'px',
'width':viewWidth + 'px'
});
heights.push(tmp.offsetHeight);
}else{
//处理除了第一行以外的其他view
var minPos = getMiniHeight();
left = viewWidth * minPos + 12 * minPos;
$(tmp).css({
'top': heights[minPos] + 6 + 'px',
'left': left + 'px',
'width': viewWidth + 'px'
});
//把当前列的高度修改
heights[minPos] += tmp.offsetHeight + 10;
}
}
//修改图片容器的高度
$('.image-container').css('height',heights[getMaxHeight()]);
//修改整个容器的宽度
var lastView = views[cols-1];//cols是每行能够显示的最大图片数量，获取每行最后一个图片需要减1
var width = lastView.offsetLeft + lastView.offsetWidth;
$('#container').css('width',width + 'px');
}
/*
* 获取高度最小的下标
*/
function getMiniHeight(){
var min = 0; //假设第一个下标是最小的
for(var i = 1;i<heights.length;i++){
if(heights[min] > heights[i]){
min = i;
}
}
return min;
}

/*
* 获取高度最大的下标
*/

function getMaxHeight(){
var min = 0; //假设第一个下标是最小的
for(var i = 1;i<heights.length;i++){
if(heights[min] < heights[i]){
min = i;
}
}
return min;
}

//可要可不要
//添加点击事件，加载更多的数据
$('.load-more span').on('click',function(){
page++;
loadData();
});
loadData();


//添加滚动事件，监听是否滚动离底部小于100px
$(window).on('scroll',function(){
//整个body的高度
var bodyHeight = document.body.offsetHeight;
//可视部分距离顶部的高度
var scrollTop = document.documentElement.scrollTop;
//屏幕的高度
var screenHeight = document.documentElement.clientHeight;
//距离底部高度
var distance = screenHeight / 2;
if(bodyHeight - scrollTop - screenHeight <= distance){
page++;
loadData();
}
showLazyLoadImages();
});


/*
* 加载延时显示的图片内容
*/

function showLazyLoadImages(){
//可视部分距离顶部的高度
var scrollTop = document.documentElement.scrollTop;
//屏幕的高度
var screenHeight = document.documentElement.clientHeight;
//读取延时加载的图片
var imgs = $('.imageView img');
var tmp;

for(var i = 0;i<imgs.length;i++){
tmp = imgs[i];
//判断图片的top是否小于scrollTop+clientHeight
//优化：避免再次加载图片，还要判断<img/>有没有lazy-load属性
//减500目的是看清楚加载图片的过程
if($(tmp).attr('lazy-load') && $(tmp).offset().top < scrollTop + screenHeight -500){
//加载图片，就是把lazy-load的内容赋值给src
$(tmp).attr('src',$(tmp).attr('lazy-load'));
//删除lazy-load属性
$(tmp).removeAttr('lazy-load');
}
}
}
</script>
</html>