测试摘要1

于 2020-05-07 18:39:37 发布
阅读量245 收藏
点赞数 1
版权所有©️都是我自己写哒！
本文链接：https://blog.csdn.net/cpongo1/article/details/105978946
版权

瀑布流概念

  • 瀑布流布局是错落式的布局方式。它有一个特点，整个布局以列为单位，下一个区块总是放在总高度最短的那一列的下面。

 

  • html代码块
1
2
3
4
5
6

<ul id="pics">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
  • css代码块

1
2
3
4
5

*{margin:0;padding:0};
#pics{list-style: none;margin: 30px auto;width: 1080px;}
#pics li{float: left;width: 250px;margin: 10px;}
#pics li div{width: 210px;padding: 10px;border: 1px solid gray;margin-bottom: 20px;}
#pics li div img{width: 200px;}

  • js代码块

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

    //运用ajax获取图片地址

//获取页面元素(组件/控件)
let lis=document.getElementById("pics").getElementsByTagName("li");

//接收服务器数据
function fn(data){
	//遍历所有数据
	for(let i in data){
		let oDiv=document.createElement("div");
		let oImg=document.createElement("img");
		let oP=document.createElement("p");
		//将接收的数据放到页面组件中
		oImg.src=data[i].preview; //缩略图
		oP.innerHTML=data[i].title;  //标题
		//将oImg和oP放到oDiv中
		oDiv.appendChild(oImg);
		oDiv.appendChild(oP);
		//按一定的规律将图片放入到li中
		switch(i%4){
			case 0:
				lis[0].appendChild(oDiv);
			break;
			case 1:
				lis[1].appendChild(oDiv);
			break;
			case 2:
				lis[2].appendChild(oDiv);
			break;
			case 3:
				lis[3].appendChild(oDiv);
			break;
			default:
				lis[0].appendChild(oDiv);
			break;
		}

	}
	
}

//pageIndex表示页码
let pageIndex=1;
let JSONP=document.creatElement("script");
JSONP.type='text/javaScript';
//src表示地址 fn表示回调函数
JSONP.src="http://www.wookmark.com/api/json/popular?page='+pageIndex+'&callback=fn";
document.body.appendChild(JSONP);

  • 这种方式实现的效果是每个列的元素内的图片数量是一致的，如果某一列高度图片过高，那么就会出现最后的效果是参差不齐的。如果在加载下一页，效果就会更加不好，会存在一个又一个的窟窿，这显然是和我们想要的效果是不一致的。那样这就需要我们队代码进行一定的更改。
    代码如下：

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

    //获取页面元素(组件/控件)
let lis=document.getElementById("pics").getElementsByTagName("li");
//pageIndex表示页码
let pageIndex=1;
let isLoaded=false;
loadData();//加载数据

//滚动事件
window.onscroll=function(){
	var index=getMinHeight();//最短列的索引
	// console.log(document.documentElement.scrollTop);//滚动距离
	//滚动高度
	var h1=document.documentElement.scrollTop;
	var h2=document.documentElement.clientHeight;//视口高度
	var h3=lis[index].offsetHeight;//最短列高度
	if(h1+h2>h3){
		//加载下一页
		pageIndex++;
		if(isLoaded){
			loadData();	
		}
	}
};

//接收服务器数据
function fn(data){
	//遍历所有数据
	for(let i in data){
		let oDiv=document.createElement("div");
		let oImg=document.createElement("img");
		let oP=document.createElement("p");
		//将接收的数据放到页面组件中
		oImg.src=data[i].preview; //缩略图preview表图片路径
		oP.innerHTML=data[i].title;  //标题title表图片标题
		//将oImg和oP放到oDiv中
		oDiv.appendChild(oImg);
		oDiv.appendChild(oP);

		//设置div预留高度
		var oH=(data[i].height/data[i].width)*220+80+'px';
		oDiv.style.height=oH;
		oDiv.appendChild(oImg);
		oDiv.appendChild(oP);
		//计算 上一次存放后，所有列中最短列
		//将图片放置在最短的列中
		var index=getMinHeight();
		lis[index].appendChild(oDiv);
	}
	isLoaded=true;//加载完毕
	
};
//获取最短列
function getMinHeight(){
	let minIndex=0;		//假设第一列最短 最短列索引
	//取出最短列的高度
	let mHieght=lis[minIndex].offsetHeight;
	for(let i=0;i<lis.length;i++){
		if(lis[i].offsetHeight<mHieght){
			mHieght=lis[i].offsetHeight;	//将高度短的列的高度保存起来
			minIndex=i;	//将短的列的索引保存起来
		}
	}
	return minIndex;
};

function loadData(){
	isLoaded=false;//正在加载	
	let JSONP=document.creatElement("script");
	JSONP.type='text/javaScript';
	//src表示地址大家可以自行添加 fn表示回调函数
	JSONP.src="http://----?page='+pageIndex+'&callback=fn";
	document.body.appendChild(JSONP);
}

  • 最后还需要提醒大家一点，本篇文章中的例子仅供参考学习，是用于帮助大家理解瀑布流布局的，切误将本篇文章中的代码直接使用在正式项目当中。希望以上代码对大家有所帮助。

赏

谢谢你请我吃糖果

瀑布流概念

  • 瀑布流布局是错落式的布局方式。它有一个特点，整个布局以列为单位，下一个区块总是放在总高度最短的那一列的下面。

实现

  • html代码块
1
2
3
4
5
6

<ul id="pics">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
  • css代码块
1
2
3
4
5

*{margin:0;padding:0};
#pics{list-style: none;margin: 30px auto;width: 1080px;}
#pics li{float: left;width: 250px;margin: 10px;}
#pics li div{width: 210px;padding: 10px;border: 1px solid gray;margin-bottom: 20px;}
#pics li div img{width: 200px;}

  • js代码块

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

    //运用ajax获取图片地址

//获取页面元素(组件/控件)
let lis=document.getElementById("pics").getElementsByTagName("li");

//接收服务器数据
function fn(data){
	//遍历所有数据
	for(let i in data){
		let oDiv=document.createElement("div");
		let oImg=document.createElement("img");
		let oP=document.createElement("p");
		//将接收的数据放到页面组件中
		oImg.src=data[i].preview; //缩略图
		oP.innerHTML=data[i].title;  //标题
		//将oImg和oP放到oDiv中
		oDiv.appendChild(oImg);
		oDiv.appendChild(oP);
		//按一定的规律将图片放入到li中
		switch(i%4){
			case 0:
				lis[0].appendChild(oDiv);
			break;
			case 1:
				lis[1].appendChild(oDiv);
			break;
			case 2:
				lis[2].appendChild(oDiv);
			break;
			case 3:
				lis[3].appendChild(oDiv);
			break;
			default:
				lis[0].appendChild(oDiv);
			break;
		}

	}
	
}

//pageIndex表示页码
let pageIndex=1;
let JSONP=document.creatElement("script");
JSONP.type='text/javaScript';
//src表示地址 fn表示回调函数
JSONP.src="http://www.wookmark.com/api/json/popular?page='+pageIndex+'&callback=fn";
document.body.appendChild(JSONP);

  • 这种方式实现的效果是每个列的元素内的图片数量是一致的，如果某一列高度图片过高，那么就会出现最后的效果是参差不齐的。如果在加载下一页，效果就会更加不好，会存在一个又一个的窟窿，这显然是和我们想要的效果是不一致的。那样这就需要我们队代码进行一定的更改。
    代码如下：

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

    //获取页面元素(组件/控件)
let lis=document.getElementById("pics").getElementsByTagName("li");
//pageIndex表示页码
let pageIndex=1;
let isLoaded=false;
loadData();//加载数据

//滚动事件
window.onscroll=function(){
	var index=getMinHeight();//最短列的索引
	// console.log(document.documentElement.scrollTop);//滚动距离
	//滚动高度
	var h1=document.documentElement.scrollTop;
	var h2=document.documentElement.clientHeight;//视口高度
	var h3=lis[index].offsetHeight;//最短列高度
	if(h1+h2>h3){
		//加载下一页
		pageIndex++;
		if(isLoaded){
			loadData();	
		}
	}
};

//接收服务器数据
function fn(data){
	//遍历所有数据
	for(let i in data){
		let oDiv=document.createElement("div");
		let oImg=document.createElement("img");
		let oP=document.createElement("p");
		//将接收的数据放到页面组件中
		oImg.src=data[i].preview; //缩略图preview表图片路径
		oP.innerHTML=data[i].title;  //标题title表图片标题
		//将oImg和oP放到oDiv中
		oDiv.appendChild(oImg);
		oDiv.appendChild(oP);

		//设置div预留高度
		var oH=(data[i].height/data[i].width)*220+80+'px';
		oDiv.style.height=oH;
		oDiv.appendChild(oImg);
		oDiv.appendChild(oP);
		//计算 上一次存放后，所有列中最短列
		//将图片放置在最短的列中
		var index=getMinHeight();
		lis[index].appendChild(oDiv);
	}
	isLoaded=true;//加载完毕
	
};
//获取最短列
function getMinHeight(){
	let minIndex=0;		//假设第一列最短 最短列索引
	//取出最短列的高度
	let mHieght=lis[minIndex].offsetHeight;
	for(let i=0;i<lis.length;i++){
		if(lis[i].offsetHeight<mHieght){
			mHieght=lis[i].offsetHeight;	//将高度短的列的高度保存起来
			minIndex=i;	//将短的列的索引保存起来
		}
	}
	return minIndex;
};

function loadData(){
	isLoaded=false;//正在加载	
	let JSONP=document.creatElement("script");
	JSONP.type='text/javaScript';
	//src表示地址大家可以自行添加 fn表示回调函数
	JSONP.src="http://----?page='+pageIndex+'&callback=fn";
	document.body.appendChild(JSONP);
}

  • 最后还需要提醒大家一点，本篇文章中的例子仅供参考学习，是用于帮助大家理解瀑布流布局的，切误将本篇文章中的代码直接使用在正式项目当中。希望以上代码对大家有所帮助。

赏

谢谢你请我吃糖果

评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

flybirding10011

谢谢支持啊999

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值